Make some css classes in the site template file:
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail img {
border: 3px solid #ccc;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: #ccc;
padding: 5px;
left: -1000px;
border: 1px dashed #1a84b6;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
width: 400px;
}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */
}
.product-image-medium { /*CSS for thumbnail size*/
width: 100px;
margin: 3px;
}
next, in product detail images template
components/com_virtuemart/views/productdetails/tmpl/default_images.php
replace this
<?php
// List all Images
if (count($this->product->images) > 0) {
foreach ($this->product->images as $image) {
echo '<div class="floatleft">' . $image->displayMediaThumb('class="product-image"', true, 'class="modal"', true, true) . '</div>'; //'class="modal"'
}
}
?>
to
<?php
// List all Images
if (count($this->product->images) > 0) {
foreach ($this->product->images as $image) {
echo '<div class="floatleft"><a class="thumbnail" href="#thumb">' . $image->displayMediaThumb('class="product-image-medium"', false, 'class="modal" href="#thumb"', true, true) . ''; //'class="modal"'
echo '<span>' . $image->displayMediaFull('class="product-image"', false, 'class="modal"', true, true) . '</span></a></div>';
}
}
?>
easy and simple
Effect:
http://autopokrowce.fastlan.pl/index.php/pl/alfa-romeo2/alfa-romeo-mito-hatchback-model-od-08-detail (http://autopokrowce.fastlan.pl/index.php/pl/alfa-romeo2/alfa-romeo-mito-hatchback-model-od-08-detail)
Hi,
I have same problem with height. Please, chceck: http://www.goraslovakia.sk/index.php?option=com_virtuemart&view=productdetails&virtuemart_product_id=35&virtuemart_category_id=35&Itemid=490#thumb
Thanks...