BGD Posted April 30, 2010 Report Share Posted April 30, 2010 Hi all, Perhaps the thread title refers to the same thing (or at least it seems that way to me)but I'd like to add a scrolling image bar to my website to include a few photos and a link to a video I hope to upload to Vimeo and embed. How can I do this i.e. the scrolling box element? I went to Adobe Exchange and there seemed to be a bunch of XML designed files I could purchase and install but it was above my knowledge level. I have also been looking at this site and perhaps I'll be able to stumble through the instructions. is there a better (easier / newbie) way? Thanks in advance, Ben P.S. there seems to be many types out there. here's one I think works OK for instance.. Quote Link to comment Share on other sites More sharing options...
falkencreative Posted May 1, 2010 Report Share Posted May 1, 2010 My personal favorite is the jquery Cycle plugin: http://jquery.malsup.com/cycle/ or Cycle lite (less features than Cycle, but smaller file size) http://jquery.malsup.com/cycle/lite/ Both use the jquery library and are very easy to implement. Quote Link to comment Share on other sites More sharing options...
BGD Posted May 1, 2010 Author Report Share Posted May 1, 2010 Thanks Benjamin, I guess easy when you know how. Is there somewhere you could point me to learn how to write / add the code for this plug-in rather than buying JQuery for Dummies or something? Thanks Quote Link to comment Share on other sites More sharing options...
falkencreative Posted May 1, 2010 Report Share Posted May 1, 2010 All you need to do is look at the demo source code. For example, this is the code from the basic demo: (http://jquery.malsup.com/cycle/basic.html'>http://jquery.malsup.com/cycle/basic.html) <!DOCTYPE html> <html> <head> <title>JQuery Cycle Plugin - Basic Demo</title> <style type="text/css"> .slideshow { height: 232px; width: 232px; margin: auto } .slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; } </style> <!-- include jQuery library --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <!-- include Cycle plugin --> <script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.72.js"></script> <script type="text/javascript"> $(document).ready(function() { $('.slideshow').cycle({ fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc... }); }); </script> </head> <body> <div class="slideshow"> <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" /> <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" /> <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" /> <img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" /> <img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" /> </div> </body> </html> To get this working, you need a couple things: -- to include the jquery library, either linking to the Google hosted version, as this example does ("<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>") or downloading it from jquery.com. -- to include the cycle plugin, available for download from the link I provided ("<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.72.js"></script>") -- a block of javascript code that initializes the plugin with whatever settings you want: <script type="text/javascript"> $(document).ready(function() { $('.slideshow').cycle({ fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc... }); }); </script> The '.slideshow' section is what you would need to change -- you'd replace it with the name of your class (".yourclass") or an id ("#yourid") that you want to rotate. The "fx: 'fade'" section sets the options for this plugin. This example uses the most basic options, but you can look at the demos at the bottom of http://jquery.malsup.com/cycle/ for more options -- finally, you need a section of code that you want to rotate. For example: <div class="yourclass"> //any repeated elements inside of here will rotate -- divs, images, etc. In this case, I'll use divs: <div><img src="your image"/></div> <div><img src="your image"/></div> <div><img src="your image"/> <a href="#">Your link</a></div> </div> You might want to take a glance at parts 1 and 2 of the "Getting jQuery" video tutorials available here http://www.killerjavascript.com/beginners-jquery/ as way to get you started with some of the basics. Quote Link to comment Share on other sites More sharing options...
BGD Posted May 2, 2010 Author Report Share Posted May 2, 2010 Many thanks Benjamin for all your help Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.