根据幻灯片库/轮播中的图像类显示 div

Question

我有一个幻灯片库，当图像在画廊中显示时，它会向图像添加一个类 curSlide。

我有包含与画廊中的幻灯片相对应的文本的 div，即。当.group2-img 具有类curSlide 时，应显示#group2-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));
    },

gallery js 不是我写的，我不确定如何调整它以显示相应的 div/text。

非常感谢任何帮助！如果需要更多详细信息，请告诉我。蒂亚！

Answer 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));
},

Answer 2

你可以试试这个想法，可惜不能测试：

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));