lynda.com の jquery チュートリアルを実行して、きちんとした効果とライト ボックスを備えた Java 駆動 (css 形式) の画像ギャラリーをセットアップしました。それは正常に動作します。
私は今、1 つのページに複数のギャラリーを作成し、それぞれに関連する画像のみを表示できるようにしたいと考えています。問題は、すべてのギャラリーが同じ画像を表示するタグ/ID がすべて同じであるためです。(問題の例については、... http://www.chartoonz.com/portfolio/illustration.htmlを参照してください) ご覧のように、基本的な機能は動作します。
あるギャラリーの機能をそのギャラリーに制限し、他のギャラリーをそのままにしておく Java スクリプトを取得するにはどうすればよいですか? 私は、jquery が $(document).ready を実行しているので、レンダリング時に発生するので、一度に 1 つのギャラリーしか実行できないと考えましたが、それはオンロード プレビュー イメージのみを考慮しています。どのサムネイル画像が押されてもすべてが同じことをしないように、ギャラリーを分離するにはどうすればよいですか? できますか？
私が言ったように、ループできると思っていましたが、それで問題が発生しています! すべての gallery_content タグを配列に取り込んでから、配列をループしようとしましたが、うまくいかなかったため、明らかにそうしていません。
問題を明確に表現できたことを願っています。どんな助けでも大歓迎です。これが私の関連するjavascriptです...
// What to do when the document is ready
$(document).ready(function(){
// Capture the thumbnail links
$('.gallery_thumbnails a').click(function(e){
// Disable standard link behavior
e.preventDefault();
// Fade out thumbnails
// Commented out to be in their own function (/**/)
/*
$('.gallery_thumbnails a').removeClass('selected');
$('.gallery_thumbnails a').children().css('opacity', '1');
$(this).addClass('selected');
$(this).children().css('opacity', '.4');
*/
// Add variables to link thumbnail to preview
var photo_caption = $(this).attr('title');
var photo_fullsize = $(this).attr('href');
var photo_preview = photo_fullsize.replace('_fullsize', '_preview');
$('.gallery_caption').slideUp(500);
$('.gallery_preview').fadeOut(500, function(){
// preload
$('.gallery_preload_area').html('<img src="'+photo_preview+'"/>');
$('.gallery_preload_area img').imgpreload(function(){
// Write the HTML into the page
$('.gallery_preview').html('<a class="overlaylink" href="'+photo_fullsize+'"
title="'+photo_caption+'" style="background-image:url('+photo_preview+');"></a>');
// Update the html for the gallery caption
$('.gallery_caption').html('<p><a class="overlaylink zoom" href="'+photo_fullsize+'"
title="'+photo_caption+'">View larger</a></p><p>'+photo_caption+'</p>')
$('.gallery_preview').fadeIn(500);
$('.gallery_caption').slideDown(500);
setFancyboxLinks();
updateThumbnails();
});
});
}
// Initialize the gallery on load
var first_photo_caption = $('.gallery_thumbnails a').first().attr('title');
var first_photo_fullsize =$('.gallery_thumbnails a').first().attr('href');
var first_photo_preview = first_photo_fullsize.replace('_fullsize', '_preview');
$('.gallery_caption').slideUp(500);
$('.gallery_preview').fadeOut(500, function(){
// preload
$('.gallery_preload_area').html('<img src="'+first_photo_preview+'"/>');
$('.gallery_preload_area img').imgpreload(function(){
// Write the HTML into the page
$('.gallery_preview').html('<a class="overlaylink" href="'+first_photo_fullsize+'" title=
"'+first_photo_caption+'" style="background-image:url('+first_photo_preview+');"></a>');
// Update the html for the gallery caption
$('.gallery_caption').html('<p><a class="overlaylink zoom" href="'+first_photo_fullsize+'"
title="'+first_photo_caption+'">View larger</a></p><p>'+first_photo_caption+'</p>')
$('.gallery_preview').fadeIn(500);
$('.gallery_caption').slideDown(500);
setFancyboxLinks();
updateThumbnails();
});
});