How to create a direct link to any fancybox

Question

I need that when clicking on something using fancybox, it will generate a specific URL for it, so when I send this link to someone, it opens the specific field that I want.

For example: fancybox.net/home when I click on the first image, the link is still fancybox.net/home I want the URL to be created and displayed in the address bar when I click on the image, for example: fancybox.net/home/imageid = 1 therefore, when I send fancybox.net/home/imageid=1 to someone, it already opens the image in the field

Thanks!

(It's like a facebook photo, when you click on any photo, the photo opens in the field, but the address bar changes the link to the image)

////// UPDATE # 1 //////

I did what JFK suggested, but after one hour of trying, I still don't know why the boxes do not match.

See the difference between:

the code:

<script type="text/javascript"> var thisHash = window.location.hash; $(document).ready(function() { if(window.location.hash) { $(thisHash).fancybox({ prevEffect : 'none', nextEffect : 'none', closeBtn : false, arrows : true, nextClick : true, helpers : { thumbs : { width : 80, height : 80 }, title : { type : 'inside' }, buttons : {} }, afterLoad : function() { this.title = (this.index + 1) + ' de ' + this.group.length + '<div id="curti"><iframe src="http://www.facebook.com/plugins/like.php?href=http://www.google.com.br&amp;send=true&amp;layout=standard&amp;width=45&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:56px; height:24px;" allowTransparency="true"></iframe></div>'; } }).trigger('click'); } $('.fancylink').fancybox({ prevEffect : 'none', nextEffect : 'none', closeBtn : false, arrows : true, nextClick : true, helpers : { thumbs : { width : 80, height : 80 }, title : { type : 'inside' }, buttons : {} }, afterLoad : function() { this.title = (this.index + 1) + ' de ' + this.group.length + '<div id="curti"><iframe src="http://www.facebook.com/plugins/like.php?href=http://www.google.com.br&amp;send=true&amp;layout=standard&amp;width=45&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:56px; height:24px;" allowTransparency="true"></iframe></div>'; } }); }); // ready </script> 

What is wrong with this script?

Answer 1

First, you still need to have links to your images on the page that opens fancybox, for example:

 <a id="image01" class="fancylink" rel="gallery" href="images/01.jpg" title="image 01">open image 01</a> <a id="image02" class="fancylink" rel="gallery" href="images/02.jpg" title="image 02">open image 02</a> 

... etc.

Please note that I am adding both ID and class to each anchor, as the only way I need to target by URL is by identifier ... the class will be used to open these images in fancybox in the usual way, when I am on the page, so I do not need to write specific fancybox code for each ID.

then install this script on the help page:

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

then you can specify the URL intended for each image, for example

 http://mydomain.com/page.html#image01 

or

 http://mydomain.com/page.html#image02 

and etc.

Want to work a demo?

http://picssel.com/playground/jquery/targetByID_28jan12.html#image01

http://picssel.com/playground/jquery/targetByID_28jan12.html#image02

NOTE This code is for fancybox v1.3.x, since you used fancybox.net as a reference.

UPDATE # 1 : if you need fancybox options, you need to add them to both ID and class selectors:

 <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> 

Of course, use the correct options for fancybox v1.3.x or 2.x