fancybox - при нажатии на изображение (большой палец), как получить FancyBox, чтобы загрузить больший img / другой URL

Question

У меня есть длинный список изображений, которые являются миниатюрами.Когда пользователь нажимает на одно из этих изображений, я хочу, чтобы fancybox загружал изображение большего размера по URL-адресу, отличному от изображения.как мне это сделать?

Спасибо

Answer 1

Я не пробовал, но попробуйте сделать это так.

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

HTML, как это,

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

---

или в html как это будет работать,

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

JQuery

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

Answer 2

Если бы я попытался это сделать, я просто сделал бы два изображения, оба с одинаковыми именами файлов, за исключением флага в имени файла, например, -thumb AND -large в зависимости от их размера. Сделав это, вы просто переключаете URL, используя следующий скрипт в качестве руководства:

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

Тогда вы можете создавать и вызывать свои фантазии на лету:

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