jquery - Fancybox - apply a function to several elements -

this source code below posted cristiano g. carvalho in answer question: calling fancybox gallery other link made user.

<div class="details_gallery">  <a href="#" class="manualfancybox">manual call fancybox</a>  <div class="details_gallery_min">   <a rel="details" href="max/1.jpg" class="fancybox"><img src="min/1.jpg" alt="" /></a>   <a rel="details" href="max/2.jpg" class="fancybox"><img src="min/2.jpg" alt="" /></a>   <a rel="details" href="max/3.jpg" class="fancybox"><img src="min/3.jpg" alt="" /></a>   <a rel="details" href="max/4.jpg" class="fancybox"><img src="min/4.jpg" alt="" /></a>  </div> </div>  <script>  $(document).ready(function(){     $(".manualfancybox").click(function() {         var photos  = new array();          $(".details_gallery_min a").each(function(){              href = $(this).attr("href");              title = $(this).attr("title");              photos.push({'href': href, 'title': title})                   });          jquery.fancybox(photos ,              {   'transitionin' : 'elastic',                  'easingin' : 'easeoutback',                  'transitionout' : 'elastic',                  'easingout' : 'easeinback',                  'opacity' : false,                  'titleshow' : true,                  'titleposition' : 'over',                 'type'              : 'image',                           'titlefromalt' : true              }         );     }); });  </script> 

and work... if have 1 gallery (.details_gallery_min in example).

i've tried change

$(".details_gallery_min a").each(function(){ 

to

$(".galleryone a, .gallerytwo a").each(function(){ 

but works ".galleryone a", when click on link calls "gallerytwo" opens "galleryone". html code correct.

my question is:

what if have multiple links opening different galleries , want use same behaviors (transition, easing, etc.) galleries?

well, while cristiano g. carvalho's answer works, think overdoing things. array() + .each() method have a(n) (arguable) high cost in terms of memory , performance, more if have several images in galleries.

i don't see reason iterate through every element , build fancybox gallery (again) inside array if simple fancybox code , manual event handlers can tackle issue. entirely personal opinion.

so instance, if have html :

<h3>gallery one</h3> <div id="gallery_one">     <a rel="galleryone" class="fancybox" href="http://fancyapps.com/fancybox/demo/1_b.jpg"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/></a>     <a rel="galleryone" class="fancybox" href="http://fancyapps.com/fancybox/demo/2_b.jpg"><img src="http://fancyapps.com/fancybox/demo/2_s.jpg" alt=""/></a> ... etc. </div>  <h3>gallery two</h3> <div id="gallery_two">     <a rel="gallerytwo" class="fancybox" href="http://fancyapps.com/fancybox/demo/3_b.jpg"><img src="http://fancyapps.com/fancybox/demo/3_s.jpg" alt=""/></a>     <a rel="gallerytwo" class="fancybox" href="http://fancyapps.com/fancybox/demo/4_b.jpg"><img src="http://fancyapps.com/fancybox/demo/4_s.jpg" alt=""/></a> ...etc. </div> 

rewriting own answer same question, set manual links need :

<a class="manualfancybox" data-gallery="gallery_one" href="#nogo">manual call first gallery</a> <a class="manualfancybox" data-gallery="gallery_two" href="#nogo">manual call second gallery</a> 

notice added html5 data-gallery attribute indicates gallery link targeting (the data-gallery value matches id of parent container of each gallery)

then, add fancybox code galleries

$(".fancybox").fancybox({     // api options here }); 

and bind event handler manual fancybox calls :

$(".manualfancybox").on("click", function(){     var gallery = "#" + $(this).data("gallery");     $(gallery).find(".fancybox").eq(0).click();     return false; }); 

set value of .eq() depending on image gallery should start from.

see jsfiddle

note : .on() requires jquery v1.7+