CODEWITHSUNDEEP
jqueryjquery-pluginsplugins
surfbird0713
surfbird0713

Reputation: 1219

jQuery Cycle2 plugin with carousel not working; no errors in console

I'm trying to use the jQuery Cycle2 plugin on a site and I am very new to jQuery so it's very hard to troubleshoot. I don't see any errors in the JavaScript console. My code is below and I also made a jsfiddle here which passed validation. It works locally but when I plug it into OpenCMS, the slides in the carousel are out of their container and sized at 100%, and nothing is clickable (meaning even clicking the oversized carousel images does not change the slide in the first div which is sitting behind everything).

The site I'm plugging this into is running jQuery 1.3.2 and I don't have the ability to change or update that, so I used noConflict. Before I used noConflict, other parts of the site were breaking AND the slider wouldn't work. Now the other parts of the site are OK but the slider still won't function.

The slider uses the data attribute on the divs to pass the options, and I thought maybe it wasn't working because the site doctype is XHTML 1.0. But when I change the doc type on my local file to match the site I'm working with, the slider still works.

I also tried following the instructions here to set the options programatically but I couldn't get that to work even on my local machine...I think I don't know enough JavaScript to write the code properly.

I am stumped and too inexperienced to know how to troubleshoot this without any help. Any ideas?

Thank you.

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
            <html>
            <head>
            <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
            <title>Soleil Cycle2 Carousel Pager</title>
            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
            <script type="text/javascript" src="../js/jquery.cycle2.js"></script> 
            <script type="text/javascript" src="../js/jquery.cycle2.carousel.js"></script>   
            <script type="text/javascript">
            var jQuery_1_9_0 = $.noConflict(true);
            jQuery_1_9_0(document).ready(function($){
            var slideshows = $('.cycle-slideshow').on('cycle-next cycle-prev', function(e, opts) {
                slideshows.not(this).cycle('goto', opts.currSlide);
            });

            $('#cycle-2 .cycle-slide').click(function(){
                var index = $('#cycle-2').data('cycle.API').getSlideIndex(this);
                slideshows.cycle('goto', index);
            });

            });
            </script> 
            <style type="text/css">
            #soleil-intro * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
            #soleil-intro #cycle-1 div { width:950px; }
            #soleil-intro #cycle-2 .cycle-slide { border:3px solid #fff; }
            #soleil-intro #cycle-2 .cycle-slide-active { border:3px solid #f6d609; }
            #soleil-intro #soleil-slideshow-1 { max-width: 980px; margin: auto; z-index: 1; position: relative; }
            #soleil-intro #soleil-slideshow-2 { max-width: 940px; margin: auto; z-index: 1; position: relative; margin-top: 10px;  }
            #soleil-intro .cycle-slideshow img { width: 100%; height: auto; display: block; }
            #soleil-intro .arrow {float: left; width: 15px; position: relative; top: 200px;}
            </style>
            </head>
            <body>
            <div id="soleil-intro">
            <div id="soleil-slideshow-1">
                <p class="arrow">
                    <a href="#" class="cycle-prev">&laquo;</a> 
                </p>
                <div style="float: left;" id="cycle-1" class="cycle-slideshow"
                    data-cycle-slides="> div"
                    data-cycle-timeout="0"
                    data-cycle-prev="#soleil-slideshow-1 .cycle-prev"
                    data-cycle-next="#soleil-slideshow-1 .cycle-next"
                    data-cycle-fx="scrollHorz"
                    >
                    <div><img src="../soleil1.jpg" width="980" height="425"></div>
                    <div><a href="test.html"><img src="../soleil2.jpg" width="980" height="425"></a></div>
                    <div><img src="../soleil3.jpg" width="980" height="425"></div>
                    <div><img src="../soleil4.jpg" width="980" height="425"></div>
                    <div><img src="../soleil5.jpg" width="980" height="425"></div>
                    <div><img src="../soleil3.jpg" width="980" height="425"></div>
                    <div><img src="../soleil4.jpg" width="980" height="425"></div>      
                </div>
                    <p class="arrow">
                    <a href="#" class="cycle-next"><img src="../arrow.gif" style="display:inline;" alt="arrow" height="12" width="16" border="0" /></a>
                </p>
            </div>
            <div style="clear: both;"></div>
            <div id="soleil-slideshow-2" style="clear: both;">
                <div id="cycle-2" class="cycle-slideshow"
                    data-cycle-slides="> div"
                    data-cycle-timeout="0"
                    data-cycle-prev="#soleil-slideshow-2 .cycle-prev"
                    data-cycle-next="#soleil-slideshow-2 .cycle-next"
                    data-cycle-fx="carousel"
                    data-cycle-carousel-visible="3"
                    data-cycle-carousel-fluid="true"
                    data-allow-wrap="false"
                    >
                    <div><img src="../soleil1.jpg" width="100" height="100"></div>
                    <div><img src="../soleil2.jpg" width="100" height="100"></div>
                    <div><img src="../soleil3.jpg" width="100" height="100"></div>
                    <div><img src="../soleil4.jpg" width="100" height="100"></div>
                    <div><img src="../soleil5.jpg" width="100" height="100"></div>
                    <div><img src="../soleil3.jpg" width="100" height="100"></div>
                    <div><img src="../soleil4.jpg" width="100" height="100"></div>
                </div>
            </div>
            </div> <!-- #soleil-intro -->
            </body>
            </html>

Upvotes: 2

Views: 8986

Answers (2)

mrwingfield
mrwingfield

Reputation: 94

This question came up in a search to troubleshoot my own jquery cycle2 issues, but just in passing, you have a typo in the opening DIV tag of your slideshow containers. In the value field of the 'data-cycle-slides' attribute, the right angle bracket is closing the DIV open tag too soon. it should be:

<div style="float: left;" id="cycle-1" class="cycle-slideshow"
                data-cycle-slides="div"
                data-cycle-timeout="0"
                data-cycle-prev="#soleil-slideshow-1 .cycle-prev"
                data-cycle-next="#soleil-slideshow-1 .cycle-next"
                data-cycle-fx="scrollHorz"
                >

Upvotes: 0

luckystars
luckystars

Reputation: 1754

It would have been helpful if you have mentioned which CMS you are integrating it into, use this code :

Needed to paste the noConflict right after the jquery.1.9 file.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 

<script type="text/javascript">
            var jQuery_1_9_0 = $.noConflict(true);
</script>
<script type="text/javascript" src="../js/jquery.cycle2.js"></script> 
<script type="text/javascript" src="../js/jquery.cycle2.carousel.js"></script>   


<script type="text/javascript">
    jQuery_1_9_0(document).ready(function(){
        var slideshows = jQuery_1_9_0('.cycle-slideshow').on('cycle-next cycle-prev', function(e, opts) {
            slideshows.not(this).cycle('goto', opts.currSlide);
        });

        jQuery_1_9_0('#cycle-2 .cycle-slide').click(function(){
            var index = jQuery_1_9_0('#cycle-2').data('cycle.API').getSlideIndex(this);
            slideshows.cycle('goto', index);
        });
    });
</script>

Hopefully it would solve the problem.

Here is the updated fiddle: http://jsfiddle.net/Z5cvq/8/

Upvotes: 1

Related Questions