16 Replies Latest reply on Feb 11, 2017 12:18 AM by charlottev80428000

    Web app Slideshow

    ographix Level 1

      Hey People

       

      Can some one give me a link to a really easy way how to create a web app slideshow. like the slide show on this page. http://nivo.dev7studios.com/

       

      Thanks

        • 1. Re: Web app Slideshow
          Carol - BCGurus.com Level 2

          Hi ographix,

           

          Once you find a jquery slider you like, build the web app in a way that the list view outputs the correct markup.

           

          If you are still having problems, we have a handful of tutorials available to PRO members that will walk you through how to set up a slideshow. They are listed below. 

           

          http://bcgurus.com/pro

          - Creating a responsive hero slideshow using Flexslider 101

          - Responsive Slider Web App via Flexslider

          - Web App Hero Slideshow

          - Photo Gallery Hero Slideshow

           

          Carol | BCGurus.com | http://bcgurus.com/Business-Catalyst-Templates for only $7

          • 2. Re: Web app Slideshow
            ographix Level 1

            Hey Thanks for the reply.

             

            i sort of under stand.

             

            Any chance you know of free tutorials around about this?

            only just starting and dont really have the money.

             

            Thanks

            • 3. Re: Web app Slideshow
              dft-au Level 2

              Hey Ographix,

               

              Here is a tutorial on how to setup a simple slideshow using web apps. If you have any issues let me know.

               

              http://bit.ly/M2NxpV

              • 4. Re: Web app Slideshow
                sleepingcatnz Level 1

                Is it possible to post this link again please?

                • 5. Re: Web app Slideshow
                  BCTemple Level 1

                  Sorry Sleepingcatnz, we moved sites so the link changed. You can catch that tutorial here: http://bit.ly/UP6cGb

                  • 6. Re: Web app Slideshow
                    sleepingcatnz Level 1

                    Thanks BC Temple - appreciated! There seems to be so many choices for sliders - do you recommend FlexSlider over the others? I'm reverse engineering the Oxo template.

                    • 7. Re: Web app Slideshow
                      BCTemple Level 1

                      No worries. It really depends on what the sliders purpose is. There are a lot of really good ones for different content types.

                       

                      If you just need a standard slider then FlexSlider does a good job. It's got touch gestures for tablets and mobile, its responsive and was purchased by WooThemes who look like they plan to continue updating and supporting it which is also good.

                       

                      There are other lightweight ones around, or bulky ones with lots of features but again it depends what you need.

                      • 8. Re: Web app Slideshow
                        sleepingcatnz Level 1

                        BCTemple. Thanks for this - exactly what I had in mind. I'm having a few issues tho unfortunately... if you get the time, can you please see: http://meluka.worldsecuresystems.com/home The 'white bar' is where the slideshow should be. Static image underneath is the old one. Many Thanks, Glenn.

                        • 9. Re: Web app Slideshow
                          BCTemple Level 1

                          Hi Glenn,

                           

                          It doesn't look like your script is initialising. The one at the bottom of the page needs to be wrapped in <script> tags.

                           

                          Since you're using an external file, I'd recommend using that as it's better. I see you've added the code in, but it's above the new scripts.

                           

                          So it's initialising before the scripts it requires have loaded.

                           

                          If you remove the one from your footer, and move your external script below the FlexSlider scripts it's more likely to initialise. Does that make sense?

                           

                          If not shoot me a PM and I'll take a closer look for you.

                          • 10. Re: Web app Slideshow
                            sleepingcatnz Level 1

                            Yes thanks again - will do!

                            • 11. Re: Web app Slideshow
                              sleepingcatnz Level 1

                              BCTemple, I'm not sure where I'm going wrong so if you could cast your expert eye over it that would be very helpful please! Follwing code is in header:

                               

                              <link type="text/css" href="/css/flexslider.css" rel="stylesheet" />

                                      <script src="http://code.jquery.com/jquery-latest.min.js"></script>

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

                                      <script src="/js/jquery.flexslider.js" type="text/javascript">$('.flexslider').flexslider({

                                      animation: "fade",

                                      slideshow: true,

                                      slideshowSpeed: 7000,

                                      animationDuration: 600,

                                      });</script>

                               

                              Content Holder that has the Web App is in the body of the Template (which I think/hope is all correct!)

                              • 12. Re: Web app Slideshow
                                BCTemple Level 1

                                Sorry that's my fault, I should have explained that better.

                                 

                                You're scripts were fine:

                                 

                                <link type="text/css" href="/scripts/flexslider/flexslider.css" rel="stylesheet" />

                                <script src="http://code.jquery.com/jquery-latest.min.js"></script>

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

                                 

                                First things first, that jquery latest only needs to be loaded if you don't already have the jQuery library being loaded. You do, but it's way old (1.4.4) so I would remove the old one and replace it with this one.

                                 

                                Your initialising code should just be wrapped in normal script tags:

                                 

                                <script type="text/javascript">

                                $(document).ready() {

                                $('.flexslider').flexslider({

                                        animation: "fade",

                                        slideshow: true,

                                        slideshowSpeed: 7000,

                                        animationDuration: 600,

                                        });

                                });

                                </script>

                                 

                                If it's going to be in it's own scripts tag you should also call it in either on window or document load.

                                 

                                It's preferable to put your JavaScript/jQuery codes all in an external file. You have one at the moment called js/jquery.functions.js which has the Cycle slider code in it.

                                 

                                You could remove all the code in there and make that your functions file. Then any other JS you add in for other plugins can all be initialised in order, in one file.

                                 

                                Just make sure it's the last file to be loaded as the others need to load before it.

                                 

                                If I'm not explaining it well enough just shoot me a PM and I'll give you a hand.

                                • 13. Re: Web app Slideshow
                                  sleepingcatnz Level 1

                                  Thanks BCTemple, I'll do this first thing tomorrow (it's been a long day!) Just one question - what's a PM? I really appreciate your help with this.

                                  • 14. Re: Web app Slideshow
                                    BCTemple Level 1

                                    No worries, PM = Private Message - which you can send by going into a users profile (click the name or the avatar) and then top right is a link to send private messages, under actions.

                                    • 15. Re: Web app Slideshow
                                      sleepingcatnz Level 1

                                      BCTemple, Thanks for all your help with this. I've installed Nivo Slider that works well.

                                       

                                      Kind Regards, Glenn.

                                      • 16. Re: Web app Slideshow
                                        charlottev80428000

                                        Hello,

                                         

                                        I am looking for a way to make a jQuery slider work with Business Catalyst and Muse (responsive). It is really hard find any documentation about this subject.

                                         

                                        Hope that anybody here can help.

                                         

                                        Thanks