How do I add a sliding banner to my template?

CM1
1

We are trying to incorporate a sliding banner into our homepage that is not a flash file. Is there a widget I need to use to produce this functionality? There are 5 banners that are all built out in HTML and CSS. How do I make them automatically scroll?

2

I do have some jquery flexslider at the bottom of the HTML page that I assume would help this function but I have no idea what to do with the code. Thanks so much for the help!

3

Hey Julie,
I use BXSlider. I have found that it works great with Percussion. The slider is pretty simple to implement. If you need some help implementing it, I wouldn’t mind helping you.

4

I would need some help if you don’t mind. Our banners are not flat images. I guess I cold make them such If i needed to but they are styled with CSS and HTML. The bxSlider I would use is Auto show with start / stop controls. We currently have 5 banner that look like the image attached and would like them to scroll automatically and continuously. Please help :slight_smile:

5

You’lll see in our code that the only image file would be of the man on the mountain.

6

Do you happen to have a URL that I could look at??

7

Here you are: http://greenolivz.com/demo/vastecweb/…

8

Julie,

Try this code in place of your javascript you currently have right below where you call the jquery.flexslider.js file.

OLD

$(window).load(function(){   
$('.flexslider').flexslider({   
animation: "fade",   
start: function(slider){   
$('body').removeClass('loading');   
}   
});   
});

NEW

<script type="text/javascript" charset="utf-8"> <br />
$(window).load(function() { <br />
$('.flexslider).flexslider({ <br />
 animation: "fade", <br />
 animationLoop: true, <br />
 slideshow: true, <br />
 slideshowSpeed: 7000,
        //Integer: Set the speed of the slideshow cycling, in milliseconds
1 second is equal to 1000 interval <br />
 animationSpeed: 600,
         //Integer: Set the speed of animations, in milliseconds 1 second is equal to 1000 interval <br />
 controlsContainer: ".flex-control-nav" <br />
}); <br />
}); <br /> </script>
9

I haven’t incorporated the JS yet bc I dont know where it goes? That was the test page from the developer. Do I use a widget in the footer? Somewhere else?

10

Sorry about that Julie,

I would put any of your javascript in the header are of the template. When you are working on a template, click on the “CONTENT” tab at the top. Then you will want to click on “Actions” then “Edit Meta-Data”. Once you are in the Meta-Data section click the “Additional Code” section and place all your javascript items in the “Additional Head Content” area.

11

I am not finding in the javascript where the block of old code is located, sorry. Can you direct me to a specific line? Thanks so much!

12

The code starts on line 288 and goes to 298.

13

Thanks so much I was using firebug. But when I viewed the page source I found what you are talking about :slight_smile: Let me see if this works.

14

This is the code I am using and its not working:

15

I just viewed the page in firefox and it was working perfectly. I also just tested it in chrome and ie and it works. If you have firebug open, it might be failing.

16

I am viewing the page directly from the UI and the banner is not scrolling. I don’t have firebug open either. Could you check once again directly from the UI?

17

Julie,
Are you viewing it through percussion??? The page that I’m viewing is not a percussion built page.

18

Hi Julie,

To clarify, you’re attempting to build the page you linked to as a template in CM1, is that correct? Do you have the remainder of the HTML content from that design mock-up page in either HTML or Rich Text widgets, and does it all display correctly aside from the banner area?

One thing I see is that you are referencing you JS file using a relative path, which won’t work. Here’s the snippet I’m referring to:

<script defer src="js/jquery.flexslider.js"></script>

You’ll want to upload this JS file (and any other JS files you reference) into a “js” folder within your site’s theme directory, which can be accessed through the Finder by following a path similar to this:

/Design/web_resources/themes/{my_theme_name}

Once you create a “js” folder in this directory and upload your jquery.flexslider.js file into this directory, the full path to the file should be:

/Design/web_resources/themes/{my_theme_name}/js/jquery.flexslider.js

Then, in the code you include in the head area of your template’s Meta-data, update the reference to the JS file to use the same path as above, but without the “/Design” portion:

<script defer src="/web_resources/themes/%7Bmy_theme_name%7D/js/jquery.flexslider.js"></script>

If there’s any chance you can publish a page using this template out to an obscure location on your web server, if you linked Matt and I to that it would be much easier for us to assist you.

19

Nathaniel-

Thanks for weighing in on this. We are going to build a testing environment, because this is a new site, on Monday morning and I will publish the page then. Stay tuned…

Thanks so much for the help :slight_smile:

Julie

20