Preparation: Download jquery-1.4.4.min.js from jquery website. Download jquery.cycle.all.js from jquery cycle website. Copy them to Sharepoint site, in my case, I set up a folder called img under root. Then paste 6 images and two scripts to it. The images name are 1.jpg-6.jpg.

  1. You need add 2 js to the      master page. Go to the master page of the current one through sharepoint      designer 2010. Edit it. Find <head runat="server">      area, add twos lines after it:

 

<script src="/img/jquery-1.4.4.min.js" type="text/javascript"></script>
<script type=text/javascript src="/img/jquery.cycle.all.js"></script>

 

 

2.Now you need save the master page, then      publish and approve it at the website. You need login to your sharepoint      website ,site actions-> site settings->Galleries->master page and      page layouts->find the master page you edited and publish it, then      check on it and then approve it from the icon at the top.

 

3.The Jscripts are ready to      run, from the page which using the same master page, create a content      editor webpart, select web part, click on edit html source, paste the      following code to it:

 

<script type="text/javascript">
(function() { // create private scope
    
var slideshow = $('#slideshow').cycle({
    timeout: 5000,
    before:  onBefore,
    after:   onAfter,
    width:   475,
    height:  314,
    fit:     true
})
function onBefore(curr,next,opts) {
    // 'next' is the image that is about to be transitioned in;
    // let's grab the image after that and set it's real src att
    var load = $(next).next(), src;
    if (load.length == 0)
        load = slideshow.find('img:eq(0)');
    load.attr('src', load.attr('data-img'));
}
var count = 0;
function onAfter(curr,next,opts) {
    $('#caption').html(next.alt);
    if (!count++)
        return;
    // after the image had transitioned out, update it src attr
    $(curr).attr('src','/img/1.jpg');
}
    
})();
</script>
						
	<DIV style="POSITION: relative; WIDTH: 475px; HEIGHT: 314px" id=slideshow cycleStop="0" cyclePause="0" cycleTimeout="8585" jQuery1328147633113="1">
	<!-- start with only the first two images loaded -->
	<IMG style="Z-INDEX: 6; POSITION: absolute; FILTER: alpha(opacity=0); BACKGROUND-COLOR: #ffffff; WIDTH: 475px; ZOOM: 1; DISPLAY: none; HEIGHT: 314px; TOP: 0px; LEFT: 0px" alt="Beach 1" src="/img/1.jpg" data-img="/img/1.jpg" jQuery1328147633113="2" cycleH="200" cycleW="200">
	<IMG style="Z-INDEX: 5; POSITION: absolute; FILTER: alpha(opacity=0); BACKGROUND-COLOR: #ffffff; WIDTH: 475px; ZOOM: 1; DISPLAY: none; HEIGHT: 314px; TOP: 0px; LEFT: 0px" alt="Beach 2" src="/img/2.jpg" data-img="/img/2.jpg" jQuery1328147633113="3" cycleH="200" cycleW="200">
	<IMG style="Z-INDEX: 5; POSITION: absolute; FILTER: alpha(opacity=0); BACKGROUND-COLOR: #ffffff; WIDTH: 475px; ZOOM: 1; DISPLAY: none; HEIGHT: 314px; TOP: 0px; LEFT: 0px" alt="Beach 2" src="/img/3.jpg" data-img="/img/3.jpg" jQuery1328147633113="3" cycleH="200" cycleW="200">
	<IMG style="Z-INDEX: 5; POSITION: absolute; FILTER: alpha(opacity=0); BACKGROUND-COLOR: #ffffff; WIDTH: 475px; ZOOM: 1; DISPLAY: none; HEIGHT: 314px; TOP: 0px; LEFT: 0px" alt="Beach 4" src="/img/4.jpg" data-img="/img/4.jpg" jQuery1328147633113="5" cycleH="200" cycleW="200"> 
	<IMG style="Z-INDEX: 5; POSITION: absolute; FILTER: alpha(opacity=0); BACKGROUND-COLOR: #ffffff; WIDTH: 475px; ZOOM: 1; DISPLAY: none; HEIGHT: 314px; TOP: 0px; LEFT: 0px" alt="Beach 5" src="/img/5.jpg" data-img="/img/5.jpg" jQuery1328147633113="6" cycleH="200" cycleW="200"> 
	<IMG style="Z-INDEX: 5; POSITION: absolute; FILTER: alpha(opacity=0); BACKGROUND-COLOR: #ffffff; WIDTH: 475px; ZOOM: 1; DISPLAY: none; HEIGHT: 314px; TOP: 0px; LEFT: 0px" alt="Beach 5" src="/img/6.jpg" data-img="/img/6.jpg" jQuery1328147633113="7" cycleH="200" cycleW="200">
	</DIV>
<DIV id=caption  style="display:none"">Values </DIV>

 

 

About Lei

I am an IT specialist with over 10 year experience - years on Automation, on-Premise or Azure.

I am happy to develop however never want be a full time developer. Only do what I have to do. If it has to be PowerShell,HTML, PHP, CSS, C#, VBS or JS, front end or backend, so be it, doesn't matter!

Spent years with Windows, SCCM, SharePoint, SQL and Exchange servers. For last several years, I have been actively working under On Premise > Azure environment.

THERE IS NO WAY BACK!!!

Current Certificates:
    Microsoft® Certified-
  • -Enterprise Administrator
  • -Database Administrator
  • -SharePoint Administrator
  • -Administering and Deploying SCCM 2012
Red Hat Certified Technician
ITIL V3 Foundation - Practitioner

Working on Azure Certificates now and hopefully they can stop upgrading their questions one day! GIVE ME A BREAK!

Contact Lei

Name *
Email *
Comments *

Traffic since 10/08/2016

Today52
Yesterday83
This week676
This month1972
Total416332

Visitor Info

  • IP: 54.227.51.103
  • Browser: Unknown
  • Browser Version:
  • Operating System: Unknown

Who Is Online

1
Online

2017-12-17

Login