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 (http://forum.virtuemart.net/index.php?topic=97365.msg322269#msg322269) but it shows fancybox, and fancybox doesn't have the navigation I wanted.
(http://i.imgur.com/h8vPT.gif)
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?
(http://i.imgur.com/l70wy.gif)
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.
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:
echo $product->images[0]->displayMediaThumb('class="browseProductImage" border="0" title="'.$product->product_name.'" ',true,'class="modal"');
to:
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));
Quote from: hifut on May 24, 2012, 22:37:52 PM
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:
echo $product->images[0]->displayMediaThumb('class="browseProductImage" border="0" title="'.$product->product_name.'" ',true,'class="modal"');
to:
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:
echo JHTML::link($product->link,
$product->images[0]->displayMediaThumb('class="browseProductImage" border="0"',false));
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:
// 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:
// 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.
it works, but main image - show twice, someone fix this ?
Quote from: gryphan on November 08, 2012, 21:15:18 PM
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]);
in a detail page it work - but in lightbox i have a main picture twice :(
Quote from: gryphan on November 10, 2012, 17:05:41 PM
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
Quote from: gryphan on November 10, 2012, 17:14:24 PM
Quote from: gryphan on November 10, 2012, 17:05:41 PM
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 ?
do u mind sharing the url ?
[/quote]
http://technomobi.com.ua/tel/mobile/nokia-asha-200-pink-detail
Hi from what I saw its working fine! Not sure what you wanna change.
Quote from: gryphan on November 17, 2012, 16:49:03 PM
do u mind sharing the url ?
http://technomobi.com.ua/tel/mobile/nokia-asha-200-pink-detail
[/quote]
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
[/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 :
// 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 ?>