hover box gallery

acrikey · #1 (**permalink**) Jul 13th, 2007, 10: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 (**permalink**) Jul 13th, 2007, 10: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 (**permalink**) Jul 13th, 2007, 11: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 (**permalink**) Jul 13th, 2007, 12: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 (**permalink**) Jul 13th, 2007, 12: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 (**permalink**) Jul 13th, 2007, 13: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 (**permalink**) Jul 13th, 2007, 13: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 (**permalink**) Jul 13th, 2007, 14: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 (**permalink**) Jul 13th, 2007, 14: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 (**permalink**) Jul 13th, 2007, 14:17

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

acrikey · #11 (**permalink**) Jul 13th, 2007, 16:47

Shrunk images in fireworks to 300px x 250px

acrikey · #12 (**permalink**) Jul 13th, 2007, 16:50

Quote:

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

Works in mine?

welshstew · #13 (**permalink**) Jul 13th, 2007, 19:19

see the attached for what I get

Stew

acrikey · #14 (**permalink**) Jul 13th, 2007, 22:02

Ok I see it and am pondering, any suggestions?

Lchad · #15 (**permalink**) Jul 14th, 2007, 00:37

Is your z-index set at 1?

matelot · #16 (**permalink**) Jul 15th, 2007, 10:31

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

Quote:

/* =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:

Quote:

acrikey · #17 (**permalink**) Jul 19th, 2007, 12:28

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 · #18 (**permalink**) Jul 19th, 2007, 13:23

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

acrikey · #19 (**permalink**) Jul 19th, 2007, 13:30

yes http://www.lightex.co.uk/sarah/CSS/ie_fixes.css

Lchad · #20 (**permalink**) Jul 19th, 2007, 15:17

the ie.css is right.
On the hoverbox.css I usually delete the entire portion of NON-essential code. It usually messes up my css that I've already put in.

I need to see a link to see what it's doing..

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
CSS li hover.	PicoDeath	Web Page Design	9	Dec 19th, 2007 14:26
Created Flash Photo Gallery in PhotoShop. How can I put this Gallery INSIDE a page??	BlackReef	Flash & Multimedia Forum	3	Dec 13th, 2007 18:30
css hover	alexgeek	Web Page Design	9	Aug 2nd, 2007 18:18
hii Help with hover	hawashp	Starting Out	1	May 13th, 2007 16:35

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