我有一个幻灯片库,可以在图片库中显示时为图片添加课程curSlide
。
我的div包含与图库中幻灯片相对应的文本,即。当#group2-text
拥有班级.group2-img
时,应显示curSlide
。两个gallery-text div都在css中设置为display: none
。是否有可能让jquery根据curSlide
类显示正确的div?
html:
<div class="page-content" id="projects-commercial-content">
<div class="gallery" id="projects-commercial-gallery">
<div class="gallery-holder">
<div id="projects-commercial-slides" class="slides">
<img id="comm1" src="images/commercial1.jpg" class="slide-image group1-img" alt=""/>
<img id="comm2" src="images/commercial2.jpg" class="slide-image group1-img" alt=""/>
<img id="comm3" src="images/commercial3.jpg" class="slide-image group1-img" alt=""/>
<img id="comm4" src="images/commercial4.jpg" class="slide-image group2-img" alt=""/>
<img id="comm5" src="images/commercial5.jpg" class="slide-image group2-img" alt=""/>
<img id="comm6" src="images/commercial6.jpg" class="slide-image group2-img" alt=""/>
</div>
</div><!--gallery-holder-->
<div class="gallery-text" id="group1-text">
<h3>project <span class="abbrev">group 1</span></h3>
<p>Group 1 description text. Suspendisse ultricies molestie nisi id bibendum. Mauris bibendum ipsum at massa malesuada eu venenatis velit pretium.</p>
</div>
<div class="gallery-text" id="group2-text">
<h3>project <span class="abbrev">group 2</span></h3>
<p>Group 2 description text etc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse imperdiet justo ac ligula congue posuere. Aliquam erat volutpat </p>
</div><!--gallery-text-->
</div><!--gallery-->
</div><!--page-content-->
画廊js添加课程的部分在这里:
_fade: function (navigateData) {
// put hidden to slide above current
this.slides.eq( navigateData.to ).addClass('curSlide').css({
zIndex: 10
// fade in next
}).fadeIn(this.options.fade.interval, this.options.fade.easing, $.proxy(function(){
// hide previous
navigateData.currentSlide.removeClass('curSlide').css({
display: "none",
zIndex: 0
});
// reset zindex
this.slides.eq( navigateData.to ).css({
zIndex: 0
});
this.current = navigateData.to;
this._trigger("navigateEnd", ( this.current + 1 ), this);
}, this));
},
我没有写画廊js,我不确定如何调整它以显示相应的div / text。
非常感谢任何帮助!如果需要更多详细信息,请与我们联系。 TIA!
答案 0 :(得分:1)
我没有测试过这个,但试一试。修改图库脚本的一部分
_fade: function (navigateData) {
//hide text and show new text
$('.gallery-text').css('display','none');
var curImgClass = $(this.slides.eq( navigateData.to )).attr('rel');
$('#' + curImgClass + '-text').css('display','block');
// put hidden to slide above current
this.slides.eq( navigateData.to ).addClass('curSlide').css({
zIndex: 10
// fade in next
}).fadeIn(this.options.fade.interval, this.options.fade.easing, $.proxy(function(){
// hide previous
navigateData.currentSlide.removeClass('curSlide').css({
display: "none",
zIndex: 0
});
// reset zindex
this.slides.eq( navigateData.to ).css({
zIndex: 0
});
this.current = navigateData.to;
this._trigger("navigateEnd", ( this.current + 1 ), this);
}, this));
},
答案 1 :(得分:0)
你可以尝试这个想法,遗憾的是无法测试:
修改了HTML代码:
<div class="page-content" id="projects-commercial-content">
<div class="gallery" id="projects-commercial-gallery">
<div class="gallery-holder">
<div id="projects-commercial-slides" class="slides">
<img id="comm1" src="images/commercial1.jpg" class="slide-image" alt="" rel="group1"/>
<img id="comm2" src="images/commercial2.jpg" class="slide-image group1-img" rel="group1" alt=""/>
<img id="comm3" src="images/commercial3.jpg" class="slide-image group1-img" rel="group1" alt=""/>
<img id="comm4" src="images/commercial4.jpg" class="slide-image" rel="group2" alt=""/>
<img id="comm5" src="images/commercial5.jpg" class="slide-image" rel="group2"alt=""/>
<img id="comm6" src="images/commercial6.jpg" class="slide-image" rel="group2" alt=""/>
</div>
</div><!--gallery-holder-->
<div class="gallery-text" id="group1">
<h3>project <span class="abbrev">group 1</span></h3>
<p>Group 1 description text. Suspendisse ultricies molestie nisi id bibendum. Mauris bibendum ipsum at massa malesuada eu venenatis velit pretium.</p>
</div>
<div class="gallery-text" id="group2">
<h3>project <span class="abbrev">group 2</span></h3>
<p>Group 2 description text etc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse imperdiet justo ac ligula congue posuere. Aliquam erat volutpat </p>
</div><!--gallery-text-->
</div><!--gallery-->
</div><!--page-content-->
JS代码:
_fade: function (navigateData) {
// put hidden to slide above current
$(".gallery-text").hide();
this.slides.eq( navigateData.to ).addClass('curSlide').css({
zIndex: 10
// fade in next
}).fadeIn(this.options.fade.interval, this.options.fade.easing, $.proxy(function(){
// hide previous
var detElement = this.getAttribute('rel');
$(".gallery-text[rel="+detElement+"]").fadeIn();
navigateData.currentSlide.removeClass('curSlide').css({
display: "none",
zIndex: 0
});
// reset zindex
this.slides.eq( navigateData.to ).css({
zIndex: 0
});
this.current = navigateData.to;
this._trigger("navigateEnd", ( this.current + 1 ), this);
}, this));