Интеграция Flickr с Codrops FullScreen Галерея Проблемы - PullRequest
Новая
       31

Интеграция Flickr с Codrops FullScreen Галерея Проблемы

1 голос
/ 01 сентября 2011

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

URL веб-сайта: http://www.media21a.co.uk/development/fullthrottle/flickr/ Это документ Flickr: http://www.media21a.co.uk/development/fullthrottle/wp-content/themes/fullthrottle/js/flickrImport.js Это документ галереи: http://www.media21a.co.uk/development/fullthrottle/wp-content/themes/fullthrottle/js/gallery.js

Я знаю, как заставить его работать сfancybox (лайтбокс), но я не уверен, как заставить его работать с галереей codrops. 

function attachFancyBox()
{
    $(".fancyBox").fancybox();
} 

    /*  BEGIN OPTIONAL FANCYBOX PARAMS */
    "rel":"casabelmonte",            // Rel tag to enable forward/back buttons on fancybox
    "imageLink":"preview",         // Tells the script to grab the image url for fancybox to show
    "className":"fancyBox",     // Class for attaching fancybox
    "callback":attachFancyBox  // Once the images show attach the fancybox script
    /* END */

При необходимости вот мой глобальный скрипт: 

$(window).load(function() {


    $(".dropgallery a, #fp_thumbtoggle").removeAttr("title");

    $('#fp_thumbtoggle, .dropgallery img').click(function() {
        $('#fp_thumbtoggle').toggleClass("active");

        if ($('#fp_thumbtoggle').hasClass('active')){
            $('#fp_thumbtoggle').animate({top:'65px'});
        }else{
            $('#fp_thumbtoggle').animate({top:'185px'});
        }
        $('.dropgallery').slideToggle('500');

    });

    });

Мне удалосьчтобы импортировать видео с Youtube и Vimeo, и это прекрасно работает, если вы поможете мне в этом, я обязательно добавлю вашу ссылку в кодировку на сайте и добавлю пару криков в Facebook и Twitter:).

1 Ответ

1 голос
/ 02 сентября 2011

Вы пытаетесь связать обработчик щелчка (для больших пальцев) для элементов, которые еще не существуют, так как они динамически загружаются. Чтобы это работало, замените строку (в gallery.js): 

$thumbScroller.find('.content').bind('click', function(e){

до: 

$thumbScroller.find('.content').live('click', function(e){

Это заставит работать клик по миниатюре. После этого в файле flickrImport.js измените URL-адрес, указанный в атрибуте alt изображения, с размера _m на _b, чтобы после щелчка загружать большую версию изображения, а не размер _m. Пример: 

alt="http://farm'+photo.farm+'.static.flickr.com/'+photo.server+'/'+photo.id+'_'+photo.secret+'_m.jpg"

изменить на: 

alt="http://farm'+photo.farm+'.static.flickr.com/'+photo.server+'/'+photo.id+'_'+photo.secret+'_b.jpg"

РЕДАКТИРОВАТЬ: я забыл упомянуть - отсутствовали две функции (showNav () и hideThumbs ()). Они вызываются из gallery.js.

...