Geek Answers Handbook

Launch fancyBox using the click button

I am having a little problem with fancyBox v2.

I want to start fancyBox when a button is clicked. After clicking on it, all images from the list (from the src attribute) will be downloaded.

I created this jsfiddle to show what I'm trying to do: http://jsfiddle.net/fPFZg/

jQuery(document).ready(function($) { $('button').on('click', function() { $.fancybox(); }); });

Can anyone understand how this is possible?

+4
source share
4 answers

I had the same question, and I found the following a simpler method:

HTML

  <button class="fancybox" value="Open Fancybox">Open Fancybox</button> <div class="hidden" id="fancybox-popup-form"> (your Fancybox content goes in here) </div>

JQuery

  $('.fancybox').click(function () { $.fancybox([ { href : '#fancybox-popup-form' } ]); });

CSS

  .hidden { display: none; }

additional literature

Fancybox Docs (click the API Methods tab, then read the first method called Open).

+6
source

you can use it as follows:

  $.fancybox.open([ { href : 'http://fancyapps.com/fancybox/demo/1_b.jpg', title : '1st title' }, { href : 'http://fancyapps.com/fancybox/demo/2_b.jpg', title : '2nd title' } ], { padding : 0 });
+4
source

Your code does not work because this $.fancybox(); fancybox doesn't tell what to open does nothing.

What would I do if you do not want to edit each link in your html, this:

1). add the ID tag to the <ul> tag so that we can use this type selector

 <ul id="images">

2). bind fancybox to all <a> anchors that are children of your #images element, like

 var fancyGallery = $("#images").find("a"); // we cache the selector here fancyGallery.attr("rel","gallery").fancybox({ type: "image" });

notice that we add the rel attribute on the fly to all anchors so that they are part of the same gallery

3). attach the click event to the button (I would recommend that you give it an ID too, so that in the future it does not get messed up with other possible buttons), which runs the existing fancybox script, as described above, so with this html

 <button id="fancyLaunch">Launch Fancybox</button>

use this script

 $('#fancyLaunch').on('click', function() { fancyGallery.eq(0).click(); // triggers a click });

notice that we used the .eq() method to launch the gallery from the first element (first index in javascript is always 0)

To summarize, your whole script might look like this:

 jQuery(document).ready(function($) { var fancyGallery = $("#images").find("a"); fancyGallery.attr("rel","gallery").fancybox({ type: "image" }); $('#fancyLaunch').on('click', function() { fancyGallery.eq(0).click(); }); });

See JSFIDDLE

+1
source

Your html:

 <ul> <li> <a href="http://placekitten.com/400/400" title="" class="fancybox"> <img src="http://placekitten.com/100/100" alt="" /> </a> </li> <li> <a href="http://placekitten.com/400/400" title="" class="fancybox"> <img src="http://placekitten.com/100/100" alt="" /> </a> </li> <li> <a href="http://placekitten.com/400/400" title="" class="fancybox"> <img src="http://placekitten.com/100/100" alt="" /> </a> </li> <li> <a href="http://placekitten.com/400/400" title="" class="fancybox"> <img src="http://placekitten.com/100/100" alt="" /> </a> </li>

Your jQuery:

  $(document).ready(function() { $('button').on('click', function() { $.fancybox($("a.fancybox")); });});
+1
source

More articles:


All Articles