I need to do some jQuery-stuff on the active slide. Not in the pager, but in the main slider. After loading the page, there is a class 'views_slideshow_cycle_hidden' on all non active rows. So I thought, I can use that for targeting the active image, but the class doesn't update, when the slide is changing.
Is this a bug?

Comments

krabbe’s picture

Here is a short version of the generated html code:

<div class="view view-display-id-slideshow_block jquery-once-3-processed">    
      <div class="view-content">
        <div class="skin-default">
          <div class="views_slideshow_cycle_main views_slideshow_main viewsSlideshowCycle-processed"> <div style="position: relative;" id="views_slideshow_cycle_teaser_section_flexslider-slideshow_block" class="views-slideshow-cycle-main-frame views_slideshow_cycle_teaser_section">
            <div style="position: absolute; top: 0px; left: 0px; display: block; z-index: 10; opacity: 1;" id="views_slideshow_cycle_div_flexslider-slideshow_block_0" class="views-slideshow-cycle-main-frame-row views_slideshow_cycle_slide views_slideshow_slide views-row-1 views-row-odd">
              <div style="" class="views-slideshow-cycle-main-frame-row-item views-row views-row-0 views-row-first views-row-odd">
                <div class="slide-wrapper">
                  <div class="views-field views-field-field-foto">        
                    <div class="field-content">
                      <noscript class="adaptive-image adaptive-image-processed">
                        .....
                      </noscript>
                      <img style="" class="adaptive-image" data-adaptive-image-breakpoint="1500" typeof="foaf:Image" src="http://dev.kineofoto.de/sites/kineofoto.de/files/styles/slideshow_normalbig/public/fotos/-8908-2.jpg?itok=xR13-h1t" alt="" height="550" width="833">
                    </div>
                  </div>  
                  <div class="views-field views-field-title">        
                    <span class="field-content">Testphoto</span>  
                  </div>
                </div>
              </div>
            </div>
            <div style="position: absolute; top: 0px; left: 0px; display: none; z-index: 9; opacity: 0;" id="views_slideshow_cycle_div_flexslider-slideshow_block_1" class="views-slideshow-cycle-main-frame-row views_slideshow_cycle_slide views_slideshow_slide views-row-2 views_slideshow_cycle_hidden views-row-even">
              <div style="" class="views-slideshow-cycle-main-frame-row-item views-row views-row-0 views-row-first views-row-odd">
                <div class="slide-wrapper">
                  <div class="views-field views-field-field-foto">        
                    <div class="field-content">
                      <noscript class="adaptive-image adaptive-image-processed">
                        .....
                      </noscript>
                      <img class="adaptive-image" data-adaptive-image-breakpoint="1500" typeof="foaf:Image" src="http://dev.kineofoto.de/sites/kineofoto.de/files/styles/slideshow_normalbig/public/fotos/-6354.jpg?itok=6sKw7_Wl" alt="" height="550" width="763">
                    </div>
                  </div>  
                  <div class="views-field views-field-title">        
                    <span class="field-content">Photo 02</span>  
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

So, the first image is active, the second one is hidden and has the class 'views_slideshow_cycle_hidden'. When I click on a pager item the slide changes but the class doesn't.
For the pager items the active image class is changing with the slides, but in main slide nothing happens. The inline styles are changing for the slides and work as expected.
There is a first beta version online: http://kineofoto.de/album/portrait

nickBumgarner’s picture

Issue summary: View changes

Obviously this question was never answered and is quite old at this point. What was your solution here?

NickDickinsonWilde’s picture

Status: Active » Closed (works as designed)

There is no class applied, just styles. However you can still select in JavaScript with something like:
$('.views_slideshow_slide:visible')
Do not that depending on specific transitions and exact time that is run, that at times 2 slides from the same slideshow may be visible.