jquery - Open a fancybox link with ajax -

i use fancybox on site show content after click on link. code use this:

js in :

$(document).ready(function() { $('.fancybox').fancybox(); }); 

link opens fancybox window:

<a rel="nofollow" target="_blank" class="fancybox" href="#show_code_8">show code</a> 

code opens in fanctbox window (just example):

<div id="show_code_8" class="inline">   content here </div> 

it works correct, instead of want load content via ajax. tried lot, can't work correctly. i've managed open ajax page via ajax, thats without right id (the 8 variable href="#show_code_8"). can please tell me how can open ajax page right id? how pass variable ajax page?

i can think of several possibilities.

one using php file returns specific code (section) when call file parameter

<a class="fancybox" href="allcodecontent.php?code=show_code_8" ... 

another jquery using .load() call specific code (section) .html file

for example, file named allcodecontent.html may have content :

<div id="show_code_1">this code one</div> <div id="show_code_2">this code two</div> <div id="show_code_3">this code three</div> <div id="show_code_4">this code four</div> ... etc 

then, call each code section in main page :

<a class="fancybox" href="#show_code_1">show code 1 in fancybox</a> <a class="fancybox" href="#show_code_2">show code 2 in fancybox</a> <a class="fancybox" href="#show_code_3">show code 3 in fancybox</a> <a class="fancybox" href="#show_code_4">show code 4 in fancybox</a> ...etc. 

you may need create place holder container (in main page) load code section every time like

<div id="ajaxcontentplaceholder" style="display:none;"></div> 

and use script :

jquery(function($) {     $(".fancybox").on("click", function(){         var $code = this.href.split("#");         $("#ajaxcontentplaceholder").load("allcodecontent.html #"+$code[1], function(){             $.fancybox(this);         });         return false;     }); // on }); // ready 

bear in mind ajax calls subject same origin policy