Fancybox on cartpage

[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]

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

[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]

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"...