[英]jQuery update main image caption with thumb image caption on click event
我試圖在單擊事件時加載縮略圖的數據標題,然后在更改縮略圖的主圖像時更新主圖像的數據標題。 似乎無法獲得隨圖像變化而更新的數據標題。
jQuery(document).ready(function() {
jQuery('.thumbnail').on('click', function() {
jQuery('#mainImage').hide();
jQuery('#mainImageContainer').css('background-image', "url('images/loading.gif')");
var i = jQuery('<img />').attr('src',this.href).attr('caption',this.data).load(function() {
jQuery('#mainImage').attr('src', i.attr('src')).attr('caption', i.attr('caption'));
jQuery('#mainImageContainer').css('background-image', 'none');
jQuery('#mainImage').fadeIn();
jQuery('.fancybox').attr('href', i.attr('src'));
jQuery("a[href$='.jpg'],a[href$='.jpeg']").attr('rel', 'gallery').fancybox();
});
return false;
});
jQuery('.fancybox').fancybox();
});
<div id="mainImageContainer">
<a class="fancybox" href="main-image.jpg">
<img id="mainImage" src="main-image.jpg" data-caption="main image caption" />
</a>
</div>
<ul>
<li>
<a class="thumbnail" href="thumb-image-1.jpg">
<img class="thumbImages" src="thumb-image-1.jpg" data-caption="thumb image 1 caption" />
</a>
</li>
<li>
<a class="thumbnail" href="thumb-image-2.jpg">
<img class="thumbImages" src="thumb-image-2.jpg" data-caption="thumb image 2 caption" />
</a>
</li>
<li>
<a class="thumbnail" href="thumb-image-3.jpg">
<img class="thumbImages" src="thumb-image-3.jpg" data-caption="thumb image 3 caption" />
</a>
</li>
</ul>
我不確定this.data
將返回什么。 但是通常情況下,如果要避免從元素的data-
attribute加載值和jQuery的數據對象/事物之間混淆。 嘗試顯式調用$(this).attr("data-caption")
這可能會使您朝正確的方向前進(盡管已對此進行了測試):
var $this = $(this);
var captionValue = $this.attr("data-caption");
var i = jQuery('<img />').attr('src',this.href).attr('caption',captionValue);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.