Search code examples
jquery-cycle2cycle2

Jquery Cycle2 won't produce slideshow

I'm trying to implement the cycle2 plugin with jquery on an HTML page. I've used the site http://jquery.malsup.com/cycle2 as a guide I downloaded (copied) the file jquery.cycle2.js I placed it on the server in on the server in the location public_html/cycle2/jquery.cycle2.js
In my HTML page's Header section I added the lines:

<!-- include jQuery library -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<!-- include Cycle2 -->
<script src="cycle2/jquery.cycle2.js"></script>

Then, in the HTML page's BODY I added:

<div class="cycle-slideshow">
    <img src="cycle_images/image1.jpg" alt="Image1"/>
    <img src="cycle_images/image2.jpg" alt="Image2"/>
    <img src="cycle_images/image3.jpg" alt="Image3"/>
</div>

The guide doesn't give a css-type example for the class "cycle-slideshow". Instead it says that by using that class in the DIV tag it will auto-activate the slideshow.
This doesn't seem to activate the slideshow. Instead it lays out the images out in three rows, one row after another.
Any idea what I'm doing wrong to activate the cycle2 slideshow?

Solution

  • The problem was with the HTTP:// on the server line. Since the Cycle2 documentation was published, the GOOGLEAPIS sever must have obtained a certificate, making it HTTPS. The mismatch between HTTP and HTTPS caused the plugin to fail. The working code now reads:

    <!-- include jQuery library -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<!-- include Cycle2 -->
<script src="cycle2/jquery.cycle2.js"></script>

    It seems to me that it's safer to remove "HTTP" or "HTTPS" and just being the server line with "//".