News:

Support the VirtueMart project and become a member

Main Menu

Fancybox on cartpage

Started by Otto0815, March 05, 2019, 15:15:46 PM

Previous topic - Next topic

Otto0815

Hi,

i'm trying to show an fancybox popup on my cartpage for energy labels.
At the product browse page and the product detail page everything works as it should, but on my cartpage it wont work, or it opens the image on an new page, like an normal link.

Here is the code wich works on all pages exept the cart:

<div id="ledinfo">
<div class="ask-a-question">

            <label id="fancybox-img" class="image" alt="<?php echo $title;?>" title="<?php echo $title;?>"  style="text-align:center;height: 30px;width:100%;background-image: url('/images/stories/virtuemart/product/led/<?php echo $arrow;?>')"  href="/images/stories/virtuemart/product/led/<?php echo $prow->product_mpn;?>_EU_label.jpg" rel="nofollow" ></a></label>

   </div>   
</div>
   <script type="text/javascript">
  $(document).ready(function(){
    $('label.image').fancybox();
  });
</script>   

I#m using an OPC solution on Joomla 3.6.5 and VM 3.0.18 (i know totally outdated, is the next thing on my list)

Also tryed with jquery easy and fancybox is loaded....

Studio 42

label is not a valid image link
Use
<a id="fancybox-img" class="image" alt="<?php echo $title;?>" title="<?php echo $title;?>"  style="text-align:center;height: 30px;width:100%;background-image: url('/images/stories/virtuemart/product/led/<?php echo $arrow;?>')"  href="/images/stories/virtuemart/product/led/<?php echo $prow->product_mpn;?>_EU_label.jpg" rel="nofollow" ></a>
but what is $arrow ?
And how you use <div class="ask-a-question"> ???

Otto0815

thanks...

if i try it with <a id.... then the page only loads the image in the same window (like if you click any link) and not as an popup/lightbox....
So it looks like there is some conflict, but if i look at my source code or firebug i cant see any...

the $arrow is an variable for an "arrow picture"....

Studio 42

If you change html, you have ot change the script too !

    $('label.image').fancybox();
change to
    $('a.image').fancybox();

And note that id="fancybox-img" is bad, if you have multiple products then you have ID more then 1 time, this is invalid in html and javascript

Otto0815

Quote from: Studio 42 on March 05, 2019, 18:27:56 PM
If you change html, you have ot change the script too !

    $('label.image').fancybox();
change to
    $('a.image').fancybox();

And note that id="fancybox-img" is bad, if you have multiple products then you have ID more then 1 time, this is invalid in html and javascript

Tryed this already...it opens always in an new window...like an "normal" link...so somehow the box doesnt seen to work....but why..

GJC Web Design

is the js etc loaded?

e.g.  components/com_virtuemart/assets/js/fancybox/jquery.fancybox-1.3.4.pack.js?vmver=5762e07a
GJC Web Design
VirtueMart and Joomla Developers - php developers https://www.gjcwebdesign.com
VM4 AusPost Shipping Plugin - e-go Shipping Plugin - VM4 Postcode Shipping Plugin - Radius Shipping Plugin - VM4 NZ Post Shipping Plugin - AusPost Estimator
Samport Payment Plugin - EcomMerchant Payment Plugin - ccBill payment Plugin
VM2 Product Lock Extension - VM2 Preconfig Adresses Extension - TaxCloud USA Taxes Plugin - Virtuemart  Product Review Component
https://extensions.joomla.org/profile/profile/details/67210
Contact for any VirtueMart or Joomla development & customisation

Otto0815

Yes, everthing is loaded...but won't work...
I've now found an solution of html&css wich does the job in an kind of lightbox.....not so beautyful but should be enough for european law..

Otto0815

#7
After lots of more hours i've come to the final solution.....(since i was not happy with the solution before in html & css)

i've now changed:

from:

<script type="text/javascript">
  $(document).ready(function(){
    $(a.image').fancybox();
  });
</script>   

to:

<script type="text/javascript">
jQuery("a.image").fancybox();
</script>   

And on the product_details it has to look like this:

  <script type="text/javascript">
  jQuery(document).ready(function(){
    jQuery('a.image').fancybox();
  });
</script>   

this is because something sets the fancybox script to "defer"...