How to use jQuery plugins with BlogEngine.NET?

Mar 29, 2010 at 9:54 PM

I was trying to use NivoSlider (http://nivo.dev7studios.com/) plugin with BlogEngine.Net, but geting all sort of javascript errors all the time. I've tryied $j = jQuery.noconflict()...

Can someone help to integrate this plugin into my blog? :]

Coordinator
Mar 29, 2010 at 10:39 PM

I would try not using 'noconflict'.  BE 1.6, and even BE 1.5, no longer uses the $ alias.  But, at the end of blog.js, it will assign the $ alias to the 'BlogEngine' namespace if $ is not already being used.  So, if you don't use noconflict, then jQuery will use $ and BE should leave the $ alias alone.  And then things might start working.

Mar 29, 2010 at 11:21 PM

I have "js/jquery-1.4.2.min.js" in root directory on blog. I'm adding "<script>" tags in "site,master" of my theme, also NivoSlider is added in "site.master"... when I'm loading my blog in browser there are lot of javascript errors... and the slider isn't visible...

Coordinator
Mar 30, 2010 at 12:17 AM

I just installed it on a test blog I have.  The one problem I ran across was the 'pathing' (or SRC) for the JS file.  If you can use an absolute URL to the CSS and JS files, that'll be easiest.  For reference, here's what I put in my site.master file:

<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://nivo.dev7studios.com/scripts/jquery.nivo.slider.pack.js" type="text/javascript"></script>	

<script type="text/javascript">
$(window).load(function() {
	$('#slider').nivoSlider();
});
</script>	

You should probably AVOID what I did by directly referencing the NivoSlider JS file on the creator's website.  Instead, if you can replace that last <script> tag so it points to your own site (probably via an absolute URL beginning with http://), that would be more considerate.

The CSS file (nivo-slider.css) I put in the theme folder.

Mar 30, 2010 at 7:52 AM

Thanks Ben. I'll try this on my blog... hope it works.

Jul 21, 2010 at 7:05 AM
Edited Jul 21, 2010 at 7:07 AM

I am not sure if you were able to get your plugin working but I have been working on getting Jquery to function in BlogEngine and have finally worked out the best way to get it to work with pretty much any theme.

Just add this into your masterpage .cs file and make sure you know where your files are at to update the src path.

HtmlGenericControl js = new HtmlGenericControl("script"); 
js.Attributes["type"] = "text/javascript"; 
js.Attributes["src"] = Request.ApplicationPath + "/scripts/jquery.js";
Page.Header.Controls.Add(js); 

HtmlGenericControl js2 = new HtmlGenericControl("script"); 
js2.Attributes["type"] = "text/javascript"; 
js2.InnerText = "$j = jQuery.noConflict();"; 
Page.Header.Controls.Add(js2);

The other thing that I have noticed is when you download the jquery plugin you want to use (not the default jquery file you always need) you will have to customize it and change all of the $ to $J since you will be running in noConflict mode.

Here is a live demo of a jquery slider I have working in BlogEngine.NET

It is the MoviesForMyBlog Plugin on the side

http://racheljason.com/1/blogs/ 

The plugin is downloadable from http://moviesformyblog.codeplex.com

Jason