Nivo Slider For Weebly. 16 Slide Headers & Rotating Banner Plugin For Weebly Sites
May 1, 2012 Tags: Nivo Slider, Rotating Banner, Weebly Slide Header
Category: Articles, Headers & Footers, Tutorials 43 Comments 
Give your Weebly Sites a pop with the wonderful Nivo Slide Header. All of the 16 transition effects are provided here. Download it for Free if you are a registered member of Weeblyforums.com. You can use the sliders on any number of sites you want. Include them as part of your Weebly Themes & Templates for sale or use them for your clients. Comes with MIT License.
Click the Image to See a Demo of the Slide Header Banner in action
This Nivo Slider is a customized version for Weebly. Before proceeding further, take a look at the Demo of the Nivo Sliders and Effects in action for Weebly Sites. All 16 transitions are included in the download bundle.
Following are the step-by-step instructions to add slide headers to Weebly Sites. We will illustrate it with the example of slide header in http://siteshowcase.weebly.com/slide-headers.html. Briefly, it involves a) Preparing your slides for upload. b) Uploading the slides and files to your weebly site. c) Setting the position for your slide header in index.html d) Add Header Code in “Settings” to start the sliding motion.
So, lets gets started.
Step 1: Download the Script and Styles
Click here to download the script and other files required. You must be logged in for this link to work.
Step 2: Have your images ready
Prepare all the slides you would like to be shown in the banner. Make sure the images are all of same height & width. Generally speaking, this can be the same size as your header image, if you would like the slides to occupy the full width. For our Example, we had five images of sizes 960 x 408 since the siteshowcase.weebly.com template is 960px wide.We named our slides as slide1.png, slide2.png, slide3.png, slide4.png and slide5.png. You can name it any thing. But for now, name them as slide1 etc so that you can just cut and paste the code straight from this tutorial (less editing for you).
Step 3: Upload all the files to your Weebly Site
From your Weebly Website Editor, upload all the files from Step 1 and Step 2. To do that, under “Design” tab click “Edit HTML/CSS”. In the left hand column, you will see option to “Add New Files”. You can upload all the files at once (or) you can upload them one by one.
Use “Add New Files” option to upload the files
Step 4.1: Specify the position for your slider to display
[Note: In this step, you can either use index.html or no-header.html depending on the theme you are using. Older themes use index.html while the newer themes use four different page types in place of index.html]
Once you uploaded your files, select “index.html (or) no-header.html” from “Page Layouts” which is right above the Files section in left column. You will now be able to edit the index.html (or) no-header.html to state exactly where on the page you would like to display the slider. For our Example in the Demo, we wanted the slider just below the site title (or) logo. This is normally where a lot of people would want their slide header to be positioned also. If you are not sure, locate the following line
<div id="content">{content}</div>
and add the following code just above it.
<div class="theme-default">
<div id="slider" class="nivoSlider">
<img src="/files/theme/slide1.png"/>
<img src="/files/theme/slide2.png"/>
<img src="/files/theme/slide3.png"/>
<img src="/files/theme/slide4.png"/>
<img src="/files/theme/slide5.png"/>
</div>
</div>
Step 4.2: Link the Nivo Slider Style Sheet CSS
Link the new style sheet of Nivo Slider by adding the following line to the page layout before /head
For instance, if you use no-header.html page layout, add the line below before /head of no-header.html
<link rel="stylesheet" href="/files/theme/nivo-slider-default.css" type="text/css" media="screen" />
[P.S: If you are using Nivo Slider in other page layouts, you will need to repeat Step 4.1 and Step 4.2 for those page layouts also]
Save Your theme. And you are almost ready to see the result. If you have more images for slider, you can simply add more lines like
<img src="/files/theme/slide6.png"/>
Step 5: Add the Header Code
The last step is to add the following to the “Header Code” of your site. Go to the “Settings” Tab and expand the Search Engine Optimization (SEO) section. Add the following lines to the box saying “Header Code”
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script>
<script src="/files/theme/nivoslider.js" ></script>
<script >
jQuery(window).load(function() {
jQuery('#slider').nivoSlider();
});
</script>
Now Publish your site and you are done.
Following are some additional aspects worth taking a note when using Nivo Slider for Weebly Sites:
- You might run into conflict with other javaScript like AddThis, ShareThis, Wibiya, scrollTopControl etc if you are including multiple instances/versions of jquery. Resolve it carefully. For our example, we are sticking to google api jquery version 1.4.2 and removed all other versions to make the slider coexist with Scroll To Top functionality.
- It is a good idea to use only one transition effect for all the sliders. You can view the demo of all the transitions available at http://siteshowcase.weebly.com/slide-headers.html. Pick the right transition and use the corresponding header code in Step 5.
- You can link each of the header image to a URL by including <a href =”http/…..”> in Step 4 like we did for the demo
<div class="theme-default"> <div id="slider" class="nivoSlider"> <a href="http://weeblyforums.com"><img src="/files/theme/slide1.png"/></a> <a href="http://siteshowcase.weebly.com"><img src="/files/theme/slide2.png"/></a> <a href="http://facebook.com/weeblyforums"><img src="/files/theme/slide3.png"/></a> <a href="http://weeblyforums.com/newsletters"><img src="/files/theme/slide4.png"/></a> <img src="/files/theme/slide5.png"/> </div> </div>
- If you would like to add three transition effects to the slider, your Step 5 Header Code will be some thing like:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script> <script src="/files/theme/nivoslider.js" ></script> <script > jQuery(window).load(function() { jQuery('#slider').nivoSlider({effect:'fold,sliceUp,sliceDown'}); }); </script> - There are a lot of other settings you can customize the slider with. The available options can be found at http://nivo.dev7studios.com/support/jquery-plugin-usage/. These options can be used in Step 5.
If you are familiar with editing HTML/CSS in Weebly, Please check the Advanced Customization of Slide Header (Must be logged in to view its content).
I did everything you said but my photos are being stacked one on top of the other. Can you help me?
There was a mistake in Step 5, line 2. Change the “mynivoslider” to “nivoslider”. Please let us know how it goes.
Hi, I’ve changed step5, it still stacked one on top of the other.
@shunling, please paste the URL. Is it stacked up in the editor window, or is it happening on your site after publishing ? Some scripts do not run in the editor window. In the weebly editor, some scripts do not run or do not get referenced correctly. They should run fine on your live site.
Hi,
thanks for this, very much appreciated.
I had a little trouble getting it working but managed to fix it by changing the header code in step 5.
<script src="files/theme/mynivoslider.js" ></script>
to
<script src="files/theme/nivoslider.js" ></script>
Cheers
mark
Thanks Mark. Updated it in the post and other places.
I’m new to all of this, so don’t judge too harshly…
For whatever reason, following the steps didn’t work for me. On the half-page preview screen below the html coding area, I can see the images associated with the the slider, but when I go to save the page and publish, I don’t see them at all. It looks the same as before entering anything.
I uploaded all of the files, including my own .png’s, which I renamed as suggested, and I put the code in exactly as described. After several attempts, I still have no luck. Any thoughts?
Please note a change in Step 5, Line 2. Change the “mynivoslider” to “nivoslider”.
IMP: If you have used “mynivoslider.js” in Step 5 Line 2, Please note that it is changed to “nivoslider.js”.
Thanks for the correction to step 5 but it hasn’t helped me. My problem occurs when I put the first bit of code in. I resized and renamed all my photos and I placed the codes in the instructed places.
I previously added JavaScript for the ‘up’ button and the floating media bar from you..I will be so grateful for your help.
Tee
ok. If you had the ScrollToTop script, that had the jquery version 1.3.2 which may conflict. Remove the first line of your scrollToTop script. Make sure you have only one googleapis library version running. Both the slider and Up functions will work with one
Not sure about the media bar. If it is from wibiya, addThis, shareThis, then you need to look at how it is included.
Step 1 link is broken
It works for logged in members.
I love this. However, I too followed your instructions, even updating step 5. My images are stacking on top of the other as well. Please advise. Thank you.
If the images are stacked up, it means the script is not referenced correctly or not running. You may not see the slider effect in Weebly Site Editor while editing the page. However, it will work on your live site after publishing.
If it does not work on live site, check the name of the script, and check if you have other instances of googleapis referenced.
Thank you its working now but is there a way to centre the slider?
What is the url ? You can place the slider any where on the page. The DIV wrapping it defines the position. If the image width is different from the width of the wrapper, you may see this offset. It can be adjusted in the css.
Should this work in internet explorer?
I think the code may need some tweaking. Im lookin on IE8 and the images dont appear.
Let me check. Will keep you posted.
Hi Tim, Can you please change the first line in Step 5 as follows:
Previously it was 1.4.2. Would appreciate if you can confirm it working or not. That will help every one else with browser compatibility.
Also please visit the following pages and confirm if the slider is working in IE8. We found it working from our side. Would like to hear from others.
http://freeweeblythemes.weebly.com/free-slide-headers.html
http://siteshowcase.weebly.com/nivo-slider-box-random.html
Perfect, now works on IE8 with no bugs
Seriously good tutorials and amazing fast feedback / support – well done
Thanks
Look forward to next tutorial
I’m having a play to crack this. How do I delete the banner code? Also the slideshow appears to be working underneath the banner! I wan’t to use this theme. Want to start from scratch but want to get to grips first. I have followed the Steps but I’m stuck. please help
Play site
http://ffffflkklp.weebly.com/
I have got this displaying the image now, but where do you put the Nivo Slider options found here:
http://nivo.dev7studios.com/support/jquery-plugin-usage/
How do you delete the header code and image?
Thanks
Thank you, thank you, thank you. I actually figured it out by just making the photos the width of my wrapper so its fine now and everything is working…however how do I incorporate captions with the script? Can I follow the script given on nivo.dev7studios.com page?
@Tee
You can use
<img src="/files/theme/slide1.png" title="Your Caption Here" />to set caption for the corresponding slide. There was a bug with it. If you specify caption for every slide, it does not work. Not sure if its fixed. Give it a try.Is there a way to change the time limit for each slide?
In Step 5, replace
jQuery('#slider').nivoSlider();withThis will set the time for each slide to 2sec. The 2000 is in milliseconds. The default value is 3000, which is 3sec. If nothing is specified, it picks the default 3sec. There are other settings as well toward the bottom of page at http://nivo.dev7studios.com/support/jquery-plugin-usage/
My slider is working beautifully so thank you for that, however I would like to know how to get the slider to appear only on my homepage and how do you add settings if you wish to add more than one. When I add it on one line it does not work. -
jQuery('#slider').nivoSlider({ pauseTime: 2000} { pauseOnHover: true,});
http://www.pnttvonline.com
Disregard my last comment. It works beautifully now. I found I didn’t close a tag in my code. Rookie error totally over looked. Thanks for this great tutorial!
Can I use the nivo slider on a custom HTML element?
Yes you can. But that will run the the slider for that page only. So, you will have to add it through custom-html in all the pages that you would like to add the slider.
The other option is to add it to the “header code for the page”. In Pages tab, select the page, and in “Advanced Settings” for the page, put it in Header Code. This is what we did for the demo in siteshowcase.weebly.com. Since we wanted to demo a different transition in each page, we had to put the code in “Header Code” for the page.
Forgot to mention: You will have to create a new page type if you would like it to run on only specific pages. In a few days, will post an article about how to customize the Nivo Slider for advanced users.
Hi! I managed to put the Nivo Slider on a Custom HTML. However, some transitions are not working. To be specific, it’s the sliceUpDownLeft transition. But the others are working good!
If there is conflict with other javascript, then some transitions would fail. It happened to us when we had scrollToTop with 1.3.2 and the slider using 1.4.1. Try using only one (1.5.1) and see. Make sure you do not run multiple instances of the same script.
Are you talking about the code as a whole everything we added to the html page in design or what we had to place in the ‘Header Code’ of the site?
I would like to have my slider on my homepage only!
Will add another article in few days about customizations you can do for Nivo Sliders. If you need slider for Home page only, that requires creating a new page type and applying some changes to those pages only. Too much information in this article may confuse people.
Can you tell me if the slide header looks fine on your end? I use a MAC and on Safari. Not sure how it looks in IE8. The other computer I have is PC but old IE. Doesn’t look right there.
http://www.loudounallergynetwork.org/
Change the first line in your “Header Code” to
You are currently using 1.4.2 which does not show correctly for IE8 and IE9. You can see how your site looks in all browsers at https://browserlab.adobe.com/en-us/index.html
Enter your url and it will give you a snapshot of how it looks in each of the browser.
Raju,
“Some scripts do not run in the editor window. In the weebly editor, some scripts do not run or do not get referenced correctly. They should run fine on your live site.”
How is this acceptable? I love the script, but I can’t use it on my site because every page is unreadable in the editor window. People are really dealing with okay with this?
Thanks and I hope you can come up with a solution for it. All browsers seem to show the issue.
Your pages are readable. The content of your pages is shown after the images. They don’t overlap. So if you have three images for slider, then you will see the three images displayed followed by the site content. I sincerely wish there is a “Preview” button at least to see how the page looks.
hi, how i delete the default header of the theme?
The images in the slider overlaps the content for my site–at least for the first post, and it is unreadable.
Are you saying this should not be the case?
It did not happen in the themes I tried. It must be some thing to do with your theme.
Comments for this topic are closed. Please use the Weebly Templates & Plugins forum for further discussions.