This custom widget does not apply to all themes. Check your theme's description first, to make sure it's included.
To add the Nivo slider to one of your pages you will need to add some body HTML. This is ususally just a <div> with images. Note that only images or images wrapped in links are allowed in the slider div. Any other HTML will break the slider.
<div id="slider" class="nivoSlider">
<img src="images/slide.1.jpg" alt="" />
<a href="http://bindtuning.com"><img src="images/slide2.jpg" alt="" title="#htmlcaption" /></a>
<img src="images/slide3.jpg" alt="" title="This is an example of a caption" />
<img src="images/slide4.jpg" alt="" />
</div>
<div id="htmlcaption" class="nivo-html-caption">
<h3>Any HTML can be used here</h3>
<h6>Sample caption</h6>
</div>
Adjust values, image paths and texts as necessary.
If you need the banner to have no space at the bottom, remove class widget.
In DNN, also check that "Display Container?" is not selected.
Furthermore, the Nivo Slider has plenty of options to fiddle with. Below is an example of the code with all available options and their defaults.
This code is located in your theme's .ascx files, at the bottom, and can be adjusted as needed.
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect: 'random', // Specify sets like: 'fold,fade,sliceDown'
slices: 15, // For slice animations
boxCols: 8, // For box animations
boxRows: 4, // For box animations
animSpeed: 500, // Slide transition speed
pauseTime: 3000, // How long each slide will show
startSlide: 0, // Set starting Slide (0 index)
directionNav: true, // Next & Prev navigation
directionNavHide: true, // Only show on hover
controlNav: true, // 1,2,3... navigation
controlNavThumbs: false, // Use thumbnails for Control Nav
controlNavThumbsFromRel: false, // Use image rel for thumbs
controlNavThumbsSearch: '.jpg', // Replace this with...
controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
keyboardNav: true, // Use left & right arrows
pauseOnHover: true, // Stop animation while hovering
manualAdvance: false, // Force manual transitions
captionOpacity: 0.8, // Universal caption opacity
prevText: 'Prev', // Prev directionNav text
nextText: 'Next', // Next directionNav text
beforeChange: function(){}, // Triggers before a slide transition
afterChange: function(){}, // Triggers after a slide transition
slideshowEnd: function(){}, // Triggers after all slides have been shown
lastSlide: function(){}, // Triggers when last slide is shown
afterLoad: function(){} // Triggers when slider has loaded
});
}); </script>
The effect parameter can be any of the following:
- sliceDown
- sliceDownLeft
- sliceUp
- sliceUpLeft
- sliceUpDown
- sliceUpDownLeft
- fold
- fade
- random
- slideInRight
- slideInLeft
- boxRandom
- boxRain
- boxRainReverse
- boxRainGrow
- boxRainGrowReverse
More information on Nivo slider usage can be found at: http://nivo.dev7studios.com/support/jquery-plugin-usage/
How do we edit the body? Sorry might be obvious to some.. but not sure how to do it, when I click Edit it jumps below that area.
Hi.
You can user Content Editor Web parts or place holders.
More info the various CMS platforms here (the slider code is different from Nivo):
http://support.bind.pt/entries/20389208-rotating-slideshow-1
Sorry I did mean the Nivo slider. Didnt realize you offered more than one. Any tips on adding the Nivo slider the same way as on the sample page?
Let us know which theme/cms you are using, and we can provide the exact code.
Cheers.
SampleKit
I'd like it to look exactly like the template sample on your site :)
For sample kit we used static images, and we are merely rotating them.
This is SampleKit's source code:
<style>
.nivoSlider {
width:100% !important; /* Change this to your images width, for fixed width */
height:350px; /* Change this to your images height */
}
</style>
<div id="slider" class="nivoSlider">
<img src="demoimages/homebanner.1.gif" alt="" />
<img src="demoimages/homebanner.2.gif" alt="" />
<img src="demoimages/homebanner.3.gif" alt="" />
</div>
I cant seem to get this to work. I also dont see the .ascx file in my themes folder.
I've tried putting the div in a widget and in the layout file but it's the same.
I'm also using the samplekit theme.
Hi Elvia! Which CMS are you using? (DNN, Sharepoint, ...)
Hi Beatriz.
I'm using Orchard CMS
Hi Elvia.
You just need to copy and paste the above code.
If the images don't appear right away, please consider the following:
You don't need the <style> area code, since Orchard removes it anyway
You should be editing an html widget. If you add the code to a regular text widget, the html won't render into sliding images
The image urls need to be either absolute (http://www.mysite.com/myfolder/image1.gif) or relative to the site (/myfolder/image1.gif), or the widget will not display any images
The ascx files you mentioned are for DotNetNuke cms only. You don't have to do any additional steps to get this working.
So, considering the urls to the images are ok and you are using an html widget, all you have to do is click the "html" button to open up the html view, and add:
<div id="slider" class="nivoSlider">
<img src="demoimages/homebanner.1.gif" alt="" />
<img src="demoimages/homebanner.2.gif" alt="" />
<img src="demoimages/homebanner.3.gif" alt="" />
</div>
Okay it's working now! Thanks! Where do i find the additional options? Cause right now the dots or the arrows dont show like they do in your slide sample
Info on all widgets here,
http://support.bind.pt/forums/20237718-custom-widgets
To configure the widget in Orchard, you can edit Layout.cshtml and Layout-HomePage.cshtml (for inner pages or just the home page), found on the Views folder of your theme (Themes[ThemeName])
The widget isnt the problem. We cant get the navigation to show up, or the circle buttons.
Please replace your widgets.css file (\Themes\SampleKitTheme\Styles\css) by the one attached.
It should fix the paths for the missing images.
Hi!
I'm using Flexo for Sharepoint. Where exactly do I add the script on the page so that the banner will appear directly in the 'banner area' right beneath the navigation menu?
Also, is it the master page or the actual page?
Thanks.
Hi,
In the following link from our knowledge base you have some information about your questions.
http://support.bind.pt/entries/20673663-how-do-i-use-the-available-content-place-holders-to-add-content
For further information you can always open a ticket.
Regards
Hi i added the code provided in this section but it only showed this one as a result: ( see the attached file )
how can i include css styling and scripts to make it work?
Hi,
Could you let us know which theme and cms are you using?
So I've been attempting to setup the slider on my new site: buffsheep-entertainment.com, unfortunately nothing but failure. I have tried pasting the provided code (above) of course modified to use my images but I get horrible style issues. I have tried pasting the code into an html widget, and then in a page content sections html source; but neither have produced any working results. (the images replicate all over the screen in different places, please feel free to check it out). I did notice that after saving the code, it always removes the <style></style> code; Is there someplace else i should be placing the style code? Or all of it? Appreciate the help, thanks =)
Note: I am using Orchard and the Flex-o theme.
Hi Warren,
So I saw that your site is not available anymore. But this issue seems that the script of Nivo Slider wasn't working properly.
Since then we upgrade Flexo theme, and we support a new responsive slider widget now: http://bindtuning.com/cms/orchard/orchard-1/theme/Flexo/page/Sliders/customize. I suggest you to go to your theme's page on bindtuning.com, upgrade it and then use this new slider which is cooler and easier to apply. On this link you can find the steps to apply it.
But if you prefer using Nivo Slider no problem, just let us know and we can help you! :)
Cheers.
Hi,
I am using umbraco 6.0.3 and the SampleKit theme.
I use nivo slider as follow:
In Template file:
<asp:Content ContentPlaceHolderId="HomeBannerZone" runat="server">
<!-- Insert "HomeBannerZone" markup here –>
.nivoSlider {
width:200px !important; /* Change this to your images width, for fixed width */
height:200px !important; /* Change this to your images height */
}
<umbraco:Item field="homeBannerZone" runat="server" />
/asp:Content
And then paste the html code on content section using HTML button as follow:
<div id="slider" class="nivoSlider">
<img src="/media/nivo\_image/ImgA.jpg" />
<img src="/media/nivo\_image/ImgB.jpg" alt="" title="Test test" />
<img src="/media/nivo\_image/ImgC.jpg" alt="" />
</div>
After I press save button the attribute “title="Test test"” is removed by umbraco(i think).
and when I preview this page only the first image is shown on nivo slider.
The other images is not show even I click the ‘<’ ‘>’ button.
please help me out
Thanks in advance.
Hi Kayatao , I already emailed you.
Can you change/replace in the template :
document.write("<script type='text/javascript' src='//code.jquery.com/jquery.min.js'><" + "/script>");
Replace with:
document.write("<script type='text/javascript' src='//code.jquery.com/jquery-1.8.0.min.js'><" + "/script>");
Hi Pedro,
It work!!!
Thank you for your help
I am using the Terra theme on Umbraco. Is there a way to change the effect of the slider from within the cms?
Hi Rudy,
No, you have to change the slider's effect directly in the javascript call.
Let me know if you have more questions.
Hi there, I am not a programer but have managed to install the nivoslider into my oscommerce site, looks great but it is trashing another jquery widget used on the site.
I wonder if anyone could lend a hand resolve it.
You can see it here http://hire.burnsidehighlanddress.co.uk/index.php
as well as a few buttons through out the site the biggest problem is found here http://hire.burnsidehighlanddress.co.uk/product_info.php?products_id=39
the images on the product page should be a warm and cosy cluster in the top left of the page that zooms out when clicked.
If I remove the slider it all goes back to normal, Pleas help! took me hours to get that on there!
Hi Brian,
You are getting many script errors on the page, that is causing the issues on the content.
We need to see how did you implemented the nivosliders scripts.
I will open a ticket support in your name so we can track this better.
Many thanks for the quick response Pedro,
I have added the missing "Temp/style.css" but if anything it has made the look of the site worse!
I have placed the HTML into includes/header.php just below the html for the top menubar
all the css, jquery stuff i placed in the template folder beside all the other existing css and jquery stuff
I am working on a modified oscommerce store using the following mod
http://addons.oscommerce.com/info/8958/v,23
Brian , are you receiving emails from our ticket support?
You have at the header this jquery reference
<script type="text/javascript" src="ext/jquery/jquery-1.8.0.min.js"></script>
then you have next to the nivoslider a new reference to jquery, this is may causing some functions not to work on a diferent jquery version and given the errors on the console. can you try to remove the jquery-1.9.0.min.js reference?
<script type="text/javascript" src="../template/scripts/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="../template/jquery.nivo.slider.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>