5 Replies Latest reply on Oct 20, 2011 9:16 AM by cenelson_stateline7

    Randomize slideshow (using Jquery)

    cenelson_stateline7

      I am working on a slideshow for the first page of my company's website using the very basic jquery widgit. It gives me exactly the look I want- nothing fancy. The problem I am running into is that the slideshow always begins with the same image (the images are of project photos, and we don't want any client to feel that they are less important because their project image is last in the slideshow). Is there any way to randomize the order in which the slideshow runs through the images? Here is my current code:

       

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/Stateline_template.dwt" codeOutsideHTMLIsLocked="false" -->
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <!-- InstanceBeginEditable name="doctitle" -->
      <title>Stateline No. 7 Architects</title>
      <style type="text/css">
      /* BeginOAWidget_Instance_2559022: #slideshow */

      a img { border:1px solid black; }

      a:hover img { border:1px solid black; }


         #slideshow {
      padding: 0px;
      margin-top: 0;
      margin-bottom: 0;
         }
         #slideshow-caption{
          padding:0;
          margin:0;
         }

         #slideshow img, #slideshow div {
      padding: 11px;
      background-color: #000000;
      -webkit-border-radius: 0px;
      -moz-border-radius: 0px;
      border-radius: 0px;
      margin-top: 0;
      margin-bottom: 0;
      border-bottom-color: #000;
      border-color: #000;
      border-left-color: #000;
      border-right-color: #000;
      border-top-color: #000;
      color: #000;
      outline-color: #000;
         }
       
      /* EndOAWidget_Instance_2559022 */
      .portrait_image {
      display: block;
      margin-right: auto;
      margin-left: auto;
      }
      </style>
      <!-- InstanceEndEditable -->
      <link href="stateline7.css" rel="stylesheet" type="text/css" />
      <style type="text/css">
      body {
      background-color: #000;
      }
      a:link {
      color: #C60;
      }
      a:visited {
      color: #C60;
      }
      a:hover {
      color: #C60;
      }
      a img { border:1px solid black; }

      a:hover img { border:1px solid #c60; }


      a:active {
      color: #FBC201;
      }
      </style>
      <!-- InstanceBeginEditable name="head" -->
      <script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
      <script src="scripts/jquery-1.6.min.js" type="text/javascript"></script>
      <script src="scripts/jquery.cycle.all.js" type="text/javascript"></script>
      <script type="text/xml">
      <!--
      <oa:widgets>
        <oa:widget wid="2559022" binding="#slideshow" />
      </oa:widgets>
      -->
      </script>
      <!-- InstanceEndEditable -->
      </head>

      <body>
      <div class="wrapper">
        <table border="0" cellpadding="3" cellspacing="8" class="nav_table">
          <tr>
            <td><a href="index.html">Home</a></td>
            <td><a href="Contact/Contact.html">Contact</a></td>
            <td><a href="Memberships/Memberships.html">Memberships</a></td>
          </tr>
          <tr>
            <td><a href="Services/Services.html">Services</a></td>
            <td><a href="Recognition/Recognition.html">Recognition</a></td>
            <td><a href="Thinking Green/Green.html">Thinking Green</a></td>
          </tr>
          <tr>
            <td><a href="Projects/Projects.html">Projects</a></td>
            <td><a href="References/References.html">References</a></td>
            <td><a href="On the Boards/Boards.html">On the Boards</a></td>
          </tr>
          <tr>
            <td><a href="Staff/Staff.html">Staff</a></td>
            <td><a href="Giving Back/GivingBack.html">Giving Back</a></td>
            <td><a href="Illustrations/Illustrations.html">Illustrations</a></td>
          </tr>
        </table>
        <!-- InstanceBeginEditable name="Page Content" -->
        <table width="860" border="0" cellpadding="3" cellspacing="3" class="TextTable">
          <tr>
            <td width="383"><p><span lang="en-US" xml:lang="en-US">Stateline No. 7 Architects is a young, innovative and progressive   architectural firm located in Casper, Wyoming. We are in our seventh year of    operation and have gained respect as a leader of the architectural profession in   the region. We have  assembled a network of professionals including project   managers, architects, building code analysts, landscape architects, engineers, </span></p></td>
            <td width="53"> </td>
            <td width="404"><span lang="en-US" xml:lang="en-US">designers, illustrators, building forensic experts, historic   preservationists, and cost estimators to meet any planning and building   challenge. We emphasize and encourage coordination and open, ongoing dialogue   with facility users and owners. Our willingness to listen and involve clients in   the entire design process is unique and necessary for project success.</span></td>
          </tr>
        </table>
        <p><script type="text/javascript">
      // BeginOAWidget_Instance_2559022: #slideshow

               slideshowAddCaption=false;
      $(document).ready(function() {
      $('#slideshow').cycle({
        after:   slideshowOnCycleAfter, //the function that is triggered after each transition
        autostop:   false,     // true to end slideshow after X transitions (where X == slide count)
        fx:    'fade,',// name of transition effect
        pause:   true,     // true to enable pause on hover
        randomizeEffects: false,  // valid when multiple effects are used; true to make the effect sequence random
        speed:   2000,  // speed of the transition (any valid fx speed value)
        sync:   false,     // true if in/out transitions should occur simultaneously
        timeout:  5000,  // milliseconds between slide transitions (0 to disable auto advance)
        fit:   false,
        height:     '600px',
        width:         '0px'   // container width (if the 'fit' option is true, the slides will be set to this width as well)
      });
      });
      function slideshowOnCycleAfter() {
      if (slideshowAddCaption==true){
         $('#slideshow-caption').html(this.title);
      }
      }
       
      // EndOAWidget_Instance_2559022
        </script>
      </p>
      <div id="slideshow">
        <!--All elements inside this will become slides-->
        <a href="Projects/Firerock Steakhouse/Firerock_2.html"><img src="Homepage Slideshow/Firerock.jpg" width="848" height="565" border="0" class="portrait_image" title="Firerock Steakhouse" /></a> <img src="Homepage Slideshow/JonahCheyenne_edit.jpg" width="848" height="603" class="portrait_image" title="Jonah Bank of Wyoming" /> <a href="Projects/Old Chicago/Old_Chicago_2.html"><img src="Homepage Slideshow/OldChicago.jpg" width="848" height="565" class="portrait_image" title="Old Chicago" /></a> <a href="Projects/Pine Bluffs Day Care/Pine_Bluffs_DayCare_2.html"><img src="Homepage Slideshow/PBDaycare_edit.jpg" width="848" height="603" class="portrait_image" title="Pine Bluffs Day Care" /></a> <a href="Projects/Pine Bluffs Rec Center/Pine_Bluffs_Community_2.html"><img src="Homepage Slideshow/PBRec.jpg" width="848" height="565" class="portrait_image" title="Pine Bluffs Community Center" /></a> </div>
      <!--It is safe to delete this if captions are disabled-->
      <div id="slideshow-caption"></div>
      <table width="860" border="0" cellpadding="3" cellspacing="3" class="TextTable">
          <tr>
            <td width="384"><p><span lang="en-US" xml:lang="en-US">We  have worked with an array of clients and  contractors on all   types of projects and maintain an ability to adapt to differing styles from   large-operation and small-operation contractors as well as sophisticated and   less-experienced clients. </span></p>
            <p><span lang="en-US" xml:lang="en-US">We strive every day to develop lasting and meaningful relationships   with all those involved in the successful development of our projects. We are   proud to include in </span></p></td>
            <td width="52"> </td>
            <td width="404"><p><span lang="en-US" xml:lang="en-US">our list of references not only past  clients, but also general   contractors, building officials, subcontractors and city officials.  We take   pride in our reputation for shoulder-to-shoulder working relationships with   everyone on both the design and construction teams. It is our philosophy that no   owner should pay a contractor&rsquo;s up-charge for having to deal with a   &ldquo;difficult-to-work-with&rdquo; architect. This philosophy has quickly led to a   reputation for being both the owner and the contractor&rsquo;s first   choice.</span></p></td>
          </tr>
        </table>
        <!-- InstanceEndEditable -->
        <p> </p>
        <p> </p>
      </div>
      </body>
      <!-- InstanceEnd --></html>