jquery - Muliple images on one page each opens unique HTML content -

i novice jquery , javascript, need little apologize in advance if there simple solution this.

i want have multiple images on page when click on them each open html fancybox additonaional images, text , links in it, according tot code needs done iframes.

this sample of want (i used fancybox 2 code , broke down effect wanted).

    $(document).ready(function() {       $(".fancybox-flyout").click(function() {        $.fancybox.open({         padding : 5,         openeffect : 'elastic',         openspeed  : 150,         closeeffect : 'elastic',         closespeed  : 150,         closeclick : true,         helpers : {             overlay : true             }         }); 

i want script function on these objects:

    <a class="fancybox-flyout" href="/iframe_1.html"><img src="image_1.jpg" alt="" /></a>     <a class="fancybox-flyout" href="/iframe_2.html"><img src="image_2.jpg" alt="" /></a>     <a class="fancybox-flyout" href="/iframe_2.html"><img src="image_3.jpg" alt="" /></a> 

all though open link without effect, maybe cannibalized much, wanted effect of "fancy-box-effects-c" source code , apply opening html content instead of picture.

thanks!

if opening html pages iframe, try code :

$(document).ready(function () {     $(".fancybox-flyout").fancybox({         padding: 5,         openeffect: 'elastic',         openspeed: 150,         closeeffect: 'elastic',         closespeed: 150,         closeclick: false, // <--use false if want interaction inside iframe         helpers: {             overlay: true         },         type: "iframe" // <-- may need ;)     }); }); 

see jsfiddle