Question

我目前正在使用Codrops全屏画廊组建一个Flickr画廊。我已经设法从flickr帐户导入flickr图像，并且我使用非flickr图像处理全屏图像，但是当告诉flickr与Codrops画廊合作时，它似乎停止工作。

网站网址：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＆amp; Vimeo视频已导入，效果很好，如果你可以帮我解决这个问题，我肯定会在网站上的编码中添加你的链接，我会在facebook＆amp; twitter :)。

Answer 1

您尝试绑定单击处理程序（用于拇指）尚未存在的元素，因为它们是动态加载的。要使其工作，请替换line（在gallery.js中）：

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

为：

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

这将使缩略图点击工作。之后，在flickrImport.js中将图像的alt属性中拟合的url从_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中调用的。

将Flickr与Codrops FullScreen库问题集成

1 个答案: