javascript - Fancybox - How to load an image from a url? - Stack Overflow

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!

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!

• javascript
• jquery
• fancybox

Share Improve this question Follow edited Mar 10, 2012 at 19:45 Jérémy Dupont asked Mar 10, 2012 at 19:17 Jérémy DupontJérémy Dupont 37711 gold badge44 silver badges1111 bronze badges 1

• 1 if opening a html page, you should set 'type' : 'iframe' rather than 'type' : 'image' – JFK Commented Mar 11, 2012 at 10:35

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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 mented you should provide feedback and accept the correct answers provided by others so people will feel motivated to help you out in the future.