Thumbnail viewer made of CSS only?

[websiteguy]

I am trying to duplicate a image viewer for a client and am having a very difficult time of it. Not even sure this can be done without Javascript. It must be embedded inside of my index page, rather than creating a new gallery page.

 

The example I'm trying to duplicate can be seen here: http://tuscany-villa.luxuryvillasint...-29-1-1717.htm

 

What I have so far in my CSS is:

#slideshow {

background-color: #FFFFFF;

height: 289px;

width: 632px;

position: relative;

left: 0px;

top: 0px;

}

#scroll {

background-color: #CCCCCC;

float: left;

height: 289px;

width: 140px;

margin-left: 40px;

overflow: auto;

position: relative;

}

#bigimage {

background-color: #FFFFFF;

float: left;

height: 289px;

width: 452px;

position: relative;

background-image: url(images/house-back1-lg.jpg);

background-repeat: no-repeat;

}

 

What I want to make happen is to create a link in the .html for each thumbnail image to show its counterpart (larger image) in the #bigimage DIV.

 

So far all I have is the #scroll populated with the thumbnails and properly scrolling like the example, but can't make the larger image appear inside the DIV. (large images are already created in same images file)

 

Is this possible, or does anyone know of a script that exists to do this exactly? I've searched for a long time now to no avail!!

[websiteguy]

I see the example URL did not show correctly. I was unable to edit it so here it is again.

http://tuscany-villa.luxuryvillasintl.com/Content/Product-29-1-1717.htm

 

[ober]

I'm about 98% sure you're going to need JS to do this.

[bronzemonkey]

You can do this with only CSS. Obviously no one is going to write the code for you because knowing how to do this kind of thing is how some people make a living!

 

But Stu Nicholls at www.cssplay.co.uk has some examples on his website (under "demos") that you can adapt if you are prepared to leave his copyright buried in your css code.

[dbrimlow]

You can easily make it "similar" with css, but IT only uses a hover effect for the thumbnail to show the photo. It doesn't use on click, and the photo will switch back to the default viewable photo when the thumbnail is not hovered on.

 

It is done using absolute positioning and visibility for the large photo and hovers for the thumbnail.

 

But, without some very simple js, particular on click or on hover and show and hide, it will not act the same as you want it to.

[bronzemonkey]

By using the :active pseudo element you can get it to show a larger version when you click on the thumbnail.

[Dysan]

Check out the sites HTML source and CSS files!

All the information is there. Take your time to understand it, and you should be able to make the same in no time.