hover box gallery

acrikey · #1 Jul 13th, 2007, 11:32

I am using a hover box gallery, but the images take a while to load up

www.lightex.co.uk/sarah/gallery.html

If I size the images to the largest preview size,300px x 250px then they are shown quater size in the thumbnail and the preview boxes, but normal size and they take ages to load. Not too sure if I am explaining it well but the customer is not happy and I'm fresh out of ideas

welshstew · #2 Jul 13th, 2007, 11:59

You could try to preload the images using css - probably best to preload them on the home page , so that the gallery can use them later when needed

Not tried it myself, but it may speed up the page slightly

Lchad · #3 Jul 13th, 2007, 12:59

You really need two sets of photos. You can put them all in the same folder just as long as they have different names.
One is small 150 x 150 (guessing) and then have the full sized. Change your code to show the smaller one on opening of page and then hover over uses the full size.

I used this feature well on this site. Look at my code if you want. Here is one list item

Code: Select all

<li><a href ="Fabric_Berries/45lg.jpg"><img src="Fabric_Berries/45.jpg" alt="Hot Pink Dot Minky"><img src="Fabric_Berries/45lg.jpg" alt="Hot Pink Dot Minky" class="preview" /></a><p>Hot Pink Dot</p></li>

karinne · #4 Jul 13th, 2007, 13:15

Quote:

Originally Posted by Lchad

You really need two sets of photos.

Yep ... totally agree with this. You need a thumbnail version of the photo and the original. In your case ... you should have 3 photos for each: the really small thumbnail you show on the page, the medium sized thumbnail for the hover and the original one.

Lchad · #5 Jul 13th, 2007, 13:27

Ah......... yes so right Karinne.. The big one is what they get when they click on the hover photo!

My client really loves this feature. I can see me using it often.

acrikey · #6 Jul 13th, 2007, 14:41

Ok have done a few things now, have done the preload

Code: Select all

<style type="text/css">
.hiddenPic {display:none;}
</style>

<img src="images/image2/Cssie 1.jpg" 
    height="300" width="250" class="hiddenPic">

and done the smaller image

Code: Select all

<a href="#"><img src="images/Gallery/100_0211.JPG" alt="description" width="300" height="250" /><img src="images/100_0211.JPG" alt="description" class="preview" /></a></li>

and the result is this:

http://www.lightex.co.uk/sarah/gallery.html

karinne · #7 Jul 13th, 2007, 14:52

That doesn't work ... how did you shrink the pic?! The picture itself is small the the entire image is still the same size as the original?!

Lchad · #8 Jul 13th, 2007, 15:10

Code: Select all

<a href="#"><img src="images/Gallery/100_0211.JPG" alt="description" width="300" height="250" /><img src="images/100_0211.JPG" alt="description" class="preview" /></a></li>

You can't leave the # in the first bit of your code. You need an image there.

welshstew · #9 Jul 13th, 2007, 15:14

Apologies, I don't think I made myself clear. By using the css preload you are downloading the pics to the visitors cache when they hit the home page (i.e. before they hit the gallery page). Then when they are called for a second time, on the gallery itself, it should be faster to load. You therefore need to move this part of the code to your clients homepage. And then get them to click on the gallery.

I agree about the images, I don't know how you have shrunk those pics, but it looked better before, it just took to long to load.

welshstew · #10 Jul 13th, 2007, 15:17

I hate to be a pain, but in IE7 the larger image pops underneath the thumbs.....

acrikey · #11 Jul 13th, 2007, 17:47

Shrunk images in fireworks to 300px x 250px

acrikey · #12 Jul 13th, 2007, 17:50

Quote:

welshstew. I hate to be a pain, but in IE7 the larger image pops underneath the thumbs......

Works in mine?

welshstew · #13 Jul 13th, 2007, 20:19

see the attached for what I get

Stew

acrikey · #14 Jul 13th, 2007, 23:02

Ok I see it and am pondering, any suggestions?

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
hover box gallery