Attribute Image in Lightbox?

[yosandra]

I have some products that uses a small image as cart attribute. http://negre.es/tienda/iluminacion/lamparas-de-suspension/flowerpot-pendant-vp1-
How can it be displayed as lightbox? Like the product images are being displayed. When click in the small image it opens the lightbox.

Thanks in advance,
Kind Regards,

[Maxim Pishnyak]

I'm not sure that large version of these small images IS accessible and you? Could you provide a link to at least one large picture for any of those cart attributes?

[yosandra]

Hi,
I had an override class for the image that was 60px width and height.
Now the class is deleted but I don't really know how it works, where it takes the width and height from and how to make them smaller and when click to display a lightbox like the product images. link-> http://negre.es/tienda/iluminacion/lamparas-de-suspension/flowerpot-pendant-vp1-
I need help to configure this please.
I'm using latest vm version and joomla 2.5.
Thanks,

Kind Regards,

[Maxim Pishnyak]

other-customfield img{
width:60px;
}
other-customfield img:hover {
width:130px;
}

[yosandra]

other-customfield img{
width:60px;
}
other-customfield img:hover {
width:130px;
}

Hi Maxim,
Now when hover the image gets bigger!
Is it possible a lightbox when click? It seems my image attribute design needs some fix, the check input breaks the box.
Appreciated the help!
Kind Regards,

[Maxim Pishnyak]

Is it possible a lightbox when click?

It still necessary for this to have under view for further analyzing code for displaying attribute images (part 1) and for lightbox (part 2) (i.e. fancybox for additional images).
When you'll find these peaces from standard VM productdetails views, post it here then. Maybe it's possible somehow to combine code 1 and code 2.

It seems my image attribute design needs some fix, the check input breaks the box.

Could you illustrate your issue with an arrow on your screen shot?

[yosandra]

Hello Maxim,

the code I have to display images in product details is the following:

Code Select Expand

<div class="productDetails">

               <div class="width36 floatleft">
<?php if (!empty($this->product->images)) {
$image = $this->product->images[0];
?>
<div class="main-image">

<?php
echo $image->displayMediaFull("",true,"rel='vm-additional-images'");
?>

<?php /*?><div class="product-overlay"><span><span><?php echo JText::_('TPL_GK_LANG_VM_ZOOM'); ?></span></span></div><?php */?>
<div class="clear"></div>
</div>
<?php
$count_images = count ($this->product->images);
if ($count_images > 1) {
?>
    <div class="additional-images">
<?php
for ($i = 1; $i < $count_images; $i++) {
$image = $this->product->images[$i];
?>
            <div class="floatleft">
            <?php
                echo $image->displayMediaFull("",true,"rel='vm-additional-images'");
            ?>
            </div>
<?php
}
?>
        <div class="clear"></div>
    </div>

The css for the class additional-images I found is:

Code Select Expand

.additional-images {
margin: 20px 0;
overflow: hidden;

width:100;
}

.additional-images .product-thumb {
border: 1px solid #eee;
float: left;
line-height: 1.4;
margin: 0 6px 6px 0;
padding: 3px;
text-align: center;
white-space: normal;
width: 74px
}

.additional-images .product-thumb:hover {
border-color: #ddd;
cursor: pointer
}

.additional-images img {
width: 50px
}


For the image attribute style, it seems the select input radio is outside the box label.other-customfield. Can it be inside the box? Don't really know where to change this or where this code is. Attach image to the post.

Help appreciated!

Kind Regards,

[attachment cleanup by admin]

[yosandra]

I think the lightbox property is not currently applied to this kind of images. How can I apply it to them?
The other images display as a lightbox also the small ones, why these not?
Help!Because this is a feature very important for me.

Kind Regards,

[Maxim Pishnyak]

It still necessary for this to have under view for further analyzing code for displaying attribute images (part 1)

Any success with finding part 1?

[yosandra]

Hi,
I didn't find the code. How can this small attribute pics be lightbox like the product images?