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

나는 갤러리 JS를 작성하지 않은 내가 적응하는 방법을 정말 잘 모르겠어요 해당 div/텍스트를 표시합니다.

도움을 주시면 감사하겠습니다. 자세한 내용이 필요한 경우 알려 주시기 바랍니다. 티아!

Answer 1

아직 테스트하지 않았지만 시도해보십시오.

HTML 코드를 수정 : 불행하게도 테스트 할 수 없습니다, 당신은이 아이디어를 시도 할 수 있습니다

_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

갤러리 스크립트의 일부를 수정

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

: 코드의

<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 조각을