Проблема jquery + fancybox, событие jquery fancybox не «видит» html-контент, который был только что добавлен в дерево DOM - PullRequest
Новая
       39

Проблема jquery + fancybox, событие jquery fancybox не «видит» html-контент, который был только что добавлен в дерево DOM

0 голосов
/ 19 октября 2011

Я использую jQuery с Fancybox для создания галереи изображений следующим образом: я показываю пользователю только одно изображение среднего размера, по которому он щелкает (и после этого нажимает ссылки на другие изображения, предварительно загруженные в скрытые <div>) и получает хорошую галерею изображений.

Мне нужно предварительно загрузить ссылки на изображения, потому что это не статический список, это зависит от первого изображения, на которое нажал пользователь, и таким образом я могу запретить fancybox показывать дублированные изображения.

Вот мой код (немного грязный, потому что я получаю URL-адреса изображений из ruby):

javascript: 

$(function() {

    $('#car_image').click(function(e) { // generating fancybox gallery containing only large images
    // here we should generate fancybox <div id="large_images_gallery_div"> and place this div inside of <div id="car_image">

    var gallery_images_urls = [];
    var gallery_images_tagged = '';

    <% @car.photos.each do |car_photo| %>
        var current_image_url = '<%= car_photo.image.url(:large) %>';

        if(current_image_url != $('#changeme').attr('href')) gallery_images_tagged += '<a href="' + current_image_url + '" class="fancybox" rel="my_car_gallery" />';
    <% end%>

        $('#car_image div#large_images_gallery_div').replaceWith('<div id="large_images_gallery_div" style="visibility: hidden;">' + gallery_images_tagged + '</div');

    });

  $("a.fancybox").fancybox();


});

html: 

<div id="car_image">
    <%= link_to @car.photos.first.image.url(:large), :class => "fancybox", :rel => "my_car_gallery", :id => "changeme" do %>
        <%= image_tag @car.photos.first.image.url(:medium) %>
    <% end%>

    <div id="large_images_gallery_div" style="visibility: hidden;">
                <-- HERE ALL GALLERY IMAGES LINKS BEING PRELOADED -->
    </div>
</div>

ПРОБЛЕМА : мой список загружается правильно, но fancybox показывает мне только первое изображение и не показывает другие, которые были добавлены с помощью метода jQuery replaceWith()

возможноон не может "видеть", что дерево DOM было изменено

Кстати, извините за мой плохой английский

UPDATE

HTML до загрузки ссылок на изображения: 

<div id="car_image">
    <a rel="my_car_gallery" id="changeme" class="fancybox" href="/uploads/photo/image/44/large_1.jpg">
        <img src="/uploads/photo/image/44/medium_1.jpg">
    </a>

    <div style="visibility: hidden;" id="large_images_gallery_div">

    </div>
</div>

HTML после изображенияПредварительная загрузка ссылок ges: 

<div id="car_image">
    <a rel="my_car_gallery" id="changeme" class="fancybox" href="/uploads/photo/image/44/large_1.jpg">
        <img src="/uploads/photo/image/44/medium_1.jpg" >
    </a>

    <div style="visibility: hidden;" id="large_images_gallery_div">
        <a rel="my_car_gallery" class="fancybox" href="/uploads/photo/image/45/large_2.jpg"></a>
        <a rel="my_car_gallery" class="fancybox" href="/uploads/photo/image/46/large_3.jpg"></a>
        <a rel="my_car_gallery" class="fancybox" href="/uploads/photo/image/47/large_4.jpg"></a>
        <a rel="my_car_gallery" class="fancybox" href="/uploads/photo/image/48/large_5.jpg"></a>
    </div>
</div>

1 Ответ

0 голосов
/ 19 октября 2011

Как мне сказали #jquery @ freenode, этот вопрос касается jQuery.delegate () , поэтому я получил помощь по этому методу: 

$('#car_image').delegate(
    ".fancybox",
    "click",
        function (ev) {
            ev.preventDefault();
            $.fancybox(
                (function () {
                    var gallery_images_urls = [];

                    gallery_images_urls.push('<img src="' + $('a#changeme').attr('href') + '" />'); // pushing first image

                    <% @car.photos.each do |car_photo| %>
                        if($('a#changeme').attr('href') != '<%= car_photo.image.url(:large) %>') gallery_images_urls.push('<img src="<%= car_photo.image.url(:large) %>" />');
                    <% end %>

                    return gallery_images_urls;
                }).bind(this)(),
                    {
                        transitionIn : 'elastic',
                        transitionOut : 'elastic',
                        speedIn : 600,
                        speedOut : 200
                    }
            );
    }
);

, который вызывает delegate() для каждогонажмите #car_image, я решил предоставить объекты изображений fancybox напрямую методу $.fancybox() без какой-либо дополнительной предварительной загрузки html

...