10 Replies Latest reply on Apr 26, 2014 11:24 AM by hamed1983

    jQuery Cycle, is not sliding in browser ?

    hamed1983

      I have used jQuery Cycle. it is working in liveviwe mode in deamviewer but when i upload page to website and browse it by any browser it is not sliding?

        • 1. Re: jQuery Cycle, is not sliding in browser ?
          Nancy OShea Adobe Community Professional & MVP

          Did you upload all the supporting files?

          What's the URL to your page?

           

           

          Nancy O.

          • 2. Re: jQuery Cycle, is not sliding in browser ?
            hamed1983 Level 1

            which file i have to uploade ? it already asked to uploade all related file and i push yes.

            in case there is a particular file could you tell me about ?

            • 3. Re: jQuery Cycle, is not sliding in browser ?
              Nancy OShea Adobe Community Professional & MVP

              Show us your page please.

               

               

              Nancy O.

              • 4. Re: jQuery Cycle, is not sliding in browser ?
                hamed1983 Level 1

                http://newweb.ediranfest.co.uk/test.php

                and this is a code:

                <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

                <html xmlns="http://www.w3.org/1999/xhtml">

                <head>

                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

                <title>Untitled Document</title>

                <script src="../../scripts/jquery-1.6.min.js" type="text/javascript"></script>

                <script src="../../scripts/jquery.cycle.all.js" type="text/javascript"></script>

                <style type="text/css">

                /* BeginOAWidget_Instance_2559022: #slideshow */

                 

                 

                                              #slideshow { 

                                                  padding: 10px;

                                                        margin:0; 

                                              }

                                              #slideshow-caption{

                                                        padding:0;

                                                        margin:0;

                                              }

                 

                                              #slideshow img, #slideshow div { 

                                                  padding: 10px;

                                                  background-color: #EEE;

                                                        -webkit-border-radius: 10px;

                                                        -moz-border-radius: 10px;

                                                        border-radius: 10px;

                                                  margin: 0;

                                              }

                 

                /* EndOAWidget_Instance_2559022 */

                </style>

                <script type="text/xml">

                <!--

                <oa:widgets>

                  <oa:widget wid="100" binding="#slideshow" />

                </oa:widgets>

                -->

                </script>

                </head>

                 

                 

                <body>

                <script type="text/javascript">

                // BeginOAWidget_Instance_2559022: #slideshow

                 

                 

                                           slideshowAddCaption=true;

                $(document).ready(function() {

                          $('#slideshow').cycle({

                                    after:                              slideshowOnCycleAfter, //the function that is triggered after each transition

                                    autostop:                              false,     // true to end slideshow after X transitions (where X == slide count)

                                    fx:                                        'scrollLeft',// name of transition effect

                                    pause:                              false,     // true to enable pause on hover

                                    randomizeEffects:          false,  // valid when multiple effects are used; true to make the effect sequence random

                                    speed:                              1000,  // speed of the transition (any valid fx speed value)

                                    sync:                              true,     // true if in/out transitions should occur simultaneously

                                    timeout:                    3000,  // milliseconds between slide transitions (0 to disable auto advance)

                                    fit:                              false,

                                    height:                       '150px',

                                    width:         '150px'   // container width (if the 'fit' option is true, the slides will be set to this width as well)

                          });

                });

                function slideshowOnCycleAfter() {

                          if (slideshowAddCaption==true){

                                              $('#slideshow-caption').html(this.title);

                          }

                }

                 

                // EndOAWidget_Instance_2559022

                </script>

                <div id="slideshow">

                  <!--All elements inside this will become slides-->

                  <img src="../include/slide_shop_f/images/001.jpg" width="100" height="100" title="caption for image1" /> <img src="../include/slide_shop_f/images/002.jpg" width="100" height="100" title="caption for image2" /> <img src="../include/slide_shop_f/images/003.jpg" width="100" height="100" title="caption for image3" />

                  </div>

                <!--It is safe to delete this if captions are disabled-->

                </body>

                </html>

                • 5. Re: jQuery Cycle, is not sliding in browser ?
                  hamed1983 Level 1

                  actually I need this slide shows to use in this page :

                    http://newweb.ediranfest.co.uk/pages/shop.php

                  as left and right slide show

                  • 6. Re: jQuery Cycle, is not sliding in browser ?
                    Nancy OShea Adobe Community Professional & MVP

                    Copy & paste this code into a new, blank document.  SaveAs test.html and preview in browsers.

                     

                     

                    <!doctype html>
                    <html lang="en">
                    <head>
                    <meta charset="utf-8">
                    <title>HTML5, Cycle2 Carousel with Fancybox</title>
                    
                    <!--[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>
                    
                    <!--FANCYBOX plugin-->
                    <link href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.css" rel="stylesheet" media="screen">
                    <script src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.pack.js"></script>
                    
                    <!--Cycle2 Plugin-->
                    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20130409/jquery.cycle2.min.js"></script>
                    
                    <!--Cycle2 Carousel-->
                    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20130409/jquery.cycle2.carousel.min.js"></script>
                    
                    <style>
                    * {
                    -webkit-box-sizing: border-box;
                    -moz-box-sizing: border-box;
                        box-sizing: border-box;
                    }
                    img {max-width:100%; vertical-align:baseline}
                    
                    .slideshow img { border: 4px solid #999; }
                    
                    /* slideshow pager */
                    .cycle-pager {
                        text-align: center;
                        width: 100%;
                        z-index: 500;
                        position: relative;
                        top: 0;
                    }
                    .cycle-pager span {
                        font-family: arial;
                        font-size: 75px;
                        width: 22px;
                        height: 22px;
                        display: inline-block;
                        color: #ddd;
                        cursor: pointer;
                    }
                    .cycle-pager span.cycle-pager-active { color: #09C; }
                    
                    .cycle-pager > * { cursor: pointer; }
                    </style>
                    </head>
                    
                    <body>
                    <header> 
                    <h1><a href="http://www.malsup.com/jquery/cycle2/">jQuery Cycle 2</a> Responsive Carousel Slider with <a href="http://fancyapps.com/fancybox/">Fancybox2</a> Viewer</h1>
                    </header>
                    
                    <!--begin slideshow--> 
                    <div class="slideshow"
                    data-cycle-pause-on-hover="true"
                    data-cycle-fx="carousel"
                    data-cycle-timeout="2000"
                    data-cycle-pager="#pager"
                    data-cycle-carousel-visible="5"
                    data-cycle-carousel-fluid="true"
                    data-cycle-slides="> a"
                    > 
                    <!--insert thumbnails and links to full size images below--> 
                    <a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/600x400.jpg" title="optional captions"><img src="http://placehold.it/160x107.jpg" alt="Thumbnail 1" /></a> 
                    
                    <a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/600x400.jpg" title="optional captions"><img src="http://placehold.it/160x107.jpg" alt="Thumbnail 2" /></a> 
                    
                    <a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/600x400.jpg" title="optional captions"><img src="http://placehold.it/160x107.jpg" alt="Thumbnail 3" /></a> 
                    
                    <a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/600x400.jpg" title="optional captions"><img src="http://placehold.it/160x107.jpg" alt="Thumbnail 4" /></a> 
                    
                    <a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/600x400.jpg" title="optional captions"><img src="http://placehold.it/160x107.jpg" alt="Thumbnail 5" /></a> 
                    
                    <a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/600x400.jpg" title="optional captions"><img src="http://placehold.it/160x107.jpg" alt="Thumbnail 6" /></a> 
                    
                    <a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/600x400.jpg" title="optional captions"><img src="http://placehold.it/160x107.jpg" alt="Thumbnail 7" /></a> 
                    <!--end slideshow--> 
                    </div>
                    
                    <!--begin Cycle2 pager--> 
                    <div class="cycle-pager" id="pager"> 
                    <!--end pager--> 
                    </div>
                    
                    
                    <!--Cycle2 function code--> 
                    <script>$.fn.cycle.defaults.autoSelector = '.slideshow';</script> 
                    
                    <!--FancyBox function code--> 
                    <script>
                            $(document).ready(function() {
                                $('.fancybox').fancybox();
                            });
                        </script>
                    </body>
                    </html>
                    

                     

                     

                    Nancy O.

                    1 person found this helpful
                    • 7. Re: jQuery Cycle, is not sliding in browser ?
                      hamed1983 Level 1

                      Thank you know the pics are rolling in page but i wanna use it inside table it is just a botton which sliding

                      • 8. Re: jQuery Cycle, is not sliding in browser ?
                        hamed1983 Level 1

                        i used your code and it is perfect thank you, just as i add it for secound part it is not working:(

                        left slide show is working but right side it is not sliding at all

                        http://newweb.ediranfest.co.uk/pages/test.php

                        • 9. Re: jQuery Cycle, is not sliding in browser ?
                          Nancy OShea Adobe Community Professional & MVP

                          Problem is your trying to use 2 slide shows on one page.  It works better with only one slide show per page. 

                           

                          In addition, you're not using the correct document type to support data atrributes.  You must use the HTML5 doc type as I did in my example. 

                           

                          <!doctype html>

                           

                          Finally, you have a lot of coding errors that need to be cleaned up as detailed below.

                          http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fnewweb.ediranfest.co.uk%2Fpages%2 Ftest.php

                           

                          If you want to do advanced stuff, it's essential that you learn to work with clean code.

                           

                           

                          Nancy O.

                          • 10. Re: jQuery Cycle, is not sliding in browser ?
                            hamed1983 Level 1

                            i solve it thank you again

                            • 11. Re: jQuery Cycle, is not sliding in browser ?
                              hamed1983 Level 1

                              thank you so much i will try