Fancybox - How to load an image from a url?

Question

I wonder how I can create a lightbox which loads the image in page with the urls of the links

Here is my code but it does not work:

   $("a.picture").click(function() { 
        $.fancybox({ 
           'padding'           : 0, 
           'overlayShow'   : false, 
           'transitionIn'  : 'elastic', 
           'transitionOut' : 'elastic', 
           'titlePosition' : 'over', 
           'type' : 'image', 
           'titleFormat'   : function(title, currentArray, 
currentIndex, currentOpts) { 
            return '<span id="fancybox-title-over">' + (currentIndex + 
1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + 
title : '') + '</span>'; 
           } 
        }); 
        return false; 
    }); 

and HTML code

<a class="picture" href="http://localhost/test/my_page.html" title="Picture Page">Link</a>

Thanks!

Answer 1

The script you have above also assumes that you have an html like this:

<a class="picture" href="images/picture.jpg">open image</a>

then you should also add to your script the option href like

$("a.picture").click(function() { 
        $.fancybox({ 
           'padding'           : 0, 
           'overlayShow'   : false, 
           'href': this.href, //<--LIKE THIS
           // etc....

that option will provide the URL from where fancybox will load the image.

NOTE : Asking questions is OK and we are glad to help, but as @ofir commented you should provide feedback and accept the correct answers provided by others so people will feel motivated to help you out in the future.