websiteguy Posted January 19, 2008 Share Posted January 19, 2008 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!! Quote Link to comment https://forums.phpfreaks.com/topic/86791-thumbnail-viewer-made-of-css-only/ Share on other sites More sharing options...
websiteguy Posted January 19, 2008 Author Share Posted January 19, 2008 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 Quote Link to comment https://forums.phpfreaks.com/topic/86791-thumbnail-viewer-made-of-css-only/#findComment-443604 Share on other sites More sharing options...
ober Posted January 19, 2008 Share Posted January 19, 2008 I'm about 98% sure you're going to need JS to do this. Quote Link to comment https://forums.phpfreaks.com/topic/86791-thumbnail-viewer-made-of-css-only/#findComment-443659 Share on other sites More sharing options...
bronzemonkey Posted January 20, 2008 Share Posted January 20, 2008 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. Quote Link to comment https://forums.phpfreaks.com/topic/86791-thumbnail-viewer-made-of-css-only/#findComment-444006 Share on other sites More sharing options...
dbrimlow Posted January 20, 2008 Share Posted January 20, 2008 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. Quote Link to comment https://forums.phpfreaks.com/topic/86791-thumbnail-viewer-made-of-css-only/#findComment-444509 Share on other sites More sharing options...
bronzemonkey Posted January 20, 2008 Share Posted January 20, 2008 By using the :active pseudo element you can get it to show a larger version when you click on the thumbnail. Quote Link to comment https://forums.phpfreaks.com/topic/86791-thumbnail-viewer-made-of-css-only/#findComment-444568 Share on other sites More sharing options...
Dysan Posted January 20, 2008 Share Posted January 20, 2008 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. Quote Link to comment https://forums.phpfreaks.com/topic/86791-thumbnail-viewer-made-of-css-only/#findComment-444574 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.