Question

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

除此之外，我还有3个标签为“Funny，Memes，Scary”的链接，方便人们查看这些类型的图片。这是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 -->

我点击其中一个（例如搞笑），照片就像他们应该的那样出现。我点击其中一张图片和彩盒工作。但是，我点击另一个（例如Scary）并没有那么多图片加载+ colorbox停止工作。我注意到该网址#还有一个<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"});
});

btw，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()方法放在此事件之外的全局空间中（尝试使用shadowbox，colorbox和fancybox），但它只会搞砸插件并使其出错。

HTML / JS / jQuery：单击HTML链接后插件无法正常工作

0 个答案: