20 Replies Latest reply on Feb 18, 2015 10:24 PM by daveharr1s0n

    How do I add back / forward arrows to jQuery carousel?

    daveharr1s0n Level 1

      Hope someone here can help me. I have just added a jQuery carousel called carouFredSel ( Circular, Responsive jQuery Carousel - CarouFredSel ) to a project I'm working on. What I'm trying to do is add Back and Forward arrows so one will have to click on to move forward or back, rather than it constantly moving. I'm still very very new at jQuery, so please forgive me. Anyone here able to help me modify that jQuery to stop the automatic stuff and replace it with arrows on either end of the carousel?

       

      This is the code I have in the head that is relevant to the carousel:

       

      <script type="text/javascript" src="javaScript/jQuery.js"></script>

      <script type="text/javascript" src="javaScript/jquery.carouFredSel-6.2.1-packed.js"></script>

      <script>

      $(document).ready(function() {

       

      $("#foo1").carouFredSel();

      $("#foo1 a").fancybox({

          cyclic    : true,

          onStart    : function() {

              $("#foo1").trigger("pause");

          },

          onClosed: function() {

              $("#foo1").trigger("play");

          }

         

      });

      });

      </script>

       

      NOTE: I have Fancybox (a lightbox) set up with it, which works great. I didn't include that Script.

       

      Here is a link to my page: Watercolors Plus | Galleries | Floral Watercolors

       

      Here is a link to a page that shows an example of what I want: Mean Bean Games | 2D IOS Game Developers

       

      Thanks much!

       

      Dave

        • 1. Re: How do I add back / forward arrows to jQuery carousel?
          osgood_ Level 8

          Its got an example of a forward and back arrow on the source page, what's wrong with using that?

          • 2. Re: How do I add back / forward arrows to jQuery carousel?
            BenPleysier Adobe Community Professional & MVP

            You need to change the HTML to include

            <div class="image_carousel">

                <div id="foo1">

                    <a rel="fancybox" href="/assets/florals/blueIris.jpg"> <img src="/assets/florals/blueIris.jpg" alt="one" width="120" height="100" /> </a>

                    <a rel="fancybox" href="assets/florals/callaLily.jpg"> <img src="/assets/florals/callaLily.jpg" alt="two" width="120" height="100" /> </a>

                    <a rel="fancybox" href="/caroufredsel-old/examples/images/large/cupcackes.jpg"> <img src="/caroufredsel-old/examples/images/small/cupcackes.jpg" alt="three" width="120" height="100" /> </a>

                    <a rel="fancybox" href="/caroufredsel-old/examples/images/large/hangmat.jpg"> <img src="/caroufredsel-old/examples/images/small/hangmat.jpg" alt="four" width="120" height="100" /> </a>

                    <a rel="fancybox" href="/caroufredsel-old/examples/images/large/new_york.jpg"> <img src="/caroufredsel-old/examples/images/small/new_york.jpg" alt="five" width="120" height="100" /> </a>

                    <a rel="fancybox" href="/caroufredsel-old/examples/images/large/laundry.jpg"> <img src="/caroufredsel-old/examples/images/small/laundry.jpg" alt="six" width="120" height="100" /> </a>

                </div>

                <div class="clearfix"></div>

                <a class="prev" id="foo1_prev" href="#"><span>prev</span></a>

                <a class="next" id="foo1_next" href="#"><span>next</span></a>

                <div class="pagination" id="foo1_pag"></div>

            </div>

            Then we need to add a bit of JavaScript as in

            $("#foo1").carouFredSel({

                circular: false,

                infinite: false,

                auto    : false,

                prev    : {

                    button  : "#foo1_prev",

                    key     : "left"

                },

                next    : {

                    button  : "#foo1_next",

                    key     : "right"

                },

                pagination  : "#foo1_pag"

            });

            And lastly, make sure that you have all of the following style rules. Add the missing rules to your style sheet.

            .image_carousel {

                padding: 15px 0 15px 40px;

                position: relative;

            }

            .image_carousel img {

                border: 1px solid #ccc;

                background-color: white;

                padding: 9px;

                margin: 7px;

                display: block;

                float: left;

            }

            a.prev, a.next {

                background: url(../images/miscellaneous_sprite.png) no-repeat transparent;

                width: 45px;

                height: 50px;

                display: block;

                position: absolute;

                top: 85px;

            }

            a.prev {

                left: -22px;

                background-position: 0 0;

            }

            a.prev:hover {

                background-position: 0 -50px;

            }

            a.prev.disabled {

                background-position: 0 -100px !important;

            }

            a.next {

                right: -22px;

                background-position: -50px 0;

            }

            a.next:hover {

                background-position: -50px -50px;

            }

            a.next.disabled {

                background-position: -50px -100px !important;

            }

            a.prev.disabled, a.next.disabled {

                cursor: default;

            }

            a.prev span, a.next span {

                display: none;

            }

            .pagination {

                text-align: center;

            }

            .pagination a {

                background: url(../images/miscellaneous_sprite.png) 0 -300px no-repeat transparent;

                width: 15px;

                height: 15px;

                margin: 0 5px 0 0;

                display: inline-block;

            }

            .pagination a.selected {

                background-position: -25px -300px;

                cursor: default;

            }

            .pagination a span {

                display: none;

            }

            .clearfix {

                float: none;

                clear: both;

            }

            1 person found this helpful
            • 3. Re: How do I add back / forward arrows to jQuery carousel?
              daveharr1s0n Level 1

              I know it has the simple one, osgood. Thanks for your reply! But I'm looking to use it with Fancybox. The example I followed with the carousel and fancybox works perfectly, except that I'm trying to strip whatever jQuery that keeps it scrolling through automatically so I can add whatever is needed so the user can arrow forward or backward. Looking forward to going through some lessons on jQuery, but trying to get a quick fix for the client.

              • 4. Re: How do I add back / forward arrows to jQuery carousel?
                Nancy OShea Adobe Community Professional & MVP

                If you don't want it to scroll, why are you using a carousel script?  'Cuz scrolling is what carousels do. 

                 

                 

                Nancy O.

                • 5. Re: How do I add back / forward arrows to jQuery carousel?
                  daveharr1s0n Level 1

                  Ha, .. no, I must not have been clear. I want it to scroll, but not automatically. I want the user to have to click a forward or back arrow. Otherwise it just keeps on spinning. I'm almost there, thanks to Ben Pleysier. I've got it to where it appears that it should work in the Dreamweaver view. But when I test it out, there's no carousel (or images) visible at all. Must be something I'm missing in the CSS?

                  • 6. Re: How do I add back / forward arrows to jQuery carousel?
                    daveharr1s0n Level 1

                    Thanks Ben,

                     

                    I'm nearly there. Just trying to figure out why it "appears" that it should work, while in Dreamweaver view, but the carousel and images do not "appear' at all when I test it or look at it live, after uploading. Watercolors Plus | Galleries | Floral Watercolors

                     

                    Must be something in the CSS?

                    • 7. Re: How do I add back / forward arrows to jQuery carousel?
                      Nancy OShea Adobe Community Professional & MVP

                      Did you upload all your images?  Your caroufredsel-old folder is not uploaded.  All example images are 404 not found on server.   Pay close attention to the path.

                      http://www.watercolorsplus.com/caroufredsel-old/examples/images/small/cupcackes.jpg

                       

                       

                       

                      Nancy O.

                      • 8. Re: How do I add back / forward arrows to jQuery carousel?
                        daveharr1s0n Level 1

                        Thanks, Nancy. But i don't think it's that -- I don't really have a folder as such. I think what you might be looking at is the html to images used on the carouFredSel samples page. Never mind my temporary images. Wouldn't you know, just as I was making progress (I think) work interferes with work. Had to rush off to the day job. But right before I left I started playing with the CSS, little by little, to see what was making it all disappear. Here are three links. The first, the continuous running carousel. The second shows no carousel. The third shows the images but no arrows to scroll through.   Like I said, I had to run off to work, but when playing around with the CSS I HAD it to where I could see the alt text "back" and "forward" (or previous or next, or whatever) BELOW the images. I could click on those and it worked perfectly! I suspect it has something to do now with the CSS link to the buttons that's making it all disappear, as in the second link here. The html is otherwise the same, except for being linked to different CSS versions.

                         

                        Can't wait to go through the CSS after work, rule by rule, to see what it might be.

                         

                        http://www.watercolorsplus.com/New/florals5.html#


                        http://www.watercolorsplus.com/New/florals6.html#


                        http://www.watercolorsplus.com/New/florals7.html#

                        • 9. Re: How do I add back / forward arrows to jQuery carousel?
                          daveharr1s0n Level 1

                          OK, let me try again. I thank you all for your help. Ben, I believe you are steering me in the right direction, because in Dreamweaver view it appears that the code you provided SHOULD work -- I can see the previous and next spans, on either side of the div containing the images. But it doesn't work when I test it. It's just blank space. I added a border around the image_carousel div just to show what's NOT shown.

                           

                          My original carouFredSel carousel works with Fancybox as seen here: http://www.watercolorsplus.com/New/florals3.htmlhttp://www.watercolorsplus.com/New/florals3.html

                           

                          With the changes above it looks like this: http://www.watercolorsplus.com/New/florals4.html

                           

                          I have everything (far as I can tell) as you suggested. Here's what I have in the head (minus Fancybox jQuery). I've tried it with and without the "default configuration":

                           

                          <script type="text/javascript" src="javaScript/jQuery.js"></script>

                          <script type="text/javascript" src="javaScript/jquery.carouFredSel-6.2.1-packed.js"></script>

                          <script>

                          $(document).ready(function() {

                              // Using default configuration

                              $("#foo1").carouFredSel();

                             

                              // Using custom configuration

                              $("#foo1").carouFredSel({

                                  circular: false,

                                  infinite: false,

                                  auto: false,

                                  prev: {

                                      button: "#foo1_prev",

                                      key: "left"

                                  },

                                  next: {

                                      button: "#foo1_next",

                                      key: "right"

                                  },

                                  pagination: "#foo1_pag"

                              });

                          });

                           

                          </script>

                           

                          Any clue what I might have wrong?

                           

                          Thanks again!

                           

                          Dave

                          • 10. Re: How do I add back / forward arrows to jQuery carousel?
                            BenPleysier Adobe Community Professional & MVP

                            It looks like the CSS has complicated things slightly, so we'll leave it out for now.

                             

                            Make sure that the HTML looks like. Notice that I have left the pagination out of the markup, this can be added afterwards.

                            <div class="image_carousel">
                                <div id="foo1">
                                    <a rel="fancybox" href="New/assets/florals/tulips.jpg">
                                    <img src="New/assets/florals/tulips.jpg" alt="tulips" width="120" height="100" />    </a>
                                    <a rel="fancybox" href="New/assets/florals/blueIris.jpg">
                                        <img src="New/assets/florals/blueIris.jpg" alt="blue iris" width="120" height="100" border="0" />    </a>
                                    <a rel="fancybox" href="/New/assets/florals/callaLily.jpg">
                                        <img src="New/assets/florals/callaLily.jpg" alt="calla lily" width="120" height="100" border="0" />    </a>
                                    <a rel="fancybox" href="New/assets/florals/daisy.jpg">
                                        <img src="New/assets/florals/daisy.jpg" alt="daisy" width="120" height="100" border="0" />    </a>
                                    <a rel="fancybox" href="New/assets/florals/sunflowers.jpg">
                                        <img src="New/assets/florals/sunflowers.jpg" alt="sunflowers" width="120" height="100" border="0" />    </a>
                                    <a rel="fancybox" href="New/assets/florals/whiteFlowers.jpg">
                                        <img src="New/assets/florals/whiteFlowers.jpg" alt="white flowers" width="120" height="100" border="0" />    </a>        
                                </div>
                                <div class="clearfix"></div>
                                <a class="prev" id="foo1_prev" href="#"><span>prev</span></a>
                                <a class="next" id="foo1_next" href="#"><span>next</span></a>
                            </div>
                            
                            

                             

                            Make sure that the constructors look like

                            <script>
                            $(document).ready(function() {
                            
                            $("#foo1").carouFredSel({
                                circular: false,
                                infinite: false,
                                auto    : false,
                                prev    : {
                                    button  : "#foo1_prev",
                                    key     : "left"
                                },
                                next    : {
                                    button  : "#foo1_next",
                                    key     : "right"
                                },
                                pagination  : "#foo1_pag"
                            });
                                
                                // Using custom configuration
                            $("#foo1 a").fancybox({
                                cyclic    : true,
                                onStart    : function() {
                                    $("#foo1").trigger("pause");
                                },
                                onClosed: function() {
                                    $("#foo1").trigger("play");
                                }
                            });    
                            });
                            </script>
                            
                            

                             

                            Now when you view it in the browser, you should see Prev and Next at the bottom. Clicking these will give you the result that you are looking for. Use CSS to style the buttons.

                            1 person found this helpful
                            • 11. Re: How do I add back / forward arrows to jQuery carousel?
                              daveharr1s0n Level 1

                              OK, here's the latest and CLOSEST thing I've got to working. Watercolors Plus | Galleries | Floral Watercolors

                               

                              And this is the CSS.

                               

                              .image_carousel {

                                  padding: 15px 0 15px 40px;

                              }

                              .image_carousel img {

                                  border: 1px solid #ccc;

                                  background-color: white;

                                  padding: 9px;

                                  margin: 7px;

                                  display: block;

                                  float: left;

                              }

                              .image_carousel a {

                                  display: block;

                                  float: left;

                              }

                              .clearfix {

                                  float: none;

                                  clear: both;

                              }

                              a.prev, a.next {

                                  background: url(../images/miscellaneous_sprite.png) no-repeat transparent;

                                  width: 45px;

                                  height: 50px;

                                  display: block;

                                  position: absolute;

                                  top: 85px;

                              }

                              a.prev {

                                  left: -22px;

                                  background-position: 0 0;

                              }

                              a.prev:hover {

                                  background-position: 0 -50px;

                              }

                               

                              a.prev.disabled {

                                  background-position: 0 -100px !important;

                              }

                              a.next{

                                  right: -22px;

                                  background-position: -50px 0;

                              }

                              a.next:hover {

                                  background-position: -50px -50px;}

                               

                              a.next.disabled {

                                  background-position: -50px -100px !important;

                              }

                              a.prev.disabled, a.next.disabled {

                                  cursor: default;

                              }

                              a.prev span, a.next span {

                                  display: none;

                              }

                               

                              But as you can see, I'm not quite there ...

                               

                              Anyone?

                               

                              Thanks!

                              • 12. Re: How do I add back / forward arrows to jQuery carousel?
                                daveharr1s0n Level 1

                                Oh, thanks Ben! I just posted what I've got without seeing your reply here. I'm rushing off to work, but will check out what you posted tonight! Thanks much!

                                • 13. Re: How do I add back / forward arrows to jQuery carousel?
                                  daveharr1s0n Level 1

                                  OK, Ben. I just sneaked a peek. Yes, that's kind of where I found myself right before I had to rush off to (where I am now) work. It does work, that's for sure. I guess the next hurdle will be trying to get those buttons to show. The CSS for the prev/next you previously posted makes the prev/next text disappear. I wonder if it's floated off somewhere else on the page. I'll play around with it later.

                                   

                                  Thanks again! 

                                  • 14. Re: How do I add back / forward arrows to jQuery carousel?
                                    daveharr1s0n Level 1

                                    Ben,

                                     

                                    You were a BIG help! I've got it up and working properly, even learned a few tricks since you posted a reply here.

                                     

                                    The last little thing is this. Maybe you can help. My original jQuery for Fancybox -- prior to my client wanting the jQuery carousel -- looked like this:

                                     

                                    <script type="text/javascript">

                                    $(document).ready(function(){

                                    $(".fancybox").fancybox({

                                        helpers:  {

                                            title : {

                                                type : 'inside'

                                            },

                                            overlay : {

                                                showEarly : false

                                            }

                                        }

                                    });  

                                    });

                                    </script>

                                     

                                    How do I get my titles (as set up in the script above) to display INSIDE the fancybox with the script I have now, which looks like this:

                                     

                                    <script>

                                    $(document).ready(function() {

                                     

                                    $("#foo1").carouFredSel({

                                        circular: false,

                                        infinite: false,

                                        auto    : false,

                                        prev    : {

                                            button  : "#foo1_prev",

                                            key     : "left"

                                        },

                                        next    : {

                                            button  : "#foo1_next",

                                            key     : "right"

                                        },

                                        pagination  : "#foo1_pag"

                                    });

                                       

                                        // Using custom configuration

                                    $("#foo1 a").fancybox({

                                        cyclic    : true,

                                        onStart    : function() {

                                            $("#foo1").trigger("pause");

                                        },

                                        onClosed: function() {

                                            $("#foo1").trigger("play");

                                        }

                                    });   

                                    });

                                    </script>

                                     

                                     

                                    I've tried a few different way, with no success. It's got to be fairly simple, right?

                                     

                                    Here's a link to the page: Watercolors Plus | Galleries | Bird Watercolors

                                     

                                    Thank you so much, you've been very helpful!

                                     

                                    Dave

                                    • 15. Re: How do I add back / forward arrows to jQuery carousel?
                                      BenPleysier Adobe Community Professional & MVP

                                      Add a div to the anchor element (@Murray: this is allowed in HTML5) as per

                                      <a class="fancybox" rel="birds" href="assets/birds/pelican2.jpg" title="Cranes.">

                                          <img src="assets/birds/pelican2Thumb.jpg" alt="Pelican." width="108" height="90" border="0" />

                                          <div>Pelican</div>

                                      </a>

                                      A bit of styling will bring the title back into the image.

                                      .fancybox {

                                          position: relative;

                                      }

                                      .fancybox div {

                                          position: absolute;

                                          bottom: 10px;

                                          left: 15px;

                                          color: yellow;

                                      }

                                      • 16. Re: How do I add back / forward arrows to jQuery carousel?
                                        daveharr1s0n Level 1

                                        Thanks, Ben. Tried, but it didn't seem to work. I mean, I have the div already, right? Should it even be necessary to use CSS when I had it displaying inside the box in the first place, prior to adding the carouFredSel?

                                         

                                        Like I said, new to jQuery. Tried extracting the portion from the first image without the carousel and adding it to the jQuery on the page with the carousel, but I'm just guessing, basically. Lots of ('s and {'s !

                                         

                                        I thought it had something to do with the jQuery helpers.

                                         

                                        Any clue from comparing the two scripts posted above?

                                         

                                        As always, I appreciate your feedback!

                                         

                                        Dave

                                        • 17. Re: How do I add back / forward arrows to jQuery carousel?
                                          daveharr1s0n Level 1

                                          Like I said, Ben, I'm new to jQuery. I'm really looking forward to going through learning this step by step over there at the W3Schools Online Web Tutorials. But after thinking about it I thought I'd try two script tags in the head.

                                           

                                          In the "carouFredSel with fancybox" script I deleted what I believed to be the portion that dealt exclusively with the fancybox  (although it was preceded by the $("#foo1 a") . I replaced it with what worked in the first version, without the carousel. And it worked! Then I removed the ending </script> tag from the first and the beginning <script> tag from the second, and it still works.

                                           

                                          But I wonder, is there anything wrong with it, as far as syntax? Would there have been a simpler, more efficient way? And why was the $("#foo1 a") preceding the carousel with lightbox set-up to begin with?

                                           

                                          Here's what I have that now works. If you see something blatantly (or not-so-blatantly) wrong with it, please let me know.

                                           

                                          <script>
                                          $(document).ready(function() {

                                          $("#foo1").carouFredSel({
                                              circular: false,
                                              infinite: false,
                                              auto    : false,
                                              prev    : {
                                                  button  : "#foo1_prev",
                                                  key     : "left"
                                              },
                                              next    : {
                                                  button  : "#foo1_next",
                                                  key     : "right"
                                              },
                                              pagination  : "#foo1_pag"
                                          });
                                          });

                                           
                                          $(document).ready(function(){
                                          $(".fancybox").fancybox({
                                              helpers:  {
                                                  title : {
                                                      type : 'inside'
                                                  },
                                                  overlay : {
                                                      showEarly : false
                                                  }
                                              }
                                          });  
                                          });
                                          </script>

                                           

                                           

                                          Thanks again for your replies. Very kind of you, much appreciated!

                                           

                                          Dave

                                          • 18. Re: How do I add back / forward arrows to jQuery carousel?
                                            BenPleysier Adobe Community Professional & MVP

                                            Hi Dave,

                                             

                                            I thought that you wanted the title inside the carousel, that is the basis upon which I gave you the answer.

                                             

                                            What you have done, quite rightly, is supply a title to the fancy box. As far as I can see, you have used the correct construction, well done!

                                            • 19. Re: How do I add back / forward arrows to jQuery carousel?
                                              daveharr1s0n Level 1

                                              Oh, now I see where you were going with that. I'm sorry, I probably didn't explain it so well. And come to think of it, I think I actually DID have a little CSS there for it to display as desired, pre-carousel. Funny, adding the carousel solved one problem, but created two -- the titles outside the box (posted here) and something I didn't mention -- the main picture not opening in Fancybox. I don't know what I'm doing, when it comes to jQuery. I kind of had to "wing it". And what I just did solved both problems. You might say I "killed two birds with one stone". (Sorry for the puns, I ended up using the client's "Birds" page to figure it out.)

                                               

                                              Hey, thanks for your help and guidance on this, Ben! You've been so helpful and I appreciate it!

                                               

                                              This is what I was looking to do, if interested -- and if it displays as intended on your computer machine. (I still have to do that cross-browser check!)

                                               

                                              http://www.watercolorsplus.com/New/birds4.html

                                              • 20. Re: How do I add back / forward arrows to jQuery carousel?
                                                daveharr1s0n Level 1

                                                Twitchy iPad wouldn't let me reply. Had to first compose, then copy and paste. Sorry if that previous post appears in different font.