...

View Full Version : CSS Gallery working in Firefox but not IE



singy
02-20-2008, 07:08 PM
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/Pets4Homes/home.nsf/LookupMULTI/FF84891F8BD5D302802573F40073FF6E

Many Thanks
Mark :D

jcdevelopment
02-21-2008, 03:46 AM
i couldnt tell because i didnt know what the class or id was, but is it floating left and clearing left?

singy
02-21-2008, 11:32 AM
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 :



#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 :



<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>

Actinia
02-21-2008, 12:59 PM
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

singy
02-21-2008, 01:21 PM
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

jcdevelopment
02-21-2008, 04:00 PM
well, here is a javascript easy way to do this, just install this in your head



<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



<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



<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!!!

jlhaslip
02-22-2008, 05:53 AM
check bonrouge.com and cssplay.co.uk ?

singy
02-23-2008, 09:11 PM
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



well, here is a javascript easy way to do this, just install this in your head



<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



<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



<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!!!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum