[solved] Virtuemart Lightbox Image Navigations Option

[rzrz]

Details:

Joomla v2.5.4
Virtuemart 2.0.6


1) On the "View More Images" it is missing the navigation arrows and also the details.

For (2) I tried this link but it shows fancybox, and fancybox doesn't have the navigation I wanted.






2)On the Category page it doesn't link to the product page as per demo site but it pops up a lightbox image. How can I link it directly to the product page?

[hifut]

What He Said.
Lightbox is also not showing an 'X' in the top right corner.
The lightbox does work OK other than this.
-
VirtueMart 2.0.6 Final Revision: 5917 [silver]
April 15, 2012 17:30 GMT
-
Joomla! 2.5.4 Stable [ Ember ] 2-April-2012 14:00 GMT
-
No javascript conflicts.
Using GavickPro Boutique Template.

[hifut]

In answer to number 2) above, to link from the category page item into the item's detail page by clicking on the image, change the following in /yourtemplate/html/com_virtuemart/category/default.php

Line 208

from:

Code Select Expand


echo $product->images[0]->displayMediaThumb('class="browseProductImage" border="0" title="'.$product->product_name.'" ',true,'class="modal"');


to:

Code Select Expand


echo JHTML::_('link', JRoute::_('index.php?option=com_virtuemart&view=productdetails virtuemart_product_id='.$product->virtuemart_product_id.'&virtuemart_category_id='.$product->virtuemart_category_id),$product->images[0]->displayMediaThumb('class="browseProductImage" border="0"',false));


[rzrz]

In answer to number 2) above, to link from the category page item into the item's detail page by clicking on the image, change the following in /yourtemplate/html/com_virtuemart/category/default.php

Line 208

from:

Code Select Expand


echo $product->images[0]->displayMediaThumb('class="browseProductImage" border="0" title="'.$product->product_name.'" ',true,'class="modal"');


to:

Code Select Expand


echo JHTML::_('link', JRoute::_('index.php?option=com_virtuemart&view=productdetails virtuemart_product_id='.$product->virtuemart_product_id.'&virtuemart_category_id='.$product->virtuemart_category_id),$product->images[0]->displayMediaThumb('class="browseProductImage" border="0"',false));


Hi i tried this but it doesnt work, the link generated doesn't link to anything..

However I figured that this one works:

Code Select Expand

echo JHTML::link($product->link,

$product->images[0]->displayMediaThumb('class="browseProductImage" border="0"',false));

[sagaranvekar]

Hi,
I have Joomla 2.5 and VM 2.0.10.
Successfully added "next" - "prev" buttons to the product images.
I used this method:
in /components/com_virtuemart/views/productdetails/tmpl/default_images.php

You Have:

Code Select Expand


// Product Main Image
if (!empty($this->product->images[0])) {
    ?>
    <div class="main-image">
<?php echo $this->product->images[0]->displayMediaThumb('class="medium-image" id="medium-image"', true, "class='modal'", true); ?>
    </div>
<?php } // Product Main Image END ?>
<div class="zoominimg"><a href="<?php echo $this->product->images[0]->file_url; ?>" class="modal">View Full-Size Image</a></div>
<?php
// Showing The Additional Images
// if(!empty($this->product->images) && count($this->product->images)>1) {
if (!empty($this->product->images) and count ($this->product->images)>1) {
    ?>
    <div class="additional-images">
<?php
// List all Images
if (count($this->product->images) > 0) {
$imgcnt=1;
$widthinpercent = 100/ (count($this->product->images)-1);
    foreach ($this->product->images as $image) {
if($imgcnt!=1){
echo '<div class="floatleft width'.$widthinpercent.'">' . $image->displayMediaThumb('class="product-image"', true, 'class="modal"', true, false) . '</div>'; //'class="modal"'
}
$imgcnt++;
    }
}
?>
        <div class="clear"></div>
    </div>
<?php
} // Showing The Additional Images END ?>


Replace it with:

Code Select Expand


// Product Main Image

if (!empty($this->product->images[0])) {

    ?>

    <div class="main-image">
<?php
//Enable FancyBox
$path = JURI::root(true).'/components/com_virtuemart/assets/';
$document = JFactory::getDocument();
$document->addStyleSheet($path.'js/fancybox/jquery.fancybox-1.3.4.css');
$document->addScript($path.'js/fancybox/jquery.fancybox-1.3.4.pack.js');
$js = 'jQuery(document).ready(function($) { $("a.gallery").fancybox(); });';
$document->addScriptDeclaration($js);
//show thumbnail
echo $this->product->images[0]->displayMediaThumb('class="product-image"',true,'class="gallery" rel="'.$this->product->virtuemart_product_id.'"',true,true);

?>
    </div>

<?php } // Product Main Image END ?>

<div class="zoominimg"><a href="<?php echo $this->product->images[0]->file_url; ?>" class="gallery" rel="<?php echo $this->product->virtuemart_product_id?>">View Full-Size Image</a></div>
<?php 
             //unset first image not to be shown in additional ones
             unset ($this->product->images[0]);
        ?>
<?php

// Showing The Additional Images

// if(!empty($this->product->images) && count($this->product->images)>1) {

if (!empty($this->product->images) and count ($this->product->images)>0) {

    ?>

    <div class="additional-images">

<?php

// List all Images

if (count($this->product->images) > 0) { //initially it was 1 instead of 0

$imgcnt=1;

$widthinpercent = 100/ (count($this->product->images)); // remove -1

    foreach ($this->product->images as $image) {

if($imgcnt!=0){ //initially it was 1 instead of 0

echo '<div class="floatleft width'.$widthinpercent.'">'.$image->displayMediaThumb('class="product-image"',true,'class="gallery" rel="'.$this->product->virtuemart_product_id.'"',true,false).'</div>';

}

$imgcnt++;

    }

}

?>

        <div class="clear"></div>

    </div>

<?php

} // Showing The Additional Images END ?>


This uses class gallery instead of modal. Class gallery uses fancybox, and you can have image navigation using fancybox.
Hope this post solves your problem.

[gryphan]

it works, but main image - show twice, someone fix this ?

[rzrz]

it works, but main image - show twice, someone fix this ?

u need to use this code:


//unset first image not to be show among additional ones - but currently only working on uploaded images of more than 2
unset ($this->product->images[0]);

[gryphan]

in a detail page it work - but in lightbox i have a main picture twice

[gryphan]

in a detail page it work - but in lightbox i have a main picture twice

Yes, on the product page it works, but in the lightbox still shows the main picture twice

[rzrz]

in a detail page it work - but in lightbox i have a main picture twice

Yes, on the product page it works, but in the lightbox still shows the main picture twice

do u mind sharing the url ?

[gryphan]

do u mind sharing the url ?
[/quote]

http://technomobi.com.ua/tel/mobile/nokia-asha-200-pink-detail

[rzrz]

Hi from what I saw its working fine! Not sure what you wanna change.

do u mind sharing the url ?

http://technomobi.com.ua/tel/mobile/nokia-asha-200-pink-detail
[/quote]

[gryphan]

I just deleted the code for mainimage

// Product Main Image
if (!empty($this->product->images[0])) {
    ?>
    <div class="main-image">
   <?php echo $this->product->images[0]->displayMediaFull('class="medium-image" id="medium-image"', false, "class='modal'", true); ?>
    </div>
<?php } // Product Main Image END ?>


and put in the code secondary images directly into a layer for mainimage

[sagaranvekar]

[/code]For those, who have first image twice in lightbox, please modify my original post:
Move unset ($this->product->images[0]); line just after
echo $this->product->images[0]->displayMediaThumb('class="product-image"',true,'class="gallery" rel="'.$this->product->virtuemart_product_id.'"',true,true);
So the code will be :

Code Select Expand


// Product Main Image

if (!empty($this->product->images[0])) {

    ?>

    <div class="main-image">
   <?php
         //Enable FancyBox
         $path = JURI::root(true).'/components/com_virtuemart/assets/';
         $document = JFactory::getDocument();
         $document->addStyleSheet($path.'js/fancybox/jquery.fancybox-1.3.4.css');
         $document->addScript($path.'js/fancybox/jquery.fancybox-1.3.4.pack.js');
         $js = 'jQuery(document).ready(function($) { $("a.gallery").fancybox(); });';
         $document->addScriptDeclaration($js);
         //show thumbnail
         echo $this->product->images[0]->displayMediaThumb('class="product-image"',true,'class="gallery" rel="'.$this->product->virtuemart_product_id.'"',true,true);         
         //unset first image not to be shown in additional ones
                        unset ($this->product->images[0]);   
         ?>
    </div>

<?php } // Product Main Image END ?>

   <div class="zoominimg"><a href="<?php echo $this->product->images[0]->file_url; ?>" class="gallery" rel="<?php echo $this->product->virtuemart_product_id?>">View Full-Size Image</a></div>

<?php

// Showing The Additional Images

// if(!empty($this->product->images) && count($this->product->images)>1) {

if (!empty($this->product->images) and count ($this->product->images)>0) {

    ?>

    <div class="additional-images">

   <?php

   // List all Images

   if (count($this->product->images) > 0) { //initially it was 1 instead of 0

      $imgcnt=1;

      $widthinpercent = 100/ (count($this->product->images)); // remove -1
      
       foreach ($this->product->images as $image) {

         if($imgcnt!=0){ //initially it was 1 instead of 0

         echo '<div class="floatleft width'.$widthinpercent.'">'.$image->displayMediaThumb('class="product-image"',true,'class="gallery" rel="'.$this->product->virtuemart_product_id.'"',true,false).'</div>';

         }

         $imgcnt++;

       }

   }

   ?>

        <div class="clear"></div>

    </div>

<?php

} // Showing The Additional Images END ?>