Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Bo Damgaard Mortensen 712 posts 1189 karma points
    Dec 30, 2010 @ 16:46
    Bo Damgaard Mortensen
    0

    Creating an image-slider from content - a job for /base?

    Hi Umbracians!

    I'm currently working on a project where I need to create an image-slider using JavaScript (jQuery in this case). The content that's going to be used for the slider comes from the childnodes of the node "Reklamer" in Umbraco like this:

    The properties I have on these nodes are: textstring (header), bodytext (rich text editor) and a media picker.

    The end result on the frontend will have to look something like this:

    So every 10 second (or so) the content need to fade out and the next will fade in.

    What I have been considering to do is to combine jQuery and /base for this. A simple C# method that gets the XML data for a given node by id (which in this case will be a childnode of "Reklamer")

    However, what struck me is if I have, say, 20+ nodes and I'm calling the above mentioned method every 10th second, wouldn't that be quite a lot of traffic to the database, or am I wrong about this?

    Hope it make sense! If not, please let me know and I will try to elaborate :)

    Thanks in advance!

    / Bo

  • bob baty-barr 1180 posts 1294 karma points MVP
    Dec 30, 2010 @ 17:07
    bob baty-barr
    0

    @Bo...

    i make these conent rotators all the time... using jqueryCycle() -- awesome plugin!

    anyway, it takes a list or series of divs and rotates them... i use plain old xslt to render out a ul li list or a series of divs, etc. -- nothing special at all... and let jquery cycle take care of the rest.

    let me know if that provides another option for your consideration.

  • Bo Damgaard Mortensen 712 posts 1189 karma points
    Dec 30, 2010 @ 19:28
    Bo Damgaard Mortensen
    1

    Beautiful ! I didn't know of the jQuery Cycle plugin, that makes everything a lot easier :) And it works right out of the box aswell - just great! Thanks a lot Bob! Greatly appreciated!

  • bob baty-barr 1180 posts 1294 karma points MVP
    Dec 30, 2010 @ 19:36
    bob baty-barr
    0

    AWESOME... glad it was what you were looking for! i have created some pretty crazy little rotators with cycle and absolutely love it...

    feel free to ask if you have any questions... just a quick hint...

    the onBefore() and onAfter() hooks are great for animating in teh text, panels, etc.

    Have FUN!

  • Bo Damgaard Mortensen 712 posts 1189 karma points
    Dec 30, 2010 @ 20:10
    Bo Damgaard Mortensen
    0

    Indeed, that's really a powerful plugin! :) 

    However, I am missing one feature in it: to be able to control the delay for each element being shown. The delay parameter seems to only affect the first slide :/ I have looked through the options for the plugin but couldn't find anything on this. Am I missing out something here, or do you perhaps know of a 'fix' for this? ;)

    Thanks again!

    All the best,

    Bo

  • bob baty-barr 1180 posts 1294 karma points MVP
    Dec 30, 2010 @ 20:16
    bob baty-barr
    0

    @Bo

    check the reference page here... http://jquery.malsup.com/cycle/options.html

    and look specifically at the delay parameter... i think that is what you need -- note, it can be negative too :)

  • bob baty-barr 1180 posts 1294 karma points MVP
    Dec 30, 2010 @ 20:19
    bob baty-barr
    0

    doh, sorry... i did not read your post very well... i see that you already have the delay param located...

    check out the last item on the faq page... that might be a better solution :)

    http://jquery.malsup.com/cycle/faq.html

     

  • bob baty-barr 1180 posts 1294 karma points MVP
    Dec 30, 2010 @ 20:22
    bob baty-barr
    0

    so baically, you can do another for-each loop to just grab the delay in seconds [a property on your content node] to create the delay array [hey that rhymes :)]

    i would recommend a default in your scripting as well...

    there is a nice example here...

    http://jquery.malsup.com/cycle/timeout2.html

     

  • Bo Damgaard Mortensen 712 posts 1189 karma points
    Dec 30, 2010 @ 20:46
    Bo Damgaard Mortensen
    0

    Thanks a lot, the timeout function was really neat! But I figured out I just needed to set timeout: 10000 on my cycle(), I guess I mixed up "timeout" and "delay" - everything works as a charm! 

    Thanks for your help :)

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies