fancybox - When clicking on an image (thumb) how to get FancyBox to load a larger img / different URL

I have a long list of images which are thumbnails. Whe开发者_JAVA百科n the user clicks on one of these images I want to fancybox load a larger image at a different url than the image. how do I do that?

Thanks

I have not tried it but try doing it like this.

$("a#example1").fancybox({
    // some other options,
    'href'     : 'http://link/of/the/true/image.jpg'
});

html like this,

<a href="#" id="example1"><img src="/link/to/thumb.jpg" /></a>

or in html of like this will work,

<a href="http://link/of/the/true/image.jpg" id="example1">
  <img src="/link/to/thumb.jpg" />
</a>

jquery

$("a#example1").fancybox({
    'titleShow'     : false
});

If I were trying to do this I'd simply make two images, both with similar file names except for the flag in the file name say like -thumb AND -large according to their size. BY doing that you simply switch the url using the following script as your guide:

<script>
var openFancyBox = function(url,w,h){ 
    $.fancybox( { 
        type: 'iframe', 
        href: url, hideOnContentClick: true, 
        showCloseButton: false, 
        overlayShow: true, 
        overlayOpacity: 0.15, 
        'scrolling': 'no', 
        centerOnScroll: true, 
        titleShow: false, '
        padding': 0, 
        'autoDimensions': false, 
        'margin': 0, 
        'width' : w, 
        'height': h 
    }); 
};
</script>

Then you can create and call your fancybox on the fly:

openFancyBox('/path-to-my/image-thumb.jpg', 200, 50);