Web app Slideshow

[ographix]

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

[Carol_-_BCGurus_com · Accepted solution]

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

[ographix]

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

[dft-au]

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

[sleepingcatnz]

Is it possible to post this link again please?

[BCTemple]

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

[sleepingcatnz]

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.

[BCTemple]

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.

[sleepingcatnz]

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.

[BCTemple]

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.

[sleepingcatnz]

Yes thanks again - will do!

[sleepingcatnz]

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!)

[BCTemple]

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.

[sleepingcatnz]

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.

[BCTemple]

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.

[sleepingcatnz]

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

Kind Regards, Glenn.

[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