slideshow images using jQuery Cycle Plugin

Question

I am trying to slideshow images using jQuery Cycle Plugin, but it is not working. How to make it runnable.

Included scripts

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="https://malsup.github.com/jquery.cycle.all.js"></script>

CSS:

 .pics {  
            height:  232px;  
            width:   232px;  
            padding: 0;  
            margin:  0;  
        } 

        .pics img {  
            padding: 15px;  
            border:  1px solid #ccc;  
            background-color: #eee;  
            width:  200px; 
            height: 200px; 
            top:  0; 
            left: 0 
        }

Script:

  $(function(){
        $('.pics').cycle('fade');
    });

Pic Div

          <div class="pics">
                <img src="http://davealger.info/i/1.jpg"  width="200" height="200"  />
                <img src="http://davealger.info/i/2.bmp"  width="200" height="200"  />
                <img src="http://davealger.info/i/3.png"  width="200" height="200" />
            </div>

score 2 · Accepted Answer · answered Dec 04 '12 at 15:21

2

Change https://malsup.github.com/jquery.cycle.all.js to http:// -- or better yet, download the plugin and spare his poor server. Google uses a high-volume CDN; he does not.

http://jsfiddle.net/mblase75/ZSJqh/

answered Dec 04 '12 at 15:21

Blazemonger

90,923
26
142
180

downloaded jquery.cycle.all.js then also not showing slide show. Images are showing as list – xrcwrn Dec 05 '12 at 12:58
If the images are showing as a list, then the jQuery Cycle plugin isn't loading for some reason. Check your console and double-check that the files are being loaded, and in the correct order. – Blazemonger Dec 05 '12 at 13:51
It is loaded properly i checked in Google Chrome – xrcwrn Dec 05 '12 at 15:05
Double-check your selector. That's all I can suggest without you posting your current code as a jsfiddle or something. – Blazemonger Dec 05 '12 at 16:54

score 1 · Answer 2 · answered Dec 13 '12 at 03:55

If you are set on not downloading the script to locally, then keep up-to-date.

Cycle.js was moved.
Don't use http:// or https://

Here, this was taken from the website's demo and edited a tad:

<!-- include jQuery library -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="//cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').cycle({
        fx: 'fade' 
    });
});
</script>

Notice that the location of the cycle.js
It pays to look at demos' source codes.

I have downloaded and linked from my folder now its working. Problem was only not linking of jquery.cycle.all.latest.js file — xrcwrn, Dec 13 '12 at 10:48
Linking the scripts is essential. Using local files increases performance and loading times. — bobthyasian, Dec 13 '12 at 10:51

score 0 · Answer 3 · answered Dec 04 '12 at 15:21

0

$(function(){
    $('.pics').cycle({fx: 'fade'});
});

See docs: http://malsup.com/jquery/cycle/

answered Dec 04 '12 at 15:21

long

3,692
1
22
38

slideshow images using jQuery Cycle Plugin

3 Answers3