Implementation of jQuery EasySlider

This forum is only for questions or discussions about working with the mojoPortal source code in Visual Studio, obtaining the source code from the repository, developing custom features, etc. If your question is not along these lines this is not the right forum. Please try to post your question in the appropriate forum.

Please do not post questions about design, CSS, or skinning here. Use the Help With Skins Forum for those questions.

This forum is for discussing mojoPortal development

This forum is only for questions or discussions about working with the mojoPortal source code in Visual Studio, obtaining the source code from the repository, developing custom features, etc. If your question is not along these lines this is not the right forum. Please try to post your question in the appropriate forum.

You can monitor commits to the repository from this page. We also recommend developers to subscribe to email notifications in the developer forum as occasionally important things are announced.

Before posting questions here you might want to review the developer documentation.

Do not post questions about design, CSS, or skinning here. Use the Help With Skins Forum for those questions.
This thread is closed to new posts. You must sign in to post in the forums.
5/29/2009 3:32:56 PM
scrailsabck
Gravatar
Total Posts 42
View Posts

Implementation of jQuery EasySlider

I'm trying to implement the Easy Slider plugin for jQuery, but am not having much luck. I am receiving error saying "jQuery("#slider").easySlider is not a function." This error is usually related to the paths to the js, but I've check the paths and they are corret.  Here's what I have.

First I modified my layout.master to reference a module so that the banners are persistent across all pages. This way my uses can manage their banners without having to call me up for minor changes.

<portal:ModuleWrapper ID="mdl16" runat="server" ConfigureModuleID="16" />

Then I included the js:

<head> ....

<script src="http://www.mysite.com/data/sites/1/skins/curfman/scripts/jquery.js" type="text/javascript"></script>
<script src="http://www.mysite.com/data/sites/1/skins/curfman/scripts/easySlider1.5.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function() {
jQuery("#slider").easySlider({
auto: true,
continuous: true
});
});
</script>

...</head>

Lastly my htmlcontent module contains the banners:

<div id="slider">
<ul>
<li><img class="thumbnail" height="200" width="850" alt="" src="/Data/Sites/1/banners/art_and_science1.jpg"/></li>
<li><img class="thumbnail" height="200" width="850" alt="" src="/Data/Sites/1/banners/art_and_science2.jpg"/></li>
<li><img class="thumbnail" height="200" width="850" alt="" src="/Data/Sites/1/banners/art_and_science3.jpg"/></li>
</ul>
</div>

It works perfectly well with a static html page, but in mp it fails. I've tried other slideshows such as smoothgallery, carousel, etc and get the same error - "... is not a function".

Any thought or recommendations of other slideshow viewers would be most appreciated.

5/30/2009 6:19:46 AM
Joe Audette
Gravatar
Total Posts 18439
View Posts

Re: Implementation of jQuery EasySlider

Hi Steve,

The things I would do are

1. Don't include jquery.js as we already have jQuery, just include the slider script, it does need to be below the jQuery script so view the source of the rendered page to make sure of that.

2.  Instead of using an id on youre div I would use a class like this <div class='jq-slider'>

3. Remove that script from the header where you are trying to wire it up. and try putting something like this at the bottom of your layout.master just before the closing body tag.

<script type="text/javascript">
$('div.jq-slider).easySlider({
auto: true,
continuous: true
});
</script>

Hope it helps. Let me know how it goes I've been thinking about building something in to make it easy to use that slider or some others 

http://sorgalla.com/projects/jcarousel/

http://www.gmarwaha.com/jquery/jcarousellite/

Best,

Joe

6/1/2009 10:57:09 AM
scrailsabck
Gravatar
Total Posts 42
View Posts

Re: Implementation of jQuery EasySlider

Hello Joe

Thanks for the tips. I gave them a try, but they did not work. I also tried CarouselLite as well with the same result. I have had success using a previous releases of SmoothGallery (which is not jquery), but it takes a little more work to set up.

12/27/2010 1:51:38 AM
user256
Gravatar
Total Posts 1
View Posts

Re: Implementation of jQuery EasySlider

This is a really bad work-around, but rename all references in your non-mp jquery file to something else and in easyslider.

Example, replace all references of "jquery" in jquery.js with "jquery2". Do the same in easyslider.js. Now use the code:


$(document).ready(function(){
jQuery2("#slider").easySlider({
controlsBefore: '<p id="controls">',
controlsAfter: '</p>',
auto: true,
continuous: true
});
});
 

There must be an issue with the built-in version of jquery in mp.

Good luck.

9/23/2011 1:54:18 PM
PirateRob
Gravatar
Total Posts 5
View Posts

Re: Implementation of jQuery EasySlider

I was able to get this to work my first try with the following, however I'm trying to figure-out how to get the slider to display on the home page ONLY and not the children, i.e.: the children should have a static image pertaining to that page only:

(I placed both the jquery.js and the easySlider1.7.js into the jqmojo folder and referenced them

 

IN HEADER OF MASTER.LAYOUT:

<%-- JQuery EasySlider Script --%>

<script type="text/javascript" src="/ClientScript/jqmojo/js/jquery.js"></script>
<script type="text/javascript" src="/ClientScript/jqmojo/easySlider1.7.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
   $("#slider").easySlider({
    auto: true,
    continuous: true
   });
  });
</script>
<%-- JQuery EasySlider Script --%>

 

 

IN BODY OF MASTER.LAYOUT:

 

<%-- START JQuery EasySlider Script --%>
                  <div id="slider">
                   <ul>   
                   <li><a href="reinsurance.aspx"><img src="/Data/Sites/1/skins/bluestripe/slider-images/Reinsurance.png" alt="Reinsurance" /></a></li>
                   <li><a href="school-board-legal-liability.aspx"><img src="/Data/Sites/1/skins/bluestripe/slider-images/SBLL.png" alt="SBLL" /></a></li>
                   <li><a href="errors-omissions-coverage.aspx"><img src="/Data/Sites/1/skins/bluestripe/slider-images/TrusteesEO.png" alt="Trustees E&O" /></a></li>
                   <li><a href="surety-bonds.aspx"><img src="/Data/Sites/1/skins/bluestripe/slider-images/Surety.png" alt="Surety Bonds" /></a></li>
                   <li><a href="sfip.aspx"><img src="/Data/Sites/1/skins/bluestripe/slider-images/SFIP.png" alt="SFIP" /></a></li>  
                   </ul>
               </div>
                     <%-- END JQuery EasySlider Script --%>

 

IN CSS FILE:

/* START EASY SLIDER */

#slider ul, #slider li,
#slider2 ul, #slider2 li{
  margin:0;
  padding:0px;
  width:984px;
  height:430px;
  margin-top:0px;
  list-style:none;
  }
#slider2{margin-top:0;}
#slider li, #slider2 li{
  width:984px;
  height:431px;
  margin-top:90px;
  overflow: hidden;
  } 
#prevBtn, #nextBtn,
#slider1next, #slider1prev{
  display:block;
  width:30px;
  height:77px;
  position:absolute;
  left:-55px;
  top:200px;
  z-index:1000;
  }
#nextBtn, #slider1next{
  left:945px;
  }             
#prevBtn a, #nextBtn a,
#slider1next a, #slider1prev a{ 
  display: block;
  position:relative;
  width:95px;
  height:204px;
  background:url(./images/btn_prev.png) no-repeat 0 0;
  }
#nextBtn a, #slider1next a{
  background:url(./images/btn_next.png) no-repeat 0 0;
  }
 
/* numeric controls */

ol#controls{
  margin: -50px 0;
  padding: 10px;
  height:20px;
  }
ol#controls li{
  margin:0 20px 0 0;
  padding:0;
  float:left;
  list-style:none;
  height:28px;
  line-height:28px;
  }
ol#controls li a{
  float:left;
  height:28px;
  line-height:28px;
  border:1px solid #ccc;
  background:#DAF3F8;
  color:#555;
  padding:0 10px;
  text-decoration:none;
  }
ol#controls li.current a{
  background:#5DC9E1;
  color:#fff;
  }
ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}


/* END EASY SLIDER */

 

9/23/2011 1:59:44 PM
Joe Audette
Gravatar
Total Posts 18439
View Posts

Re: Implementation of jQuery EasySlider

You can enable per page skin from Administration > Site Settings, then make a copy of your skin without the slider and set that skin as the default skin for the site and set the one that has the slider as the skin only for your home page.

Or else just use the slider inside an html content instance on the home page instead of in layout.master.

If you want an editable header section see the article More than 3 Content Panels

Hope that helps,

Joe

9/23/2011 3:07:33 PM
PirateRob
Gravatar
Total Posts 5
View Posts

Re: Implementation of jQuery EasySlider

PERFECT!!!  no money for beer, how about a shots  \=/ \=/ \=/

Thanks again!

9/23/2011 3:35:30 PM
PirateRob
Gravatar
Total Posts 5
View Posts

Re: Implementation of jQuery EasySlider

OK, I spoke too soon. LOL

I duplicated my skin folder for the secondary pages and found the Allow Setting Skin for Page? checkbox; However, I didn't see the drop-down menu on the page settings for individual pages for selecting the secondary skin.

10/1/2011 2:52:38 PM
Rick Hubka
Gravatar
Total Posts 245
View Posts
mojoPortal Community Expert

Re: Implementation of jQuery EasySlider

Hi

I think you may be interested in trying my free Novo Slider for mojoPortal.  More info at this post here.

Rick Hubka

You must sign in to post in the forums. This thread is closed to new posts.