JQuery Nivo Slider v2.0 not Showing Up in BlogEngine 2.8

Problem

Actually problems were multiple but, in this blog I will only focus on the Nivo Slider’s integration to BlogEngine.Net. I installed the NivoSlider from the Gallery option of the BlogEngine.Net. The installation was successfull and I could see the NivoSlider in the Installed Extension’s option.

After that I went through their tutorial and without doing any custom modification I wrote the following code in one of my post, more info


[SLIDER:slider1]

After saving the post, I navigated back to the front page. However, nothing appeared except for an edit link. Now, when I checked the Console in my Google Chrome browser, I saw the error that the method LoadSlider is undefined.

Solution

It was clear that the somehow the webpage is not getting the reference of the nivo-slider-js. So to add it’s reference I added the following code inside my theme page body section


<link type="text/css" rel="stylesheet" href="<%=Utils.AbsoluteWebRoot %>Styles/nivo-slider.css" />
<script type="text/javascript" src="<%=Utils.AbsoluteWebRoot %>Scripts/jquery.nivo.slider.pack.js"></script>

Now the slider was showing up in all the posts it had been plugged in.

Note

There’s one more thing I must mention here i.e, if you are integrating NivoSlider 2.0 with BlogEngine 2.8 then the slider may not work properly. The reason is that NivoSlider uses the live method of jQuery and as of jQuery 1.7, the .live() method is deprecated.

To resolve the issue, open the file jquery.nivo.slider.pack and rename the .live() method to .on().
Click here for more info

That’s it!!

Advertisements