hover box gallery

[acrikey]

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]

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]

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]

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]

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]

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]

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]

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]

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]

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

[acrikey]

Shrunk images in fireworks to 300px x 250px

[acrikey]

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

Works in mine?

[welshstew]

see the attached for what I get

Stew

[acrikey]

Ok I see it and am pondering, any suggestions?

[Lchad]

Is your z-index set at 1?

[matelot]

Hi, acrikey. Had a look at your site and the download times are diabolical. You haven't shrunk some of the pictures filesize-wise i.e. some are straight off the camera at over 2mb EACH, and some reported corruption errors.

If you want a good hover graphics gallery, go here: http://sonspring.com/journal/hoverbox-image-gallery and look at the example, then download it.

In essence, say you want your main pic at 200 x 150: edit it to that size so that it's only a few kb in size. You are only going to use one image per frame. That one image is previewed at - say - half that size using CSS to scale. Simple.

Here's the meat of the CSS (you'll see the rest in the downloaded .zip):

/* =Hoverbox Code
----------------------------------------------------------------------*/

.hoverbox
{
cursor: default;
list-style: none;
}

.hoverbox a
{
cursor: default;
}

.hoverbox a .preview
{
display: none; /* no preview until hover state - or it would be there all the time */
}

.hoverbox a:hover .preview
{
display: block;
position: absolute; /* this is therefore relative to the LI - not the page itself */
top: -33px; /* 0 lines the top of the preview image with the very top of the frame */
left: -45px; /* 0 lines the left edge of the preview to the extreme left of the frame */
z-index: 1; /* right or bottom could equally have been used */
}

.hoverbox img /* scaled version */
{
background: #fff;
border-color: #aaa #ccc #ddd #bbb; /* border around the 'thumbnail' */
border-style: solid;
border-width: 1px;
color: inherit;
padding: 2px; /* amount of background to reveal around the 'thumbnail' */
vertical-align: top;
width: 100px;
height: 75px;
}

.hoverbox li
{
background: #eee; /* main border effect caused by padding */
border-color: #ddd #bbb #aaa #ccc;/* the outside border of each frame */
border-style: solid;
border-width: 1px;
color: inherit;
display: inline;
float: left;
margin: 3px;/* the spacing between each frame */
padding: 5px; /* the thickness of each frame revealing the background */
position: relative;
}

.hoverbox .preview /* image at normal size when hovered */
{
border-color: #000; /* border around large image when hovered */
width: 200px;
height: 150px;
}

I'd thoroughly recommend it - it's amazing what can be achieved with CSS.

Hope that helps.

Oh, and some HTML:

<ul class="hoverbox">
<li>
<a href="#"><img src="img/photo01.jpg" alt="description" /><img src="img/photo01.jpg" alt="description" class="preview" /></a>
</li>

[acrikey]

Ok, this is frustrating me, I have managed to get the hoverbox back on top in firefox but in IE still loosing.
Any help or advice would be very very very appreciated.

My CSS code is http://www.lightex.co.uk/sarah/CSS/hoverbox.css
if anyone needs to see it

HELP!

[Lchad]

Do you have a separate stylesheet for the IE.css?