As all my post this one is mainly for my own memories. But if you find it useful you coments are welcome.
All Credit Goes to Alan Grakalic magician and creator of Easy Slider. This modest contribution show an easy path to integrate JQuery stuff with SPF.
I wanted to get a similar slider effect than this one in one of our website.
I decided to use Easy Slider for this purpose it is JQuery and straight forward. For our recipe to work we needed:
- JQuery
- Easy Slider Libray easyslider1.7.js
- Sharepoint foundation 2010 - (Well all this post is about implementing in SPF 2010 :-))
- Sharepoint Designer 2010
- A CEWP or Content Editor Web Part - The beauty ("I think and you can disagree") of this implementation is its ability to work in a CEWP - Put in other word you dont have/need to mess with the code of your pages evrything is done throught a CEWP
Step 1
Using Sharepoint Designer create (if its not done already) a Folder "Utilities" and a subfolder easyslider there you will keep most of the files needed.
there you will now save easyslider1.7.js and easyslider.css (this css is the original css of easyslider modified to work with SPF) the code is a the end of this post ou can also modify yourself the original screen.css
Step2
Using Sharepoint with IE you will create a new page. Name it whatever you fell myfirstpage will do. Place there 4 or 6 pictures that are the same size ie 956*277 save you work and then but only then you can cut (cut no delete) those image. What you just done is to place in the library SitesAsset\SitePage\myfirstapage\ the images for your carrousel.
Step3
In SitesPage you should have now you myfirstpage.aspx verifie with sharepoint designer that it is there. If not something went wrong try to figure out (maybe those instructions are not perfects).
With sharepoint designer in this same folder create a text file myfirstpage slider.txt and copy the following code.
<script type="text/javascript" src="../Utilities/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../Utilities/EasySlider/easySlider1.7.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true,
numeric: true
});
});
</script>
<link href="../Utilities/EasySlider/easyslider.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript">
$(document).ready(function(){
$("#TestJQuery").text("JQuery is loaded and working").css("color","white");
});</script>
<label id="TestJQuery" style="color: red">JQuery is NOT loaded and working</label>
<div id="container">
<div id="content">
<div id="slider">
<ul>
<li><a href="http://www.keptos.com/preview/30"><img src="../SiteAssets/SitePages/Keptos Home/Equipo.png" alt="Css Template Preview" /></a></li>
<li><a href="http://www.keptos.com/preview/7"><img src="../SiteAssets/SitePages/Keptos Home/Expertise.png" alt="Css Template Preview" /></a></li>
<li><a href="http://www.keptos.com/preview/25"><img src="../SiteAssets/SitePages/Keptos Home/Imaginacion.png" alt="Css Template Preview" /></a></li>
<li><a href="http://www.keptos.com/preview/26"><img src="../SiteAssets/SitePages/Keptos Home/Precision.png" alt="Css Template Preview" /></a></li>
<li><a href="http://www.keptos.com/preview/27"><img src="../SiteAssets/SitePages/Keptos Home/Vision.png" alt="Css Template Preview" /></a></li>
</ul>
</div>
</div>
</div>
It is beyong of the scope of this post to discuss this code because it is really on the scope of jquery an easy slider.
Step4
Magic should at least start. Using ie go to you myfirstpage page an insert a CEWP modify the CEWP and link to "myfirstpage slider.txt" save the CEWP and some magic should happen. The rest is just about tuning the code and the css
Hope this will help you and prepare yourself for 2 hours of good work.
--------------------------------------
easyslider.css code
img{border:none;}
pre{
display:block;
font:12px "Courier New", Courier, monospace;
padding:10px;
border:1px solid #bae2f0;
background:#e3f4f9;
margin:.5em 0;
width:674px;
}
/* image replacement */
.graphic, #prevBtn, #nextBtn, #slider1prev, #slider1next{
margin:0;
padding:0;
display:block;
overflow:hidden;
text-indent:-8000px;
}
/* // image replacement */
#container{
margin:0 auto;
position:relative;
text-align:left;
width:956px;
background:#fff;
margin-bottom:2em;
}
#header{
height:80px;
line-height:80px;
background:#5DC9E1;
color:#fff;
}
#content{
position:relative;
}
/* Easy Slider */
#slider ul, #slider li,
#slider2 ul, #slider2 li{
margin:0;
padding:0;
list-style:none;
}
#slider2{margin-top:1em;}
#slider li, #slider2 li{
/*
define width and height of list item (slide)
entire slider area will adjust according to the parameters provided here
*/
width:956px;
height:277px;
overflow:hidden;
}
#prevBtn, #nextBtn,
#slider1next, #slider1prev{
display:block;
width:30px;
height:77px;
position:absolute;
left:-30px;
top:71px;
z-index:1000;
}
#nextBtn, #slider1next{
left:956px;
}
#prevBtn a, #nextBtn a,
#slider1next a, #slider1prev a{
display:block;
position:relative;
width:30px;
height:77px;
background:url('btn_prev.gif') no-repeat 0 0;
}
#nextBtn a, #slider1next a{
background:url('btn_next.gif') no-repeat 0 0;
}
/* numeric controls */
ol#controls{
margin:1em 0;
padding:0;
height:28px;
}
ol#controls li{
margin:0 10px 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:#CCCCCC;
color:#555;
padding:0 10px;
text-decoration:none;
}
ol#controls li.current a{
background:#CC0000;
color:#fff;
}
ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}
/* // Easy Slider */
Hi! Thanks for the tuto! The slider is not showing in the page (far to the right) in Safari and Firefox. Any idea? Working fine with Explorer.
ResponderBorrarBest.
Olivier