そこで私は、検索ボックスと 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 -->
そのうちの 1 つ (Funny など) をクリックすると、想定どおりの画像が表示されます。これらの写真の 1 つをクリックすると、カラーボックスが機能します。ただし、別のもの（怖いなど）をクリックすると、多くの画像が読み込まれず、カラーボックスが機能しなくなります。#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 イベントの外側のグローバル スペースに配置しようとしました (シャドウ ボックス、カラー ボックス、ファンシー ボックスで試しました) が、プラグインが台無しになり、障害が発生するだけでした。