17 Replies Latest reply on Mar 16, 2010 9:07 AM by @ndy_99

    jcarousel and image rotation problems

    JN1980 Level 1

      Hi guys, I use a jcarousel script on my site here: http://www.past-images.co.uk/new/index.html

       

      Originally there were two demo images so when you clicked it flicked from one image to the next. The problem is I have added more images in to the list, which works great except when you click next it blasts past them all and lands on the end image.

       

      I wouldn't mind this if it did it slowly and you saw them all scroll buy, but best of all it would be good if you clicked through them one by one.

       

      Does anyone know how to fix this? I wanted to email the jcarousel author but couldn't find his email anywhere and can't find anyone on google with this issue. So I figured (as I use dreamweaver and you guys normally know what's going on) I'd ask here...

       

      thanks for any help.

        • 1. Re: jcarousel and image rotation problems
          osgood_ Level 8

          I've been implementing this jQuery plug-in myself today and found the answer to your issue:

           

          Replace the below jQuery code (which will be in the head section of your page)

           

          jQuery(document).ready(function() {
              jQuery('#mycarousel').jcarousel();
          });

           

          With all of the below: Then at the end of the below script, a few lines up, you'll see (scroll 1,) change the number to the frames that you require.

           


          /**
          * We use the initCallback callback
          * to assign functionality to the controls
          */
          function mycarousel_initCallback(carousel) {
          jQuery('.jcarousel-control a').bind('click', function() {
          carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
          return false;
          });

          jQuery('.jcarousel-scroll select').bind('change', function() {
          carousel.options.scroll = jQuery.jcarousel.intval(this.options[this.selectedIndex].value);
          return false;
          });

          jQuery('#mycarousel-next').bind('click', function() {
          carousel.next();
          return false;
          });

          jQuery('#mycarousel-prev').bind('click', function() {
          carousel.prev();
          return false;
          });
          };

          // Ride the carousel...
          jQuery(document).ready(function() {
          jQuery("#mycarousel").jcarousel({
          scroll: 1,
          initCallback: mycarousel_initCallback,
          // This tells jCarousel NOT to autobuild prev/next buttons
          buttonNextHTML: null,
          buttonPrevHTML: null
          });
          });


          1 person found this helpful
          • 2. Re: jcarousel and image rotation problems
            JN1980 Level 1

            Hi thanks so much for helping but I tried this on the "Visit" page (- if you click it at the top) and it's hasn't work, did I paste the code in wrongly?

            • 3. Re: jcarousel and image rotation problems
              JN1980 Level 1

              still stuck with this if anyone has any ideas?

              • 4. Re: jcarousel and image rotation problems
                osgood_ Level 8

                JN1980 wrote:

                 

                still stuck with this if anyone has any ideas?

                 

                Might be that you have the wrong jquery script linked.

                 

                Download the jquery-1.2.3.pack.js from the link below:

                 

                http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.3.pack.js&can=2&q=label :Type-Source

                 

                 

                Then swap the current one you are using jquery-1.3.2.min.js for the new one.

                 

                 

                See if that makes a difference

                 


                • 5. Re: jcarousel and image rotation problems
                  @ndy_99 Level 1

                  Hi there, I'm using jcarousel on a site I'm developing and this is the javascript I've got to initiate mine:

                   

                  function mycarousel_initCallback(carousel)

                  {

                      // Disable autoscrolling if the user clicks the prev or next button.

                      carousel.buttonNext.bind('click', function() {

                          carousel.startAuto(0);

                      });

                   

                      carousel.buttonPrev.bind('click', function() {

                          carousel.startAuto(0);

                      });

                   

                      // Pause autoscrolling if the user moves with the cursor over the clip.

                      carousel.clip.hover(function() {

                          carousel.stopAuto();

                      }, function() {

                          carousel.startAuto();

                      });

                  };

                   

                  jQuery(document).ready(function() {

                      jQuery('#mycarousel').jcarousel({

                          auto: 4,

                          wrap: 'last',

                          initCallback: mycarousel_initCallback

                      });

                  });

                   

                   

                  It's worth a shot.

                   

                  Cheers,

                   

                  @ndy.

                  • 6. Re: jcarousel and image rotation problems
                    JN1980 Level 1

                    hi thanks for all the help. i've tried your suggestions on the Visit page, new javascript and new js.pack file. it's still scrolling to the last pic in my carousel though...

                     

                    how can we debug this?

                    • 7. Re: jcarousel and image rotation problems
                      @ndy_99 Level 1

                      Hi there,

                       

                      Must admit this one has got me stumped. I downloaded your page to see if I could figure it out, and did what I always do when faced with problems like this. Stripped it right back to it's bear minimum.

                       

                      Tried replacing your jquery javascript with mine and the same with the jcarousel javascript. Still getting the same problem.

                       

                      Also tried stripping out the next/previous buttons and pasted in my auto scroll code from my previous post. Same problem.

                       

                      I've even tried stripping out all surrounding div tags leaving the <ul><li></li></ul> tags, applying the jcarousel-skin-tango to the <ul> tag. Still the same ?!?!?!?!?!?

                       

                      I'm starting to think it's one of 2 things:

                       

                      a) Could be that jcarousel can't handle images this large. I know that sounds daft, but it could be. Test it using either a smaller version of the images, or a single image, instead of having 2 side by side.

                       

                      b) The problem is within the skin .css. Again I'm not sure why and I've had a play to see if I could fathom it out, with no joy.

                       

                      Sorry I can't be more help. Hope you find the answer.

                       

                      Cheers,

                       

                      @ndy.

                      • 8. Re: jcarousel and image rotation problems
                        JN1980 Level 1

                        Hi thanks so much for your in-depth help on this. It's a real shame I can't get this thing working, does anyone know how to contact the author of jcarousel or of any other support sites where someone may be able to help me with jcarousel?

                         

                        Below is a copy of my skin.css if this helps:

                         

                        /*
                          Horizontal Buttons
                        */
                        .jcarousel-skin-tango .jcarousel-next-horizontal {
                            position: absolute;
                            top: 135px;
                            left: 755px;
                            width: 55px;
                            height: 55px;
                            cursor: pointer;
                            background: transparent url(images/next.gif) no-repeat 0 0;
                        }

                        .jcarousel-skin-tango .jcarousel-prev-horizontal {
                            position: absolute;
                            top: 135px;
                            left: -85px;
                            width: 55px;
                            height: 55px;
                            cursor: pointer;
                            background: transparent url(images/prev.gif) no-repeat 0 0;
                        }

                        .jcarousel-skin-tango .jcarousel-container-horizontal {
                            width: 726px;
                        }

                        .jcarousel-skin-tango .jcarousel-clip-horizontal {
                            width:  726px;
                            height: 335px;
                        }

                        .jcarousel-skin-tango .jcarousel-item {
                            width: 726px;
                            height: 335px;
                        }
                        • 9. Re: jcarousel and image rotation problems
                          @ndy_99 Level 1

                          Hi there,


                          Me again. I would start here: http://sorgalla.com/jcarousel/

                           

                          Good luck,

                           

                          @

                          • 10. Re: jcarousel and image rotation problems
                            osgood_ Level 8

                            I've downloaded your files from the index page and included the js solution that I suggested and all seems to be working just fine for me. The images are shown two at a time when the next/previous buttons are clicked if you set the scroll to 1, as below.

                             

                            // Ride the carousel...
                            jQuery(document).ready(function() {
                            jQuery("#mycarousel").jcarousel({
                            scroll: 1,
                            initCallback: mycarousel_initCallback,
                            // This tells jCarousel NOT to autobuild prev/next buttons
                            buttonNextHTML: null,
                            buttonPrevHTML: null
                            });
                            });

                             

                            The only thing I've done is moved the next/previous buttons into a folder in the site root named 'images'

                             

                            Your css for the buttons (background: transparent url(images/prev.gif) no-repeat 0 0;) suggests it is at the link below, but it is not.

                            http://www.past-images.co.uk/new/images/prev.gif

                             

                            It is infact here:

                             

                            http://www.past-images.co.uk/new/css/images/prev.gif so your css should infact be:

                             

                            (background: transparent url(css/images/prev.gif) no-repeat 0 0;)

                             

                            The mytsery is where are the ones showing on site coming from.

                            • 11. Re: jcarousel and image rotation problems
                              JN1980 Level 1

                              hi again thanks for trying it out for me. my css files are in a folder on the root called css and then i have an images folder within the css folder with buttons etc in. so it's css/images but as css is in css folder already it's just /images/

                               

                              if that makes sense...

                               

                              osgood_ wrote:

                               

                              I've downloaded your files from the index page and included the js solution that I suggested and all seems to be working just fine for me. The images are shown two at a time when the next/previous buttons are clicked if you set the scroll to 1, as below.

                               

                              // Ride the carousel...
                              jQuery(document).ready(function() {
                              jQuery("#mycarousel").jcarousel({
                              scroll: 1,
                              initCallback: mycarousel_initCallback,
                              // This tells jCarousel NOT to autobuild prev/next buttons
                              buttonNextHTML: null,
                              buttonPrevHTML: null
                              });
                              });

                               

                              The only thing I've done is moved the next/previous buttons into a folder in the site root named 'images'

                               

                              Your css for the buttons (background: transparent url(images/prev.gif) no-repeat 0 0;) suggests it is at the link below, but it is not.

                              http://www.past-images.co.uk/new/images/prev.gif

                               

                              It is infact here:

                               

                              http://www.past-images.co.uk/new/css/images/prev.gif so your css should infact be:

                               

                              (background: transparent url(css/images/prev.gif) no-repeat 0 0;)

                               

                              The mytsery is where are the ones showing on site coming from.

                              • 12. Re: jcarousel and image rotation problems
                                osgood_ Level 8

                                JN1980 wrote:

                                 

                                hi again thanks for trying it out for me. my css files are in a folder on the root called css and then i have an images folder within the css folder with buttons etc in. so it's css/images but as css is in css folder already it's just /images/

                                 

                                if that makes sense...

                                 

                                 

                                Perfect sense.

                                 

                                This works perfectly for me. Can you copy ALL of the code from your index page please. paste into a new Dreamweaver document and save it to your site folder as index_test.html

                                 

                                 

                                Open the index_text.html page. Locate the below js, near the top of the page.

                                 

                                 

                                <script type="text/javascript">
                                          jQuery(document).ready(function() {
                                              jQuery('#mycarousel').jcarousel({});
                                          });
                                     </script>

                                 

                                 

                                 

                                Copy all of the below, and paste it in the page so it replaces the above js code.

                                 

                                 

                                 

                                <script type="text/javascript">
                                            /**
                                * We use the initCallback callback
                                * to assign functionality to the controls
                                */
                                function mycarousel_initCallback(carousel) {
                                jQuery('.jcarousel-control a').bind('click', function() {
                                carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
                                return false;
                                });

                                 

                                jQuery('.jcarousel-scroll select').bind('change', function() {
                                carousel.options.scroll = jQuery.jcarousel.intval(this.options[this.selectedIndex].value);
                                return false;
                                });

                                 

                                jQuery('#mycarousel-next').bind('click', function() {
                                carousel.next();
                                return false;
                                });

                                 

                                jQuery('#mycarousel-prev').bind('click', function() {
                                carousel.prev();
                                return false;
                                });
                                };

                                 

                                // Ride the carousel...
                                jQuery(document).ready(function() {
                                jQuery("#mycarousel").jcarousel({
                                scroll: 1,
                                initCallback: mycarousel_initCallback,
                                // This tells jCarousel NOT to autobuild prev/next buttons
                                buttonNextHTML: null,
                                buttonPrevHTML: null
                                });
                                });
                                    </script>

                                • 13. Re: jcarousel and image rotation problems
                                  JN1980 Level 1

                                  oh my word!! you've actually fixed it!!! thanks, now it seems to work perfectly you're a genius!

                                  osgood_ wrote:

                                   

                                  JN1980 wrote:

                                   

                                  hi again thanks for trying it out for me. my css files are in a folder on the root called css and then i have an images folder within the css folder with buttons etc in. so it's css/images but as css is in css folder already it's just /images/

                                   

                                  if that makes sense...

                                   

                                   

                                  Perfect sense.

                                   

                                  This works perfectly for me. Can you copy ALL of the code from your index page please. paste into a new Dreamweaver document and save it to your site folder as index_test.html

                                   

                                   

                                  Open the index_text.html page. Locate the below js, near the top of the page.

                                   

                                   

                                  <script type="text/javascript">
                                            jQuery(document).ready(function() {
                                                jQuery('#mycarousel').jcarousel({});
                                            });
                                       </script>

                                   

                                   

                                   

                                  Copy all of the below, and paste it in the page so it replaces the above js code.

                                   

                                   

                                   

                                  <script type="text/javascript">
                                              /**
                                  * We use the initCallback callback
                                  * to assign functionality to the controls
                                  */
                                  function mycarousel_initCallback(carousel) {
                                  jQuery('.jcarousel-control a').bind('click', function() {
                                  carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
                                  return false;
                                  });

                                   

                                  jQuery('.jcarousel-scroll select').bind('change', function() {
                                  carousel.options.scroll = jQuery.jcarousel.intval(this.options[this.selectedIndex].value);
                                  return false;
                                  });

                                   

                                  jQuery('#mycarousel-next').bind('click', function() {
                                  carousel.next();
                                  return false;
                                  });

                                   

                                  jQuery('#mycarousel-prev').bind('click', function() {
                                  carousel.prev();
                                  return false;
                                  });
                                  };

                                   

                                  // Ride the carousel...
                                  jQuery(document).ready(function() {
                                  jQuery("#mycarousel").jcarousel({
                                  scroll: 1,
                                  initCallback: mycarousel_initCallback,
                                  // This tells jCarousel NOT to autobuild prev/next buttons
                                  buttonNextHTML: null,
                                  buttonPrevHTML: null
                                  });
                                  });
                                      </script>

                                  • 14. Re: jcarousel and image rotation problems
                                    osgood_ Level 8

                                    JN1980 wrote:

                                     

                                    oh my word!! you've actually fixed it!!! thanks, now it seems to work perfectly

                                     

                                    It took us a bit of time but have faith we usually get their in the end, persistence pays off.

                                    • 15. Re: jcarousel and image rotation problems
                                      JN1980 Level 1

                                      Well thanks again. Also is there anything you can add to the code so that when you've clicked to the end it goes back to the beginning to start again?

                                       

                                      Thanks

                                       

                                      osgood_ wrote:

                                       

                                      JN1980 wrote:

                                       

                                      oh my word!! you've actually fixed it!!! thanks, now it seems to work perfectly

                                       

                                      It took us a bit of time but have faith we usually get their in the end, persistence pays off.

                                      • 16. Re: jcarousel and image rotation problems
                                        osgood_ Level 8

                                        JN1980 wrote:

                                         

                                        Well thanks again. Also is there anything you can add to the code so that when you've clicked to the end it goes back to the beginning to start again?

                                         

                                        Thanks

                                         

                                         

                                        Sorry, I don't know about that one. I haven't looked too far beyond what I needed to do myself and it just so happened that your initial problem was reflective of my own.

                                         

                                        I dare say it could easily be done if one knows how, judging from the examples, looks like the scripts are very versatile.

                                        • 17. Re: jcarousel and image rotation problems
                                          @ndy_99 Level 1

                                          Think I can help with that one. If you put this line in your last block of code:

                                           

                                          wrap: 'last',

                                           

                                          Should do the trick. IE:

                                           

                                          // Ride the carousel...
                                          jQuery(document).ready(function() {
                                          jQuery("#mycarousel").jcarousel({
                                          scroll: 1,
                                          wrap: 'last',
                                          initCallback: mycarousel_initCallback,
                                          // This tells jCarousel NOT to autobuild prev/next buttons
                                          buttonNextHTML: null,
                                          buttonPrevHTML: null
                                          });
                                          });

                                           

                                           

                                          Cheers,


                                          @ndy.