displaying div depending upon image class within slide gallery/carousel
<p>I have a slide gallery which adds a class <code>curSlide</code> to an image when it is being displayed within the gallery.</p>

<p>I have divs containing text corresponding to the slides within the gallery, ie. <code>#group2-text</code> should be displayed when a <code>.group2-img</code> has the class <code>curSlide</code>. Both gallery-text divs are set as <code>display: none</code> within the css. Is it possible to get jquery to display the correct div depending upon the <code>curSlide</code> class?</p>

<p>html: </p>

<pre><code>&lt;div class="page-content" id="projects-commercial-content"&gt;
  &lt;div class="gallery" id="projects-commercial-gallery"&gt;
    &lt;div class="gallery-holder"&gt;
      &lt;div id="projects-commercial-slides" class="slides"&gt; 
        &lt;img id="comm1" src="images/commercial1.jpg" class="slide-image group1-img" alt=""/&gt;
        &lt;img id="comm2" src="images/commercial2.jpg" class="slide-image group1-img" alt=""/&gt;
        &lt;img id="comm3" src="images/commercial3.jpg" class="slide-image group1-img" alt=""/&gt;
        &lt;img id="comm4" src="images/commercial4.jpg" class="slide-image group2-img" alt=""/&gt;
        &lt;img id="comm5" src="images/commercial5.jpg" class="slide-image group2-img" alt=""/&gt;
        &lt;img id="comm6" src="images/commercial6.jpg" class="slide-image group2-img" alt=""/&gt;
      &lt;/div&gt; 
    &lt;/div&gt;&lt;!--gallery-holder--&gt;
    &lt;div class="gallery-text" id="group1-text"&gt;
      &lt;h3&gt;project &lt;span class="abbrev"&gt;group 1&lt;/span&gt;&lt;/h3&gt;
      &lt;p&gt;Group 1 description text. Suspendisse ultricies molestie nisi id bibendum. Mauris bibendum ipsum at massa malesuada eu venenatis velit pretium.&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="gallery-text" id="group2-text"&gt;
      &lt;h3&gt;project &lt;span class="abbrev"&gt;group 2&lt;/span&gt;&lt;/h3&gt;
      &lt;p&gt;Group 2 description text etc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse imperdiet justo ac ligula congue posuere. Aliquam erat volutpat &lt;/p&gt;
    &lt;/div&gt;&lt;!--gallery-text--&gt;
  &lt;/div&gt;&lt;!--gallery--&gt;
&lt;/div&gt;&lt;!--page-content--&gt;
</code></pre>

<p>The part of the gallery js adding the class is here:</p>

<pre><code>    _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));
    },
</code></pre>

<p>I didn't write the gallery js and I'm not really sure how to adapt it to display the corresponding div/text.</p>

<p>Any help is much appreciated! Please let me know if more details are required. TIA!</p>
