VM2 and Fancybox 2

[samatt]

Does anyone have Fancybox 2 (http://fancyapps.com/fancybox/) working with VM2, and have a link I could take a look at? I want to be able to display all images on a category page in a lightbox as a gallery with previous/next buttons, which I don't think I can do with Facebox?

Anyway, I can't get Fancybox 2 to fire up, just goes to the image in a new window. Pretty sure i've linked in the appropriate scripts correctly. Could this be a conflict with Facebox? and how would I go about stripping out Facebox so it doesn't initialize?

Thanks and congrats to the team for the VM2.0 stable release
Matt

[jenkinhill]

Sounds like a JavaScript confict. Use the script debug in IE9 of Firebug in Firefox to identify this.

[samatt]

Thanks Jenkin, did some trial and error, and seems there's a conflict with vmprices.js and Fancybox 2.

Cheers Matt

[kaleske]

Hello, is there any tutorial how to make fancybox working with virtuemart product details page?

[Gruz]

A more advanced solution is here: http://forum.virtuemart.net/index.php?topic=97365.msg322269#msg322269

=============================

Here is the solution.
VM 2.0.1.e
J 2.5.1

You must add some scripts to work and change in image class.

So copy
components/com_virtuemart/views/productdetails/tmpl/default.php
to
templates/YOURTEMPLATE/html/com_virtuemart/productdetails/default.php

Find place about line 146:

Code: [Select]

<?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"'
}
}

After line :

Code: [Select]

<?php // List all Imagesadd

Code: [Select]

/*##mygruz20120209120715 { Add FancyBox plugin:*/
$front = JURI::root(true).'/components/com_virtuemart/assets/';
$document = JFactory::getDocument();
$document->addStyleSheet($front.'js/fancybox/jquery.fancybox-1.3.4.css');
$document->addScript($front.'js/fancybox/jquery.fancybox-1.3.4.pack.js');
$js = 'jQuery(document).ready(function($) { $("a.gallery").fancybox(); });';
$document->addScriptDeclaration($js);
/*##mygruz20120209120715 } */line

Code: [Select]

echo '<div class="floatleft">'.$image->displayMediaThumb('class="product-image"',true,'class="modal"',true,true).'</div>'; //'class="modal"'replace with

Code: [Select]

/*##mygruz20120209120919 {
It was:
echo '<div class="floatleft">'.$image->displayMediaThumb('class="product-image"',true,'class="modal"',true,true).'</div>'; //'class="modal"'
It became:*/
echo '<div class="floatleft">'.$image->displayMediaThumb('class="product-image"',true,'class="gallery" rel="'.$this->product->virtuemart_product_id.'"',true,true).'</div>'; //'class="modal"'
/*##mygruz20120209120919 } */
Here is the result:



The fixed file is attached, must be unzipped and placed here: templates/YOURTEMPLATE/html/com_virtuemart/productdetails/default.php
But be carefull! VM is updated often now, so newer version may have some template fixes, which will bit not reflected in the file. So it's better to reapply the code to the latest components/com_virtuemart/views/productdetails/tmpl/default.php after the VM update. I mean till VM is activelty developed.

[attachment cleanup by admin]

[rupesh]

gr88888888 one thank you very much!!!

[c0LIn]

hi there

i tryed ur code and it works fine but only for the additional images.

is this possible for the main img ?

for example: click here

as u can see there is a product with 3 images .. if i click the main img it opens in a light-/fancybox and if i click the smaler ones they become the main img. So is there a way the get the navigation arrows for the light-/fancybox for the main img ?

here is my code

Code: [Select]

// Check to ensure this file is included in Joomla!
defined('_JEXEC') or die('Restricted access');

// Product Main Image?>
<script type="text/javascript">

jQuery(document).ready(function(){
    jQuery('.imgtoggle').click(function(){
        jQuery('.main-image a').attr({
            'href' : 'http://s403070507.online.de/images/stories/virtuemart/product/' + jQuery(this).attr('alt') + '.jpg'
        }).find('img').attr({
            'src': 'http://s403070507.online.de/images/stories/virtuemart/product/' + jQuery(this).attr('alt') + '.jpg'
        })
    })
})

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

<?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) {
    foreach ($this->product->images as $image) {
echo '<div class="floatleft">' . $image->displayMediaThumb('class="product-image imgtoggle"', false, 'class="modal"', true, true) . '</div>'; //'class="modal"'
    }
}
?>
        <div class="clear"></div>
    </div>
<?php
} // Showing The Additional Images END ?>
best regards

[Gruz]

Did you try the link in my topic above?
http://forum.virtuemart.net/index.php?topic=97365.msg322269#msg322269

[c0LIn]

yes i did.

and if i use your code all the images exept the additnial img open in a light-/fencybox.

what i want is that only the main image open in the lightbox... and if i click the additional images that they become the main one. <--- that is workin fine but without the arrows to navigate how can i add them ?

regards

[Gruz]

Add to divs with arrow images, place them with position absolute and add onClick event. In the onClick function you have to detemine current, previsous and next images, this can be a little tricky. But not very hard.

Sorry, I cannot provide a working code, I'm too busy now.

[rmurrieta]

Hi,
Thanks Gruz for the code, works like a charm.

Regarding the request to make the main image link to display the image gallery, I replaced the caller code from:
<?php //echo $this->product->images[0]->displayMediaFull('class="medium-image" id="medium-image"', true,'rel="shadowbox"',true,true); ?>

to

<?php echo $this->product->images[0]->displayMediaFull('class="medium-image" id="medium-image"',true,'class="gallery" rel="'.$this->product->virtuemart_product_id.'"',true,true); ?>

That displays the full image, but replaces the full image link with the gallery link.

[otdushina]

Tell me how to do this for VM 2.0.12. J 2.5.7
some images portrayed in one window at a time

[jenkinhill]

Fancybox with view next facility is now standard in VM - upgrade to 2.0.18a