vendredi 29 juillet 2016

Loop through divs and sub-divs (slideshow like) jQuery

I'm trying to loop through sub and sub-divs in the example below :

http://ift.tt/2ajHCi1

I want to display the widget-text classes one by one in each widget with the duration which is specified in the data property (data-duration).

Example: t = 0

  • => The first widget-text class in the widget-1 class will appear for the 2 seconds then fadeOut and shows the next widget-text in the same .widget-1 class
  • => The first widget-text class in the widget-2 class will appear for the 5 seconds then fadeOut and shows the next widget-text in the same .widget-2 class

I've tried that but it doesn't work when the duration is the not the same between the widget-text, plus I'm not quite sure if it's the right logic (in this example I get the duration dynamically but I could pass it in the data property like in this jsfiddle example)

    widgetsThatHasWidgetText.each ->
      widget_view = $(this)        
      currentInterval = 1000
      slideShowDivs = $(this).find('.widget-text')          
      $(this).find('.widget-text').each ->
        pageNumber = $(this).data('page-number')
        widgetId = $(this).data('widget-id')
        currentWidget = $(widgets).filter (i, n) ->
                        n.id == parseInt(widgetId)
        currentInterval = currentWidget[0].get_real_duration_for_widgets_text[pageNumber.toString()]
        @widgetTextInterval = setInterval =>
          self.cycleDivs(widget_view)
        , currentInterval
        self.widgetTextIntervals.push(@widgetTextInterval)


    cycleDivs:(widgetView) ->
      console.log 'CYCLE EXCETUED'
      $active = $(widgetView).find('.active')
      $next = if $active.next().length > 0 then $active.next() else $(widgetView).find('.widget-text:first')
      $next.css 'z-index', 2
      #move the next image up the pile
      $active.fadeOut 200, ->
        #fade out the top image
        $active.css('z-index', 1).show().removeClass 'active'
        #reset the z-index and unhide the image
        $next.css('z-index', 3).addClass 'active'
        #make the next image the top one
        return
      return

Can someone help to figure out how can I do that ?

Thank you,




Aucun commentaire:

Enregistrer un commentaire