Fancybox показывает маленькое изображение из Cloudzoom и отсутствуют другие изображения галереи

Question

• 1000 1004 * Затем я добавил fancybox, и кажется, что он вытягивает неправильное изображение (меньшее, а не большее), не выбирает галерею изображений для продолжения слайд-шоу, и, когда я закрываю fancybox, исходное изображение исчезло .

Вот мой js из шапки страницы:

    CloudZoom.quickStart();

//sliders
    $(function(){
        $('#slider2').Thumbelina({
            $bwdBut:$('#slider2 .left'),    // Selector to left button.
            $fwdBut:$('#slider2 .right')    // Selector to right button.
        });
    })


    //fancybox

    $(function(){
        // Bind a click event to a Cloud Zoom instance.
        $('#myCloudZoom').bind('click',function(){
            // On click, get the Cloud Zoom object,
            var cloudZoom = $(this).data('CloudZoom');
            // Close the zoom window (from 2.1 rev 1211291557)
            cloudZoom.closeZoom();                       
            // and pass Cloud Zoom's image list to Fancy Box.
            $.fancybox.open(cloudZoom.getGalleryList()); 
            return false;
        });
    });

А вот код из галереи (он в веточке, потому что это грав-сайт)

<div class="item">
  <div class="item__image">
     <img id="myZoom" class = "cloudzoom item__image--img" src = "{{ firstimage.resize(550,550).url }}"
                    data-cloudzoom = 
                        "zoomImage: '{{ firstimage.resize(1500,1500).url }}', 
                        zoomPosition: 'inside', 
                        zoomOffsetX: 0" 
                    data-fancybox="CloudZoom" />
    </div>
    <div class="item__description">
       <p>some other content</p>
    </div>
    <div id="slider2" class="item__gallery">
        <div class="thumbelina-but horiz left">&#706;</div>
           <ul>
           {% for i in page.media.images  %}
               <li>
                 <img class = 'cloudzoom-gallery item__gallery--img' src = "{{ i.resize(150,150).url }}" 
                                data-cloudzoom = 
                                "useZoom: '.cloudzoom', 
                                image: '{{ i.resize(550, 550).url }}', 
                                zoomImage: '{{ i.resize(1500,1500).url }}' " >
               </li>
                        
          {% endfor %} 
          </ul>
  <div class="thumbelina-but horiz right">&#707;</div>
  </div>

Любая помощь приветствуется, спасибо.