0

I have following html:

<a href="createCompany/getOriginalImage/1" class="fancy_image"><img id="right_tab_image" src="createCompany/getSmallThumbnail/1" alt=""></a>

And following code executes(tested in debug) when page loads:

 $(document).ready(function(){
        $(".fancy_image").fancybox({
            type        : 'image',
            openEffect  : 'none',
            closeEffect : 'none'
        });
    });

and to the the page include following sources:

enter image description here

But when I click on href image opens but in another tab.

What did I forget ?

gstackoverflow
  • 36,709
  • 117
  • 359
  • 710
  • Make sure is not a hoisting issue and jQuery is loading before any other js. Then check that fancybox.js loads before its js helpers as well. Then your custom code should be loaded at the end – JFK Feb 01 '15 at 19:11

2 Answers2

1

An imitation of the supplied code seems to work:

HTML

<a class="fancybox" href="http://picsofcanada.com/wp-content/uploads/2014/03/11wwartsuewilkinslooktothecoast.jpg"
style='width:50px;'> 
<!-- Note that FancyBox ignores this width styling -->
<img src="http://picsofcanada.com/wp-content/uploads/2014/03/11wwartsuewilkinslooktothecoast-150x150.jpg" alt="" /><br>
<b>Click to trigger Fancybox</b></div>

jQuery

$(document).ready(function () {
    $('.fancybox').fancybox({
       padding: 0,
       type        : 'image',
       openEffect  : 'none',
       closeEffect : 'none'
    });
});

See this demo.

So things you should try to get it working:

  1. Use the latest version of jQuery and the latest version of fancybox. Sometimes there are problems with the versions.
  2. Make sure that fancybox.js is actually loaded
  3. Specify your image links in the full http://.. format

I think if you follow all these points, it'll work. Otherwise, check if any of the other plugins cause problems with fancybox.

Community
  • 1
  • 1
Jean-Paul
  • 19,910
  • 9
  • 62
  • 88
  • **Make sure that fancybox.js is actually loaded** How to check it? – gstackoverflow Feb 01 '15 at 19:31
  • [**Multiple ways**](https://www.google.nl/?gfe_rd=cr&ei=C43OVPPzLcaX-AaGyYGQAQ&gws_rd=cr#q=how+to+check+if+js+is+loaded). Easiest being to try a very simple example of fancybox and see if the behaviour is expected. – Jean-Paul Feb 01 '15 at 20:30
-1

Yes that worked. I dint have the type set to be image in fancybox. I ended up with the fancybox placing an empty placeholder div tag in place of the active flex slide. This caused the white space to appear in the background of the fancy box. it was fixed with the below settings.

window.setTimeout(function () {
    jQuery('.slides a.fancybox')
        .attr('rel', 'gallery')
        .fancybox({
            arrows: true,
            type:'image'
        })
});
gofr1
  • 15,741
  • 11
  • 42
  • 52
Syed Fahad Ahmed B
  • 1