CODEWITHSUNDEEP
javascriptjquerytriggersfancyboxfancybox-2
Breezer
Breezer

Reputation: 10490

Fancybox trigger click

I'm trying to get fancybox to trigger if the hash is available in the url, problem is the diffrent methods ive used some of them taken here from stackoverflow returns "c not available" in the error console in firefox. the site im trying this on can be found here http://rojava.se/om/#infor. All help is greatly appreciated

methods ive tried: How to create a direct link to any fancybox box

    <script type="text/javascript">
var thisHash = window.location.hash;
$(document).ready(function() {
 if(window.location.hash) {
  $(thisHash).fancybox({
    padding: 0
    // more API options
  }).trigger('click');
 }
 $('.fancylink').fancybox({
    padding: 0
    // more API options
 });
}); // ready
</script>

Second method: Fancybox doesn't trigger on $(elem).click(), but does on "real" click?

jQuery('a[href="http://hallarna.se/wp-content/gallery/2013/spoksonatenloggaliten.jpg"]').trigger('mousedown').trigger('click');

Upvotes: 0

Views: 5943

Answers (1)

JFK
JFK

Reputation: 41143

You have to do two things :

1). Change your trigger code :

Currently you are using this trigger :

var thisHash = window.location.hash;
if(window.location.hash) {
    $(thisHash).trigger('mousedown').trigger('click');      
}

But you said to yourself that you tried the solution of this post How to create a direct link to any fancybox box therefore your code has to look like this :

var thisHash = window.location.hash;
if(window.location.hash) {
    $(thisHash).fancybox().trigger('click');        
}

because the selector #infor is not bound to fancybox (v1.3.4) so you need to bind it before you trigger the click.

2). Call your trigger code AFTER the fancybox initialization.

Still doesn't work? that is a hoisting issue. Your trigger code is currently in the <head> section of your document BUT the fancybox.js file is being called at the bottom of the page, so even changing the code as suggested above it won't trigger because fancybox hasn't been initialized.

Place your code after the fancybox call and initialization and before the closing </body> tag like :

<script type='text/javascript' src='http://rojava.se/wp-content/plugins/easy-fancybox/fancybox/jquery.fancybox-1.3.5.pack.js?ver=1.5.5'></script>
<script type='text/javascript' src='http://rojava.se/wp-content/plugins/easy-fancybox/jquery.easing.pack.js?ver=1.3'></script>

<script type="text/javascript">
jQuery(document).on('ready post-load', easy_fancybox_handler );
jQuery.noConflict();
(function($) {
  $(function() {
    $('#footbuttoncontainer ').click(function() {
      container = $('#footcontentcontainer');
      if(container.height() > 20){
        $('#footcontentcontainer').animate({height:"0"}, 1000);
      } else {
        $('#footcontentcontainer').animate({height:"26vmin"}, 1000);
      }
    });
    var thisHash = window.location.hash;     
    if(window.location.hash) {
      $(thisHash).fancybox().trigger('click');
    }
  });
})(jQuery);
</script>
</body>

Notice I moved your complete block of code just after the fancybox init.

Now see it working with the hash included in the URL :

http://www.picssel.com/playground/jquery/rojava.html#infor

Upvotes: 2

Related Questions