Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question CSS Gallery working in Firefox but not IE

    Hi everyone,

    I've been trying to get a simple css photo gallery to work on my site with a list of images which are displayed as thumbnails, when clicking on a thumbnail it should display the full sized image to the left.

    The problem is it works fine in Firefox but when using IE6 its not displaying the full sized image in the correct place.

    The url of a test page can be found below, any help would be appreciated :

    http://www.pets4homes.co.uk/Pets4Hom...2573F40073FF6E

    Many Thanks
    Mark

  • #2
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,179
    Thanks
    174
    Thanked 257 Times in 257 Posts
    i couldnt tell because i didnt know what the class or id was, but is it floating left and clearing left?

  • #3
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi,

    Here is the css and html code I have used. I just cant understand why Firefox displays this correctly yet IE6 displays the large images in the wrong place :

    Code:
    #gallery {width:535px; height:360px; position:relative; border:1px solid #ddd; background:#f8f8f8;}
    #gallery ul {list-style:none; padding:5px; margin:0; width:100px; float:right; height:340px; overflow:auto;}
    #gallery ul li {display:inline; width:70px; height:70px; float:left; margin:0 4px 4px 0; border:1px solid #444; cursor:pointer;}
    #gallery ul li img {display:block; width:70px; height:70px;}
    
    /* required for IE5.x and IE6 to display the start image size correctly */
    #gallery ul li.click i img.default {margin:5px auto 0 auto; width:400px; height:300px; border:1px solid #fff;}
    
    #gallery ul li.off {display:none;}
    
    #gallery ul li.click {border-color:#fc0; background:#f8f8f8; cursor:default;}
    
    #gallery ul li.click i {position:absolute; left:0; top:0; width:430px; height:355px;}
    
    #gallery ul li.click i img {margin:5px auto 0 auto; width:auto; height:auto; border:1px solid #fff;}
    
    #gallery ul li.click span {display:block;}
    and here is the html :

    Code:
    <div id="gallery">
    <ul>
    <li><i><img src="FF84891F8BD5D302802573F40073FF6E/$file/small_katmea2.jpg"></i></li><li><i><img src="FF84891F8BD5D302802573F40073FF6E/$file/small_gper.jpg"></i></li><li><i><img src="FF84891F8BD5D302802573F40073FF6E/$file/small_siam11.jpg"></i></li><li><i><img src="FF84891F8BD5D302802573F40073FF6E/$file/small_persianginger.jpg"></i></li><li><i><img src="FF84891F8BD5D302802573F40073FF6E/$file/small_scrappy2.jpg"></i></li><li><i><img src="FF84891F8BD5D302802573F40073FF6E/$file/small_japanesechin.jpg"></i></li><li><i><img src="FF84891F8BD5D302802573F40073FF6E/$file/small_q1qq.jpg"></i></li><li class="click"><i><img class="default" src="FF84891F8BD5D302802573F40073FF6E/$file/small_katmea2.jpg"></i></li>
    </ul>
    </div>

  • #4
    Regular Coder Actinia's Avatar
    Join Date
    Feb 2007
    Location
    Essex, UK
    Posts
    250
    Thanks
    1
    Thanked 23 Times in 22 Posts
    This looks to be an incredibly complicated way of getting your image swaps. I would remove the target image (with the class default) to a div separate from the gallery list. This can then be positioned in the gallery div floated left of the list of thumbnails (within their own div). Give the target image in id (id="target"), then the onclick function for each thumbnail will simply set the source image for the target.

    It does not help that your css and js files are given the suffix 'htm'. This means that the syntax highlighting in my web editor is misled.

    Why are there all those <i><i><i><i> ... tags?

    J

  • #5
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile

    Hi,

    Thanks for your replies, im not experienced with CSS recently. I've used a few examples i've found on the web and obviously messed something up somewhere, if this is a complicated way to do it, could someone please help me to write a simpler version of it??

    Thanks for your help
    Mark

  • #6
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,179
    Thanks
    174
    Thanked 257 Times in 257 Posts
    well, here is a javascript easy way to do this, just install this in your head


    Code:
    <script type="text/javascript">
    function changeimage(towhat,url){
    if (document.images){
    document.images.targetimage.src=towhat.src
    gotolink=url
    }
    }
    function warp(){
    window.location=gotolink
    }
    
    
    var myimages=new Array()
    var gotolink="#"
    
    function preloadimages(){
    for (i=0;i<preloadimages.arguments.length;i++){
    myimages[i]=new Image()
    myimages[i].src=preloadimages.arguments[i]
    }
    }
    
    
    preloadimages("../gfx/sub/mendenhallbig/2561297-2.jpg","../gfx/sub/mendenhallbig/2561297-3.jpg","../gfx/sub/mendenhallbig/2561297-4.jpg","../gfx/sub/mendenhallbig/2561297-5.jpg","../gfx/sub/mendenhallbig/2561297-6.jpg","../gfx/sub/mendenhallbig/2561297-7.jpg","../gfx/sub/mendenhallbig/2561297-8.jpg","../gfx/sub/mendenhallbig/2561297-9.jpg","../gfx/sub/mendenhallbig/2561297-10.jpg")
    </script>
    all of those preload images will be your main images

    then we can move on to the html

    Code:
    <div class="housePreview">
        		<a href="javascript:warp()" > <img src="gfx/sub/2561297-1.jpg" alt="mendenhall" border="0" name="targetimage" /></a>   		  </div>
    
    this is where you would put the link for the big picture, so when they roll over a thumbnail it appears here
    now we will make the thumbnails

    Code:
    <div class="smallHouses">
        		
                
                <ul>
                	<li><a href="#" onmouseover="changeimage(myimages[8],this.href)"><img src="/gfx/sub/preview_pics/1.jpg" alt="1" /></a></li>
                    <li><a href="#" onmouseover="changeimage(myimages[7],this.href)"><img src="/gfx/sub/preview_pics/2.jpg" alt="1" /></a></li>
                    <li><a href="#" onmouseover="changeimage(myimages[6],this.href)"><img src="/gfx/sub/preview_pics/3.jpg" alt="1" /></a></li>
                    <li><a href="#" onmouseover="changeimage(myimages[5],this.href)"><img src="/gfx/sub/preview_pics/4.jpg" alt="1" /></a></li>
                </ul>
                
                <ul>
                	<li><a href="#" onmouseover="changeimage(myimages[4],this.href)"><img src="/gfx/sub/preview_pics/5.jpg" alt="1" /></a></li>
                    <li><a href="#" onmouseover="changeimage(myimages[3],this.href)"><img src="/gfx/sub/preview_pics/6.jpg" alt="1" /></a></li>
                    <li><a href="#" onmouseover="changeimage(myimages[2],this.href)"><img src="/gfx/sub/preview_pics/7.jpg" alt="1" /></a></li>
                    <li><a href="#" onmouseover="changeimage(myimages[1],this.href)"><img src="/gfx/sub/preview_pics/8.jpg" alt="1" /></a></li>
                </ul>
                
                <ul>
                	<li><a href="#" onmouseover="changeimage(myimages[0],this.href)"><img src="/gfx/sub/preview_pics/9.jpg" alt="1" /></a></li>
                  
                </ul>
                
                
        		</div>
    so now you can see the on mouseover handler, which will send it to the link where the big picture is, and of course you can add php if need be and make your own style for the css.

    Let me know if you have any questions, this can be confusing.. especially me!!!

  • #7
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    check bonrouge.com and cssplay.co.uk ?

  • #8
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi jcdevelopement,

    Thanks for you help, i've used something similar to what you suggested and have tweaked it to fit my needs.

    Thanks
    Mark


    Quote Originally Posted by jcdevelopment View Post
    well, here is a javascript easy way to do this, just install this in your head


    Code:
    <script type="text/javascript">
    function changeimage(towhat,url){
    if (document.images){
    document.images.targetimage.src=towhat.src
    gotolink=url
    }
    }
    function warp(){
    window.location=gotolink
    }
    
    
    var myimages=new Array()
    var gotolink="#"
    
    function preloadimages(){
    for (i=0;i<preloadimages.arguments.length;i++){
    myimages[i]=new Image()
    myimages[i].src=preloadimages.arguments[i]
    }
    }
    
    
    preloadimages("../gfx/sub/mendenhallbig/2561297-2.jpg","../gfx/sub/mendenhallbig/2561297-3.jpg","../gfx/sub/mendenhallbig/2561297-4.jpg","../gfx/sub/mendenhallbig/2561297-5.jpg","../gfx/sub/mendenhallbig/2561297-6.jpg","../gfx/sub/mendenhallbig/2561297-7.jpg","../gfx/sub/mendenhallbig/2561297-8.jpg","../gfx/sub/mendenhallbig/2561297-9.jpg","../gfx/sub/mendenhallbig/2561297-10.jpg")
    </script>
    all of those preload images will be your main images

    then we can move on to the html

    Code:
    <div class="housePreview">
        		<a href="javascript:warp()" > <img src="gfx/sub/2561297-1.jpg" alt="mendenhall" border="0" name="targetimage" /></a>   		  </div>
    
    this is where you would put the link for the big picture, so when they roll over a thumbnail it appears here
    now we will make the thumbnails

    Code:
    <div class="smallHouses">
        		
                
                <ul>
                	<li><a href="#" onmouseover="changeimage(myimages[8],this.href)"><img src="/gfx/sub/preview_pics/1.jpg" alt="1" /></a></li>
                    <li><a href="#" onmouseover="changeimage(myimages[7],this.href)"><img src="/gfx/sub/preview_pics/2.jpg" alt="1" /></a></li>
                    <li><a href="#" onmouseover="changeimage(myimages[6],this.href)"><img src="/gfx/sub/preview_pics/3.jpg" alt="1" /></a></li>
                    <li><a href="#" onmouseover="changeimage(myimages[5],this.href)"><img src="/gfx/sub/preview_pics/4.jpg" alt="1" /></a></li>
                </ul>
                
                <ul>
                	<li><a href="#" onmouseover="changeimage(myimages[4],this.href)"><img src="/gfx/sub/preview_pics/5.jpg" alt="1" /></a></li>
                    <li><a href="#" onmouseover="changeimage(myimages[3],this.href)"><img src="/gfx/sub/preview_pics/6.jpg" alt="1" /></a></li>
                    <li><a href="#" onmouseover="changeimage(myimages[2],this.href)"><img src="/gfx/sub/preview_pics/7.jpg" alt="1" /></a></li>
                    <li><a href="#" onmouseover="changeimage(myimages[1],this.href)"><img src="/gfx/sub/preview_pics/8.jpg" alt="1" /></a></li>
                </ul>
                
                <ul>
                	<li><a href="#" onmouseover="changeimage(myimages[0],this.href)"><img src="/gfx/sub/preview_pics/9.jpg" alt="1" /></a></li>
                  
                </ul>
                
                
        		</div>
    so now you can see the on mouseover handler, which will send it to the link where the big picture is, and of course you can add php if need be and make your own style for the css.

    Let me know if you have any questions, this can be confusing.. especially me!!!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •