Несколько изображений на одной странице, каждое из которых открывает уникальный HTML-контент.

Обычно я новичок в jQuery и javascript, поэтому мне нужна небольшая помощь, поэтому заранее извиняюсь, если есть простое решение.

Я хочу иметь несколько изображений на странице, чтобы при нажатии на них каждый из них открывал html fancybox с дополнительными изображениями, текстом и ссылками в нем, что, согласно коду, должно быть выполнено с помощью iframes.

Это пример того, что я хочу сделать (я использовал код fancybox 2 и разбил его так, как хотел).

    $(document).ready(function() {
      $(".fancybox-flyout").click(function() {
       $.fancybox.open({
        padding : 5,
        openEffect : 'elastic',
        openSpeed  : 150,
        closeEffect : 'elastic',
        closeSpeed  : 150,
        closeClick : true,
        helpers : {
            overlay : true
            }
        });

I want this script to function on these objects:

    <a class="fancybox-flyout" href="/iframe_1.html"><img src="image_1.jpg" alt="" /></a>
    <a class="fancybox-flyout" href="/iframe_2.html"><img src="image_2.jpg" alt="" /></a>
    <a class="fancybox-flyout" href="/iframe_2.html"><img src="image_3.jpg" alt="" /></a>

Все, что это делает, так это открывает ссылку без эффекта, так что, возможно, я слишком сильно ее каннибализировал, но в основном я хотел эффект «fancy-box-effects-c» из исходного кода и применить его к открытию html-контента вместо другого картина.

Спасибо!


jquery fancybox-2
person kingkrikkit    schedule 23.07.2013    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Если вы открываете html-страницы как iframe, попробуйте этот код:

$(document).ready(function () {
    $(".fancybox-flyout").fancybox({
        padding: 5,
        openEffect: 'elastic',
        openSpeed: 150,
        closeEffect: 'elastic',
        closeSpeed: 150,
        closeClick: false, // <--use false if you want interaction inside your iframe
        helpers: {
            overlay: true
        },
        type: "iframe" // <-- you may need this too ;)
    });
});

См. JSFIDDLE.

person JFK    schedule 23.07.2013