SOLVED: Thumbnails with "tooltip" in product detail page - CSS

[1Jumpman]

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

Code Select Expand

<?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

Code Select Expand

<?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

[Tommi]

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...