1 Reply Latest reply on Jul 22, 2013 2:30 PM by Nancy OShea

    Basic Slideshow not working!

    JPW1415 Level 1

      <!doctype html>

      <html>

      <head>

      <meta charset="UTF-8">

      <title>RH Wholesale Supply</title>

      <link href="styles.css" rel="stylesheet" type="text/css">

      <!-- 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.latest.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>

      <!--Wrapper-->

      <div id="wrapper">

       

       

                    <!--HEADER---->

                    <header id="header">

                   

                    <!--LOGO-->

                    <img src="Images/Structure/logo.png" width="388" height="100"  alt=""/>

                    </header>

       

                   

       

                    <aside id="left_column">

                      <!--NAV-->

                      <nav id="nav">

                      <ul>

                      <li><a href="index.html">Home</a></li>

                      <li><a href="about.html">About</a></li>

                      <li><a href="Products.html">Products</a></li>

                      <li><a href="#">Online Store</a></li>

                      <li><a href="contact.html">Contact</a></li>

                      </ul>

                                           </nav>

                     

                      <!--LEFT SIDE BAR-->

                   

                   

        </aside>

       

                    <!--BANNER-->

                    <div id="slideshow">

                    <img src="Images/Slideshow/slide1.png" width="696" height="585"  alt=""/> <img src="Images/Slideshow/slide2.png" width="696" height="585"  alt=""/></div>

                                                 

       

                    <!--FOOTER-->                

                    <footer id="footer">

                    Copyright @ RH WHolesale 2013

                    </footer>

       

      </div>  

      </body>

      </html>

       

      CSS:

      #slideshow {

                float: right;

                overflow-x: hidden;

                overflow-y: hidden;

                width: 696px;

                height: 585px;

                border: 1px solid #FFFFFF;

      }

       

      Why is this not working??

        • 1. Re: Basic Slideshow not working!
          Nancy OShea Adobe Community Professional & MVP

          Github is a download site.  It is not a CDN (content distribution network) for scripts. 

          Copy & paste this code into a new, blank document.  Save As test.html.  Replace stock images with your own.

           

           

          <!doctype html>
          <html>
          <head>
          <meta charset="utf-8">
          <title>HTML5 with Cycle2</title>
          
          <!--helpf 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 Plugin-->
          <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20130409/jquery.cycle2.min.js"></script>
          
          
          <style>
          /**Slideshow**/
          .cycle-slideshow {
          width:400px;
          margin: 0 auto;
          text-align: center;
          }
          .cycle-slideshow img {max-width:100%}
          
          /* prev / next links */
          .cycle-prev, .cycle-next {
          position: absolute;
          top: 0;
          width: 30%;
          opacity: 0;
          filter: alpha(opacity=0);
          z-index: 800;
          height: 100%;
          cursor: pointer;
          }
          .cycle-prev {
          left: 0;
          background: url(http://malsup.github.com/images/left.png) 50% 50% no-repeat;
          }
          .cycle-next {
          right: 0;
          background: url(http://malsup.github.com/images/right.png) 50% 50% no-repeat;
          }
          .cycle-prev:hover, .cycle-next:hover {
          opacity: .7;
          filter: alpha(opacity=70)
          }
          /**END SLIDESHOW STYLES**/
          </style>
          </head>
          <body>
          
          <!--begin slideshow-->
          <div class="cycle-slideshow" 
              data-cycle-fx=fade
              >
          <!-- prev/next links -->
          <div class="cycle-prev"></div>
          <div class="cycle-next"></div>
          <!--insert your images below-->
          <img src="http://jquery.malsup.com/cycle2/images/p1.jpg">
          <img src="http://jquery.malsup.com/cycle2/images/p2.jpg">
          <img src="http://jquery.malsup.com/cycle2/images/p3.jpg">
          <img src="http://jquery.malsup.com/cycle2/images/p4.jpg">
          <p>Mouse over image for previous / next links</p>
          </div><!--end slideshow-->
          
          
          </body>
          </html>
          

           

           

           

          Nancy O.

          1 person found this helpful