Author Topic: VM2 and Fancybox 2  (Read 15245 times)

samatt

  • Beginner
  • *
  • Posts: 11
VM2 and Fancybox 2
« 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

jenkinhill

  • UK Web Developer & Consultant
  • Global Moderator
  • Super Hero
  • *
  • Posts: 27669
  • Always on vacation
    • Jenkin Hill Internet
Re: VM2 and Fancybox 2
« Reply #1 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.
Kelvyn

Jenkin Hill Internet,
Lowestoft, Suffolk, UK

Unsolicited PMs/emails will be ignored.

Please mention your VirtueMart, Joomla and PHP versions when asking a question in this forum

Currently using VM 3.6.11.10291 on Joomla 3.9.16 PHP 7.0.33

samatt

  • Beginner
  • *
  • Posts: 11
Re: VM2 and Fancybox 2
« Reply #2 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

kaleske

  • Beginner
  • *
  • Posts: 9
Re: VM2 and Fancybox 2
« Reply #3 on: January 24, 2012, 22:20:22 pm »
Hello, is there any tutorial how to make fancybox working with virtuemart product details page?

Gruz

  • 3rd party VirtueMart Developer
  • Jr. Member
  • *
  • Posts: 159
  • Copyleft (є) all rights reversed
Re: VM2 and Fancybox 2
« Reply #4 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:



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]
Your installable language for VM2: http://gruz.org.ua/virtuemart-language-files.html

rupesh

  • Jr. Member
  • **
  • Posts: 113
Re: VM2 and Fancybox 2
« Reply #5 on: April 06, 2012, 12:45:08 pm »
gr88888888 one thank you very much!!!

c0LIn

  • Beginner
  • *
  • Posts: 11
Re: VM2 and Fancybox 2
« Reply #6 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

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

Gruz

  • 3rd party VirtueMart Developer
  • Jr. Member
  • *
  • Posts: 159
  • Copyleft (є) all rights reversed
Re: VM2 and Fancybox 2
« Reply #7 on: August 24, 2012, 13:52:15 pm »
Your installable language for VM2: http://gruz.org.ua/virtuemart-language-files.html

c0LIn

  • Beginner
  • *
  • Posts: 11
Re: VM2 and Fancybox 2
« Reply #8 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

Gruz

  • 3rd party VirtueMart Developer
  • Jr. Member
  • *
  • Posts: 159
  • Copyleft (є) all rights reversed
Re: VM2 and Fancybox 2
« Reply #9 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.
Your installable language for VM2: http://gruz.org.ua/virtuemart-language-files.html

rmurrieta

  • Beginner
  • *
  • Posts: 7
Re: VM2 and Fancybox 2
« Reply #10 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.


otdushina

  • Beginner
  • *
  • Posts: 1
Re: VM2 and Fancybox 2
« Reply #11 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

jenkinhill

  • UK Web Developer & Consultant
  • Global Moderator
  • Super Hero
  • *
  • Posts: 27669
  • Always on vacation
    • Jenkin Hill Internet
Re: VM2 and Fancybox 2
« Reply #12 on: January 21, 2013, 13:56:42 pm »
Fancybox with view next facility is now standard in VM - upgrade to 2.0.18a
Kelvyn

Jenkin Hill Internet,
Lowestoft, Suffolk, UK

Unsolicited PMs/emails will be ignored.

Please mention your VirtueMart, Joomla and PHP versions when asking a question in this forum

Currently using VM 3.6.11.10291 on Joomla 3.9.16 PHP 7.0.33