A few weeks ago, someone on mojoPortal forum recommended a jQuery image slider called Nivo Slider. So I checked the free image slider at their homepage here. Wow! BLING! The Nivo Slider is open source and released under the MIT license. This is a very nice image slider so I decided I wanted to use it both as a page feature image slider and also as a header image slider. I spent a whole day creating the 2 User Controls I needed to get everything to work the way I wanted and decided to share it with the mojoPortal community. The code works great but is not polished, so I call this feature "a work in progress" and I am sharing it in it's current semi-automatic mode. I say semi-automatic because it is not exactly "end user friendly" yet! Don't be afraid, It's really quite easy. For those that are comfortable uploading a few images and editing 2 or 3 files, I hope you will love my Nivo Slider implementation.
Here's directions how to install my Nivo Slider implementation in mojoPortal 2.3.6.6 or higher.
1)
Use as a feature Nivo Slider on a page. Download the "Feature Code" Just unzip the file into your website root. Then navigate to your sites /setup/default.aspx to install the feature. Then just add the feature "Nivo Slider" to any page and you will have the demo slide show that comes with Nivo Slider.
When you want to change those demo images to your own images follow these directions:
a) change the image file names in YourWebsiteRoot/Nivo_Slider/Nivo_SliderModule.ascx to something like this with your image file names.
<div id="slider" class="nivoSlider">
<img src="Data/Sites/1/Nivo_Slider/image/image_one.jpg" alt="your image alt text" />
<img src="Data/Sites/1/Nivo_Slider/image/image_two.jpg" alt="your image alt text" />
<img src="Data/Sites/1/Nivo_Slider/image/image_three.jpg" alt="your image alt text" />
<img src="Data/Sites/1/Nivo_Slider/image/image_four.jpg" alt="your image alt text" />
</div>
NOTE: I have removed all image links and image descriptions to keep this example simple.
b) copy your images to the folder listed above.
c) change the image Width and Height in YourWebsiteRoot/Data/Sites/1/Nivo_Slider/css/style-module.css file at around line 87/88.
Done! ( I am going to automate this in the future sometime allowing you to simply enter the image width, height and folder in the feature settings)
2)
Use as a Nivo Slider in the header section of a skin. If not already done in (1)above ( Download the "Feature Code" as above and unzip the file into your website root. Then navigate to your sites /setup/default.aspx to install the feature.)
NOTE: This adds 2 skins to your mojoPortal Website /Data/Sites/1/skins/(artisteer-30Sketch2Plan-brown and artisteer-30Sketch2Plan-brown-header).
Just switch to the skin artisteer-30Sketch2Plan-brown-header on a single page or the site and you will see the Nivo Slider demo in the header.
To allow the Nivo Slider Header to work with your skin requires that you change the layout.master file for your skin. Your skin files are located here: /Data/Sites/1/skins/
The reason my setup adds the artisteer-30Sketch2Plan-brown-header to your skins folder is this is the easiest way for me to show you how to edit a layout.master file to allow this to work. Take a look at the this file in the included artisteer-30Sketch2Plan-brown-header skin.
You need to add what I have placed on line 2 to your skins layout.master:
<%@ Register TagPrefix="nivo" tagName="NivoSlider" src="~/Nivo_Slider/Nivo_SliderHeader.ascx" %>
Then in the class tag for your header you reference the line above like this:
<div class="art-header">
<nivo:NivoSlider id="myNivoSlider" runat="server"/>
</div>
My example is for an atisteer skin (yours may be different) and I remove 22 lines of no longer needed code inside the <div class="art-header"> tag and replaced it with just this one line:
<nivo:NivoSlider id="myNivoSlider" runat="server"/>
Why? Well I no longer needed to reference the old header image and I no longer wanted the logo image, siteTitle or siteSlogan.
Your implementation may be different.
For the rest of the header implementation, follow a), b) c) from (1) above BUT in c) modify style-header.css instead. I use a separate css file for the header feature to allow you to use both the header and feature Nivo Slider in the same skin, thus using it twice.
Done! (I will NOT automate the way the Nivo Scroller works in the header). This will stay a very manual implementation.)
On my Website here, this page is setup to show Nivo Slider working as a feature/module in the page body. This pages parent menu tab called mojoPortal has a Nivo Slider User Control placed in the header of the page. The reason you don't see this Nivo_Slider header on the rest of the site is because these 2 mojoPortal pages are set to a different skin than the rest of the Website.
Along with the feature install code, I have also included the VS 2010/Dot.Net 4 source project code in case you want to change or enhance the feature. I welcome all suggestions for improvements to this feature implementation. Send me an email to rick@hubka.com. I will try my best to upgrade "Nivo Slider for mojoPortal" every month with the regular mojoPortal updates.
Oh yes. You also get this nice light brown Artisteer 3.0 skin in 2 versions (Nivo Body and Nivo Header) with the install. The install comes working with images as you see it here on my home page. That way you can see examples how to edit the aspx and css files and how to altered the layout.master file to reference the Nivo Slider User Control to put the slider in your Web page header/banner section.
This is a FREE open source feature just like mojoPortal and Nivo Slider. However I would ask a favor if you appreciate what I have done.
If you have a Google account (Google, Gmail or Google+), please follow directions below and visit my new personal business Website. Thanks.
BTW. If you have not signed up for Google Plus yet (you need an invite) use my contact form page asking for one and I'll tell Google to invite you.
DOWNLOADS
Oct 4, 2011 - Update. I have been doing lots of Nivo testing with different Artisteer skins. I have found (1 out 6) skins where Nivo does not render correctly. I am still working on determining what the problem is. So far I think it is a css setting. I'll update the files when I get this fixed.
Feature Code - September 21-2011 - Just unzip the file into your website root. Then navigate to your sites /setup/default.aspx to install the feature.
These downloads below are for developers only and can't be used to install the feature.
Developer Project Source Code - mojoPortal V2.3.6.7
Developer Project Source Code - mojoPortal V2.3.7.0