Are there any CSS product image contributions?

rustyclockwork · December 4, 2009

Hello,

I've been working on getting code to function correctly for a CSS gallery inside product description. I don't want any pop ups, or extra windows to the customers. What I have so far, is a set of thumbnails to the left side of the main image. But what I'm having problems with is the main image not being anchored correctly to the top "line" of the thumbnail column.

I'm almost there, but wanted to know if there are any contributions for extra images (pure CSS form) similar to what I'm trying to do.

My site is www.oldfoundry.com and select the bugatti product on the left to see the test gallery show up. The content is all non-related, it's just there to get the code working.

Any ideas or suggestions would be great, and I can post the code as well if anyone wants to see it.

Thank you,

Jason

jhande · December 4, 2009

Hey Jason,

I didn't see any images on that page.

Have you tried the CSS float attribute?

rustyclockwork · December 4, 2009

Hi there,

I have not tried that.

But I did change the code to a different type of gallery, this one seems to be much better.

The link is here: http://www.oldfoundry.com/catalog/product_info.php/bugatti-test-p-32

and the images are simply other directory images that I put in there just for tests. If you roll over those images, the larger versions will show up.

What I want to do now, is simply have the first thumbnail already being display, without having to have a mouse rollover it. That same image still displaying until another thumbnail is rolledover or clicked on.

You'll see what I mean when you see the page, the images are not visible until you rollover the thumbnails.

Thanks again,

Jason

rustyclockwork · December 4, 2009

You are right, the images are not working in Firefox, but are working in Safari.

This is the code for that page.

<body>
<p style="clear: both; padding-top: 2em;"><p style="text-align: justify">Testing description for use with the new image gallery code that is located in product description. The rich and famous of the 1920s and 30s coveted a Bugatti. Ettore Bugatti, the famously eccentric car designer and engineer, produced both extraordinary race cars and opulent limousines. For fun and future business Bugatti produced a half sized baby version of the 1928 Bugatti 35B racer. Originally finished in Baby Bugatti blue and produced in a series of 499, they now fetch terrifying sums at auctions when found. AM owns an original classic and has now issued a limited series of completely handmade reproductions of the original Baby Bugatti, with handmade aluminum coachwork and leather accoutrements.

<style type="text/css">

.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}

.thumbnail img{
border: 0px;
margin: 0 5px 5px 0;
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{
border: 0px;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
padding: 5px;
left: -1000px;
border: 0px;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 150px; /*position where enlarged image should offset horizontally */
z-index: 50;
}

</style>

<div class="gallerycontainer">

<a class="thumbnail"><img src="http://www.oldfoundry.com/catalog/images/machine_shop_services.gif" width="100px" height="57px" border="0" /><span><img src="http://www.oldfoundry.com/catalog/images/machine_shop_services.gif"></span>

<br />

<a class="thumbnail"><img src="http://www.oldfoundry.com/catalog/images/model_making_services.gif" width="100px" height="57px" border="0" /><span><img src="http://www.oldfoundry.com/catalog/images/model_making_services.gif"></span>

<br />

<a class="thumbnail"><img src="http://www.oldfoundry.com/catalog/images/restoration_repair_services.gif" width="100px" height="57px" border="0" /><span><img src="http://www.oldfoundry.com/catalog/images/restoration_repair_services.gif"></span> 

<br />

<a class="thumbnail"><img src="http://www.oldfoundry.com/catalog/images/flying_machines.gif" width="100px" height="57px" border="0" /><span><img src="http://www.oldfoundry.com/catalog/images/flying_machines.gif"></span>

</div>

<p style="text-align: justify">Testing description for use with the new image gallery code that is located in product description. The rich and famous of the 1920s and 30s coveted a Bugatti. Ettore Bugatti, the famously eccentric car designer and engineer, produced both extraordinary race cars and opulent limousines. For fun and future business Bugatti produced a half sized baby version of the 1928 Bugatti 35B racer. Originally finished in Baby Bugatti blue and produced in a series of 499, they now fetch terrifying sums at auctions when found. AM owns an original classic and has now issued a limited series of completely handmade reproductions of the original Baby Bugatti, with handmade aluminum coachwork and leather accoutrements.</p>

jhande · December 4, 2009

I was using IE 7, just tried in Firefox, still no pictures other than "Machine Shop Services", "Model Making Services", etc...

Have you taken a look at the More Pics contribution?

I thought that does what you are looking for. ???

Xpajun · December 4, 2009

I notice that in Firefox the bottom description flashes on mouseover

rustyclockwork · December 5, 2009

Hi,

I think the more pics contribution uses an actual pop up window, and the whole reason why I'm trying this code out is so that it is all in the same window, and not using javascript. I think once I get the bugs worked out it will be really swell.

I hope I can get this working.

Jason

Are there any CSS product image contributions?

Recommended Posts

rustyclockwork

jhande

rustyclockwork

rustyclockwork

jhande

Xpajun

rustyclockwork

Archived

Browse

Activity