1 Reply Latest reply: May 28, 2013 4:10 PM by Nancy O. RSS

    using the same script twice but different options on a single page

    westwm Community Member

      having a hard time figuring out how to run the cycle script which is in use on one portion of my webpage as a slider gallery under my header, but i'd also like to use it in  a small are in the upper right of the same page but with a different transition, to showcase specific products in a gallery.

       

      how do i accomplish this? I've been to the cycle plugin page http://malsup.com/jquery/cycle/begin.html but am having trouble interpreting their page source syntax

       

      in my head section i have the following declared:

       

      <script type="text/javascript" src="../js/jquery.cycle.all.latest.js"></script>

      <script type="text/javascript">

      $(document).ready(function() {

          $('.slideshow').cycle({

              fx: 'shuffle' // choose your transition type, ex: fade, scrollUp, shuffle, etc...

          });

      });

      </script>

       

      and in my body its invoked simply by:

       

      <div class="slideshow">

                  <img src="../images/splash1.jpg" width="761" height="210" />

                  <img src="../images/splash2.jpg" width="761" height="210" />

                  <img src="../images/splash3.jpg" width="761" height="210" />

                  <img src="../images/splash4.jpg" width="761" height="210" />

                  <img src="../images/splash5.jpg" width="761" height="210" />

      </div>

       

      now should i change the head function to

       

       

      <script type="text/javascript" src="../js/jquery.cycle.all.latest.js"></script>

      <script type="text/javascript">

      $(function() {

          // run the code in the markup!

          $('td pre code').each(function() {

              eval($(this).text());

          });

      });

      </script>

       

      and how would i later invoke this the body here?

       

      <div class="slideshow">

                  <img src="../images/splash1.jpg" width="761" height="210" />

                  <img src="../images/splash2.jpg" width="761" height="210" />

                  <img src="../images/splash3.jpg" width="761" height="210" />

                  <img src="../images/splash4.jpg" width="761" height="210" />

                  <img src="../images/splash5.jpg" width="761" height="210" />

      </div>

       

      <pre><code class="mix">$('#s1').cycle('fade');</code></pre> - this is what they do on their wepage but i dont understand what this <pre><code class="mix"... is all about.

       

      can someone please explain

       

      thanks

        • 1. Re: using the same script twice but different options on a single page
          Nancy O. CommunityMVP

          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.