1

所以我使用了搜索框+Flickr API的组合，这样人们就可以搜索图片并获得结果。除此之外，我正在使用 Colorbox JS 插件，这样人们可以点击图片，图片将被放大并居中。

除此之外，我还有 3 个标记为“有趣、模因和可怕”的链接，方便人们查看这些类型的图片。这是它的HTML：

    <div class="tool">
        <a href="#" class="blackbar" id="funny">Funny</a>
        <a href="#" class="blackbar" id="scary">Scary</a>
        <a href="#" class="blackbar" id="memes">Memes</a>
    </div> <!-- tool -->

我点击其中一个（例如有趣的），图片就会像他们应该的那样出来。我单击其中一张图片和彩盒作品。但是，我单击另一个（例如可怕）并没有那么多图片加载+彩盒停止工作。我注意到该 URL 有一个附加#的<a href="#"，我相信这可能是问题所在？有没有办法让href不影响我的JS？我试图将其留空，但它只会刷新页面。

这是我的 JS（不确定是否有必要展示，但以防万一）：

$('#funny').on('click',function(){
    $('.leftcolumn').html('');
    $.getJSON('http://api.flickr.com/services/rest/?format=json&method=flickr.photos.search&api_key=2fd41b49fedfd589dc265350521ab539&tags=funny&jsoncallback=?', function(data){
        $.each(data.photos.photo, function(i, value){
            content = '<a href="http://farm'+value.farm+'.staticflickr.com/'+value.server+'/'+value.id+'_'+value.secret+'.jpg" class="colorbox" rel="example1"><img src="http://farm'+value.farm+'.staticflickr.com/'+value.server+'/'+value.id+'_'+value.secret+'.jpg"></a>';
            $('.leftcolumn').append(content);
            $("a[rel='example1']").colorbox();
            if (i == 19) {
                return false;
            };
        })
    });
    getContent('funnytext.html');
    $('.blackbar').css({ "font-size": "1em"});
    $('#funny').animate({fontSize: "2em"});
});



$('#memes').on('click',function(){
    $('.leftcolumn').html('');
    $.getJSON('http://api.flickr.com/services/rest/?format=json&method=flickr.photos.search&api_key=2fd41b49fedfd589dc265350521ab539&tags=memes&jsoncallback=?', function(data){
        $.each(data.photos.photo, function(i, value){
            content = '<a href="http://farm'+value.farm+'.staticflickr.com/'+value.server+'/'+value.id+'_'+value.secret+'.jpg" class="fancybox" rel="example1"><img src="http://farm'+value.farm+'.staticflickr.com/'+value.server+'/'+value.id+'_'+value.secret+'.jpg"></a>';
            $('.leftcolumn').append(content);
            $("a[rel='example1']").colorbox();
            if (i == 19) {
                return false;
            };
        })
    });
    getContent('memetext.html');
    secondGetContent('memetext2.html');
    $('.blackbar').css({"font-size": "1em"});
    $('#memes').animate({fontSize: "2em"});
});



$('#scary').on('click',function(){
    $('.leftcolumn').html('');
    $.getJSON('http://api.flickr.com/services/rest/?format=json&method=flickr.photos.search&api_key=2fd41b49fedfd589dc265350521ab539&tags=scary&jsoncallback=?', function(data){
        $.each(data.photos.photo, function(i, value){
            content = '<a href="http://farm'+value.farm+'.staticflickr.com/'+value.server+'/'+value.id+'_'+value.secret+'.jpg" rel="example1"><img src="http://farm'+value.farm+'.staticflickr.com/'+value.server+'/'+value.id+'_'+value.secret+'.jpg"></a>';
            $('.leftcolumn').append(content);
            $("a[rel='example1']").colorbox();
            if (i == 19) {
                return false;
            };
        })
    });
    getContent('scarytext.html');
    $('.secondright').html('');
    $('.blackbar').css({"font-size": "1em"});
    $('#scary').animate({fontSize: "2em"});
});

顺便说一句，getContent 是一个 AJAX 函数，用于在页面右侧加载图片。

function getContent(filename) {
    $.ajax({
        url: filename,
        type: "GET",
        dataType: "html",
        beforeSend: function(){
            $('.rightcolumn').html('<img src="images/loading.gif">');
        },
        success: function (data, textStatus, xhr) {
            setTimeout(function (){
                $('.rightcolumn').html(data);
            }, 2000);
        },
        error: function(xhr, textStatus, errorThrown) {
            $('.rightcolumn').html(textStatus);
        }
    });
}

我还尝试将.colorbox()方法放在全局空间中的 this 事件之外（尝试了 shadowbox、colorbox 和 fancybox），但它只会搞砸插件并使其出错。

4

0 回答 0