Forum Home
Press F1
 
Thread ID: 102632 2009-08-26 08:26:00 "Overlay" html code for displaying products Chilling_Silence (9) Press F1
Post ID Timestamp Content User
804527 2009-08-26 08:26:00 Hi all,

I'm looking for some code that I can use for when a person clicks on an image of a product that it'll kind of "fade out" the background with a fly-out, kind of similar to how PF1 does with images. I want to not only be able to have a picture, but additional text, so I can display additional "product" information.

Any ideas if there's some kind of open-source / free web-plugin I can use? The website's already been put together in basic HTML / PHP, but this client has now requested something along the lines of the above, to compliment the existing product list which is mostly just pictures and the name of a product.

Thoughts / comments / suggestions / recommendations all appreciated :)

Thanks


Chill. 		Chilling_Silence (9)
804528 2009-08-26 08:49:00 www.huddletogether.com

Is that what you're after?

I've used it with Joomla before and its great. 		Blam (54)
804529 2009-08-26 09:17:00 I use this, it doesnt fade out but im sure theres css to add to it to make it do that

HTML

<a class="thumbnail" href="#thumb"><img src="images/ahoythere01.jpg" width="150px" height="94px" border="0" /><span><img src="images/ahoythere01.jpg" width="200" height="150" /><img src="images/ahoythere02.jpg" width="200" height="150" /><img src="images/ahoythere03.jpg" width="200" height="150" /><br /></span></a>

CSS

.thumbnail {
position:relative;
z-index:0;
}

.thumbnail:hover {
background-color:transparent;
z-index:50;
}

.thumbnail span {
position:absolute;
background-color:#aeaeae;
left:auto;
right:auto;
border:1px solid #000;
visibility:hidden;
color:#000;
text-decoration:none;
padding:5px;
}

.thumbnail span img {
border-width:0;
padding:2px;
}

.thumbnail:hover span {
visibility:visible;
top:0;
left:60px;
}

id imagine that the

.thumbnail:hover {
background-color:transparent;
z-index:50;
}

would control what the background would do, if you wanted it to fade then youd be looking for a javascript script 		hueybot3000 (3646)
804530 2009-08-26 10:42:00 Yeah like lightbox2 but not just images, ideally I want it to do plaintext also so I dont have to convert a whole lotta text to a picture each time...

Thanks mate, I'll try that code and see how I go later on :) 		Chilling_Silence (9)
804531 2009-08-31 05:21:00 Just a quick update, we've gone with Lightbox and are using the Caption field for product information. It allows a surprisingly large amount of code to be put in there :D

It's lookin *very* cool... Thanks guys! 		Chilling_Silence (9)
804532 2009-08-31 05:33:00 show us! hueybot3000 (3646)
804533 2009-08-31 05:46:00 Haha, the site isn't finished, but I'll flick through a link shortly... I've only got it on one page at the moment with two products to demonstrate to the site-owner first, prior to changing the lot ;)

Worst part is waiting for the client to then get back to you with the final "content" to be placed on the website, so it looks half-completed, when really you've done your part as the web-dev :-/ 		Chilling_Silence (9)
804534 2009-08-31 06:53:00 Mmmm yea...lightbox+Any CMS=:drool Blam (54)
1