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 719 posts 1207 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 719 posts 1207 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 719 posts 1207 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 719 posts 1207 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 :)

Please Sign in or register to post replies

Write your reply to:

Draft