画像に3つのサイズがある比較的単純なギャラリーを作成しようとしています: -
- フルサイズ - これは、モーダル表示に「colorbox」を使用することにリンクされています
- mediumsize - ページにはこれらの 1 つだけがあり、カラーボックスをトリガーするためにクリックされたものです
- サムネイル - これらは中サイズの画像の下にあります。これらをクリックすると、中サイズの画像が関連する画像に置き換えられ (クリックされたサムネイルによって異なります)、中画像のカラーボックス リンクの href も置き換えられます。
これが私がこれまでに得たもので、単純化されています。ファイル名/パスはこれほど単純ではないことに注意してください。そのため、それらの操作を解決策として使用することはできません。
<script type="text/javascript">
$(document).ready(function() {
//gallery image swap
$("#gallery a").click(function(){
$('#main-img').attr('href',$(this).attr('href'));
// swap image with fade in-out
var src = $(this).attr("rel");
$("#themediumimage").fadeOut(50, function() {
$(this).attr("src", src).fadeIn(300);
});
});
});
</script>
<a class="colorbox" href="path/to/mainimage_fullsize.jpg" rel="colorbox-gallery" id="main-img"><img border="0" id="themediumimage" src="path/to/mainimage_mediumsize.jpg" /></a>
<a class="colorbox" href="path/to/extraimage1_fullsize.jpg" rel="colorbox-gallery"></a>
<a class="colorbox" href="path/to/extraimage2_fullsize.jpg" rel="colorbox-gallery"></a>
<a class="colorbox" href="path/to/extraimage3_fullsize.jpg" rel="colorbox-gallery"></a>
<a class="colorbox" href="path/to/extraimage4_fullsize.jpg" rel="colorbox-gallery"></a>
<a class="colorbox" href="path/to/extraimage5_fullsize.jpg" rel="colorbox-gallery"></a>
<div id="gallery">
<a href="path/to/mainimage.jpg" rel="path/to/mainimage_mediumsize.jpg"><img src="path/to/mainimage_thumbnail.jpg" onclick="javascript: return false;" style="cursor:pointer;" /></a>
<a href="path/to/extraimage1.jpg" rel="path/to/extraimage1_mediumsize.jpg"><img src="path/to/extraimage1_thumbnail.jpg" onclick="javascript: return false;" style="cursor:pointer;" /></a>
<a href="path/to/extraimage2.jpg" rel="path/to/extraimage2_mediumsize.jpg"><img src="path/to/extraimage2_thumbnail.jpg" onclick="javascript: return false;" style="cursor:pointer;" /></a>
<a href="path/to/extraimage3.jpg" rel="path/to/extraimage3_mediumsize.jpg"><img src="path/to/extraimage3_thumbnail.jpg" onclick="javascript: return false;" style="cursor:pointer;" /></a>
<a href="path/to/extraimage4.jpg" rel="path/to/extraimage4_mediumsize.jpg"><img src="path/to/extraimage4_thumbnail.jpg" onclick="javascript: return false;" style="cursor:pointer;" /></a>
<a href="path/to/extraimage5.jpg" rel="path/to/extraimage5_mediumsize.jpg"><img src="path/to/extraimage5_thumbnail.jpg" onclick="javascript: return false;" style="cursor:pointer;" /></a>
</div>
これは非常にうまく機能し、サムネイルをクリックすると「中」画像が変更され、新しい中画像をクリックすると、正しいフルサイズの画像がカラーボックスモーダルに表示されます。
唯一の問題は、たとえば 3 番目のサムネイルをクリックしてから中間の画像をクリックすると、正しいフルサイズの画像が表示されますが、「画像 1/6」と正しく参照されず、「画像 3/6」と正しく参照されることです。 "カラーボックスの戻る/進むボタンを進むとき。つまり、カラーボックス シーケンスは次のように変更されます。
#3 #2 #3 #4 #5 #6
元のナンバーワンはシーケンスから完全になくなりました。なぜこれが起こっているのかはわかっています.私が持っているJavaScriptは、画像＃1のsrcとhrefを完全に置き換えています.
私は自分が理想的に望んでいるものに本当に近いと感じていますが、「中」画像が＃3に変更されると、それをクリックすると「画像3/6」のカラーボックスが表示され、＃1は引き続き表示されますカラーボックス シーケンスの適切な場所に配置します。
画像の数は変更できますが、常に 2、3、4、5、または 6 になります。
どんな助けでも大歓迎です！
編集: jQuery 1.4.4 を使用します。