News:

Looking for documentation? Take a look on our wiki

Main Menu

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

Started by 1Jumpman, September 01, 2012, 18:48:16 PM

Previous topic - Next topic

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

<?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"'truetrue) . '</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"'truetrue) . ''//'class="modal"'
      
echo '<span>' $image->displayMediaFull('class="product-image"'false'class="modal"'truetrue) . '</span></a></div>';
      
       }
   }
   
?>

easy and simple

Effect:
http://autopokrowce.fastlan.pl/index.php/pl/alfa-romeo2/alfa-romeo-mito-hatchback-model-od-08-detail