PDA

View Full Version : "Overlay" html code for displaying products



Chilling_Silence
26-08-2009, 08:26 PM
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.

Blam
26-08-2009, 08:49 PM
http://www.huddletogether.com/projects/lightbox2/

Is that what you're after?

I've used it with Joomla before and its great.

hueybot3000
26-08-2009, 09:17 PM
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

Chilling_Silence
26-08-2009, 10:42 PM
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
31-08-2009, 05:21 PM
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!

hueybot3000
31-08-2009, 05:33 PM
show us!

Chilling_Silence
31-08-2009, 05:46 PM
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 :-/

Blam
31-08-2009, 06:53 PM
Mmmm yea...lightbox+Any CMS=:drool