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

    Basic Slideshow not working!


      <!doctype html>



      <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() {


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









      <div id="wrapper">




                    <header id="header">



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





                    <aside id="left_column">


                      <nav id="nav">


                      <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>




                      <!--LEFT SIDE BAR-->






                    <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 id="footer">

                    Copyright @ RH WHolesale 2013








      #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>
          <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">
          <!--Cycle2 Slideshow Plugin-->
          <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20130409/jquery.cycle2.min.js"></script>
          .cycle-slideshow {
          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**/
          <!--begin slideshow-->
          <div class="cycle-slideshow" 
          <!-- 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-->




          Nancy O.

          1 person found this helpful