2

I'm trying display an image using fancybox, but not working.

My code:

<div id="example2" style="display:none;">
<a id="single_image" href="#"><img src="style/images/promocional-01.jpg" alt=""/></a> </div>

<script type="text/javascript">
      $(document).ready(function() {
        $("a#single_image").fancybox();
    });
</script>
Marco Bonelli
  • 63,369
  • 21
  • 118
  • 128
HawkB
  • 171
  • 1
  • 2
  • 10

3 Answers3

3

this works.. but how can i put in responsive ??

$(document).ready(function () {
    $.fancybox({
     'width': '800px',
    'height': '286px',
    'autoScale': true,
    'transitionIn': 'fade',
    'transitionOut': 'fade',
    'type': 'image',
    'href': 'style/images/banner.jpg'
 });

works fine in normal screen, but responsive not working.

up...

HawkB
  • 171
  • 1
  • 2
  • 10
2

A couple of issues:

  1. You need to add the fancybox click event
  2. You forgot to add a proper href.
  3. In this instance, you do not need the img tag.

$(document).ready(function() {
   $("a#single_image").fancybox().click();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.css" />

<div id="example2" style="display:none;">
    <a id="single_image" href="http://i.imgur.com/uN7Y8gw.jpg"></a>
</div>
Neil
  • 14,063
  • 3
  • 30
  • 51
  • well... `display:none` it is not working and the fancybox shows this message: `The requested content cannot be loaded. Please try again later.` – HawkB May 08 '17 at 14:50
1

The link to the slider should not be in the div with 

style="display:none;"

so 

  <a id="single_image" href="big_version_of_image.jpg">
  <img src="style/images/smaller_version_of_img.jpg" alt=""/>
  </a>

should work.

here is a link with a working pen:

https://codepen.io/faw/pen/KmZdbK