0

I need to build a multimedia player with images coming at specific times and some of them showing in a loop pattern. I could not find a library that did it the way my client wants it to work so I'm building one myself.

I ran into a silly problem I can't handdle :-( No amount of Googling helped in any way.

I've tried countless permutations but here is an example of my Coffeescript function:

    # The slideshow
  showImages = (current_time, exercise) ->
    for timing, img of exercises[exercise].animation
      # string to float -> to float with one decimal
      if current_time >= timing and current_time < (+timing + 0.2).toFixed(1) and current_time > 0.5
        this_id = '' + img + '-' + timing.replace '.', '-'n + ''
        activeId = $('#slideshow img.active').first().attr('id')
        eval("$('#" + activeId + "').fadeOut(500).removeClass('active')")
        eval("$('#" + this_id + "').addClass('active')")     
        break

This code is pretty bad in a number of ways and you can feel free to improve it but here is my main problem:

  • The image which has the active class and which is on top of the stack is faded out. Good.
  • That same image has the active class removed. Good.
  • The new image on top of the stack (with the #this_id) gets the active class. Good.
  • That same new image is then faded out!!! Not good at all.

The code use to be more simple but my desperate attempt at debugging made it much uglier.

Please note that I did research the waiting of a function to complete before launching the next one but was not able to implement the recommendations for this example.

Thanks in advance for your help.

allesklar
  • 9,506
  • 6
  • 36
  • 53
  • [Don't use eval!](https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/eval#Don.27t_use_eval.21). other than that, you need to adapt the timeout (500) for the images (500 for first, 1000 for next, ...). Even better, wait for the timeout until the element has hide. – Zeta May 28 '13 at 14:43
  • Take a look at the project I'm working on called LYT. It's at github.com/Notalib/LYT - a full blown audio book player in Coffeescript. Note that the code is Open Source, but still copyright. – mzedeler May 28 '13 at 17:24
  • When is this function called? You should attach to the audio elements ``timeupdate`` event. – mzedeler May 28 '13 at 17:25
  • Thank you guys for taking the time to write these comments. As no answers came to this question, I have simplified the question and rephrased it there: http://stackoverflow.com/questions/16811524/need-help-implementing-the-sequencing-of-jquery-instructions – allesklar May 29 '13 at 10:30

0 Answers0