This content has been marked as final.
Show 1 reply
-
1. Re: using the same script twice but different options on a single page
Nancy O. May 28, 2013 4:10 PM (in response to westwm)I recommend using Cycle2 instead of the old Cycle Plugin. Out of the box, Cycle2 is better and has more features. Just copy & paste the following code into a new document.
<!doctype html> <html> <head> <meta charset="utf-8"> <title>HTML5 Document with Cycle2</title> <!--HTML5 help for older IE browsers--> <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--> <!--Latest jQuery Core Library--> <script src="http://code.jquery.com/jquery-latest.min.js"> </script> <!--Cycle2 Slideshow--> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20130409/jquery.cycle2.min.js"></script> <style> body {width: 900px;margin: 0 auto} /**Slideshow**/ .cycle-slideshow { margin: 0; padding: 0; width:500px; border: 1px solid silver; margin: 0 auto; } .cycle-slideshow img { width: 500px; margin: 0 auto } .center { text-align: center } </style> </head> <body> <!--begin 1st slideshow--> <div class="cycle-slideshow" data-cycle-fx="swipe" data-cycle-pause-on-hover="true" data-cycle-speed="2200" > <img src="http://malsup.github.com/images/p1.jpg" alt=""> <img src="http://malsup.github.com/images/p2.jpg" alt=""> <img src="http://malsup.github.com/images/p3.jpg" alt=""> <img src="http://malsup.github.com/images/p4.jpg" alt=""> <!--end 1st slideshow--></div> <p> </p> <p> </p> <!--begin 2nd slideshow--> <div class="center"> <a href=# id=next>Next</a> </div> <div class="cycle-slideshow" data-cycle-fx="fadeout" data-cycle-timeout="3000" data-cycle-next="#next" data-cycle-manual-fx="scrollHorz" data-cycle-manual-speed="300" > <img src="http://malsup.github.com/images/p1.jpg" alt=""> <img src="http://malsup.github.com/images/p2.jpg" alt=""> <img src="http://malsup.github.com/images/p3.jpg" alt=""> <img src="http://malsup.github.com/images/p4.jpg" alt=""> <!--end 2nd slideshow--></div> </body> </html>Use whichever effects you prefer:
http://www.malsup.com/jquery/cycle2/demo/shuffle.php
Nancy O.



