VirtueMart Forum

VirtueMart 2 + 3 => Templating & Layouts => Topic started by: samatt on January 05, 2012, 11:19:52 am

Title: VM2 and Fancybox 2
Post by: samatt on January 05, 2012, 11:19:52 am
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
Title: Re: VM2 and Fancybox 2
Post by: jenkinhill on January 05, 2012, 12:57:51 pm
Sounds like a JavaScript confict. Use the script debug in IE9 of Firebug in Firefox to identify this.
Title: Re: VM2 and Fancybox 2
Post by: samatt on January 06, 2012, 01:50:28 am
Thanks Jenkin, did some trial and error, and seems there's a conflict with vmprices.js and Fancybox 2.

Cheers Matt
Title: Re: VM2 and Fancybox 2
Post by: kaleske on January 24, 2012, 22:20:22 pm
Hello, is there any tutorial how to make fancybox working with virtuemart product details page?
Title: Re: VM2 and Fancybox 2
Post by: Gruz on February 09, 2012, 11:15:40 am
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:
(http://static.xscreenshot.com/2012/02/09/12/screen_bd1af545a0c77c0fa6fc29b094478878) (http://view.xscreenshot.com/bd1af545a0c77c0fa6fc29b094478878)


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]
Title: Re: VM2 and Fancybox 2
Post by: rupesh on April 06, 2012, 12:45:08 pm
gr88888888 one thank you very much!!!
Title: Re: VM2 and Fancybox 2
Post by: c0LIn on August 24, 2012, 13:04:49 pm
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 (http://s403070507.online.de/index.php/component/virtuemart/g60-g-lader-a-tuning/tuningteil/ansaugsystem-g-lader-89-mm-detail?Itemid=104)

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"'truetrue) . '</div>'//'class="modal"'
    }
}
?>

        <div class="clear"></div>
    </div>
<?php
// Showing The Additional Images END ?>

best regards
Title: Re: VM2 and Fancybox 2
Post by: Gruz on August 24, 2012, 13:52:15 pm
Did you try the link in my topic above?
http://forum.virtuemart.net/index.php?topic=97365.msg322269#msg322269 (http://forum.virtuemart.net/index.php?topic=97365.msg322269#msg322269)
Title: Re: VM2 and Fancybox 2
Post by: c0LIn on August 24, 2012, 14:19:36 pm
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
Title: Re: VM2 and Fancybox 2
Post by: Gruz on August 24, 2012, 14:22:39 pm
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.
Title: Re: VM2 and Fancybox 2
Post by: rmurrieta on August 30, 2012, 20:28:57 pm
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.

Title: Re: VM2 and Fancybox 2
Post by: otdushina on January 21, 2013, 13:40:39 pm
Tell me how to do this for VM 2.0.12. J 2.5.7 :'(
some images portrayed in one window at a time
Title: Re: VM2 and Fancybox 2
Post by: jenkinhill on January 21, 2013, 13:56:42 pm
Fancybox with view next facility is now standard in VM - upgrade to 2.0.18a