私はJSとjQueryにかなり慣れていないので、これにこだわっています。
私は e コマースを行っており、製品の詳細を表示するページを持っています。サムネイルのカルーセルがあります。サムネイルをクリックすると、メインの画像が選択した画像に置き換えられます。
次に、ページの別の部分にいくつかの小さなカラー ボックスがあります。そのうちの 1 つ (例: 赤) を選択すると、サムネイルのリストがフィルター処理され、赤のサムネイルのみが表示されます。これは、カラー ボックスのクラス値をサムネイル画像のクラス値に一致させるカスタム スクリプトを介して行われます。
私が苦労しているのは、選択した色の大きな画像も表示しようとしていることです。正しい使用例は次のとおりです。
- ユーザーが製品ページを開く
- Big Image Viewer には、Red バージョンの写真などの Big image が表示されます (カルーセルの最初のサムネイルに対応)。これで問題ありません。
- カルーセルには 5 つのサムネイルが表示されます。そのうち 3 つは商品の赤バージョンに対応し、2 つは黄色バージョンに対応します - これで問題ありません
- ユーザーがカルーセルで遊ぶ: サムネイルをクリックすると、対応する大きな画像が表示されます - これで問題ありません
- ユーザーは色でフィルタリングすることを決定し、黄色の小さなカラー ボックスをクリックします。これで問題ありません。
- カルーセルがフィルタリングされ、製品の黄色バージョンのサムネイルのみが表示されます - これは問題ありません
- 5. と同時に、フィルタリングされたリストの最初のサムネイルに対応する大きな画像がトリガーされ、大きな画像ビューアにポップアップする必要があります。これは私が苦労していることです。
大きな画像ビューア + カルーセルのコードは次のとおりです。
<div id="product">
<!-- BIG IMAGE VIEWER - The first that gets loaded is the first big image corresponding to the first thumbnail -->
<div id="productimg"><a href="full_size_red_01.jpg" class="cloud-zoom" id="zoom1" rel="position: 'inside', showTitle: false"><img src="big-red_01.jpg" alt="" title="M1" /></a></div>
<!-- END BIG IMAGE VIEWER -->
<div id="productdet">
<!-- THUMBNAILS CAROUSEL -->
<ul id="mycarousel" class="jcarousel-skin-tango">
<li><a href='full_size_red_01.jpg' class='cloud-zoom-gallery' rel="useZoom: 'zoom1', smallImage: 'big_red_01.jpg' " title='M1'><img src="thumb_red_01.jpg" alt="M1" class="Rosso/Red" /></a></li>
<li><a href='full_size_red_02.jpg' class='cloud-zoom-gallery' rel="useZoom: 'zoom1', smallImage: 'big_red_02.jpg' " title='M1'><img src="thumb_red_02.jpg" alt="M1" class="Rosso/Red" /></a></li>
<li><a href='full_size_red_03.jpg' class='cloud-zoom-gallery' rel="useZoom: 'zoom1', smallImage: 'big_red_03.jpg' " title='M1'><img src="thumb_red_03.jpg" alt="M1" class="Rosso/Red" /></a></li>
<li><a href='full_size_yellow_01.jpg' class='cloud-zoom-gallery' rel="useZoom: 'zoom1', smallImage: 'big_yellow_01.jpg' " title='M1'><img src="thumb_yellow_01.jpg" alt="M1" class="Rosso/Red" /></a></li>
<li><a href='full_size_yellow_02.jpg' class='cloud-zoom-gallery' rel="useZoom: 'zoom1', smallImage: 'big_yellow_02.jpg' " title='M1'><img src="thumb_yellow_02.jpg" alt="M1" class="Rosso/Red" /></a></li>
</ul>
<!-- END THUMBNAILS CAROUSEL -->
</div>
色選択ツールのコードは次のとおりです。
<div class="controls color">
<label class="Rosso/Red"><input type="radio" name="modifiers[1]" value="1" /> Rosso/Red</label>
<label class="Giallo/Yellow"><input type="radio" name="modifiers[1]" value="2" /> Giallo/Yellow</label>
</div>
</div>
サムネイル + 大きな画像ビューアのロジックは、jcarousel を介して管理されます。
サムネイルのフィルタリングを管理するカスタム js は次のとおりです。
var select = {
wrapper: null,
controls: null,
resetBtn: $('<p id="reset">Vedi tutti i colori</p>'),
images: null,
carousel: null,
carouselBtns: null,
isClickable: false,
init: function(){
this.carousel = $('#mycarousel');
this.wrapper = $('#productdet');
this.controls = $('div.controls');
this.images = this.wrapper.find('img');
},
filter: function(){
this.controls.on('click', 'input[type="radio"]', function(){
select.carouselBtns = select.wrapper.find('div.jcarousel-clip').nextAll('div');
var filterName = $(this).closest('label').attr('class').split('/')[0],
filteredImg = select.wrapper.find('img[class*="'+filterName+'"]'),
itemLen = select.wrapper.find('li').length;
if( filteredImg.length ){
select.controls.find('label').removeClass('on');
$(this).closest('label').addClass('on');
select.images.closest('li').hide();
select.wrapper.find('div.jcarousel-clip').nextAll('div.jcarousel-prev').click();
filteredImg.closest('li').show(0, function(){
if ( filteredImg.length < 5 ) {//itemLen
select.carouselBtns.hide();
}
});
}
select.isClickable = true;
select.preventItemAdding();
});
},
preventItemAdding: function(){
var add = $('#add');
if ( !select.isClickable ) {
add.addClass('off');
}else{
add.removeClass('off');
}
},
resetAll: function(){
select.resetBtn.click(function(){
select.controls.find('label').removeClass('on');
select.images.closest('li').show();
select.carousel.jcarousel('reload');
select.carouselBtns.show();
select.isClickable = false;
select.preventItemAdding();
});
}
};
どんな助けでも大歓迎です。ありがとうございました！！
解決
JS の「filter」関数に数行追加しました (@vrutberg に感謝)。
var imageUrl = $(".jcarousel-item:visible:eq(0) .cloud-zoom-gallery").attr("rel").substr(31).slice(0, -2);
$("#productimg #wrap #zoom1 img").attr("src", imageUrl);