Click here to Skip to main content
15,867,330 members
Articles / jQuery

Image Carousel/Slider in SharePoint 2010

Rate me:
Please Sign up or sign in to vote.
4.86/5 (7 votes)
11 Feb 2013CPOL1 min read 82.3K   2.2K   4   19
This article will discuss on how to read the image/picture library and come up with an image slider in SharePoint 2010

Introduction

This is the second post of JQuery With SharePoint 2010 series. Please read the first one on how to Integrate/use JQuery with SP 2010. This article will discuss on how to read the image/picture library and come up with an image slider. There are three pre-requisites for the same.

1. Download JQuery from Here and upload it to your Share Point site.

2. Download JQuery library for SharePoint web services and upload it to your Share Point site.

3. Download the JQuery plugin slidesJs and upload it to your Share Point site.  

JQuery Slider

Following section will detail out on how to use the above downloaded files to create
the slider.

Image 1

1. Create a file called Slider.txt

2. Include the JQuery files. Make sure you give the right paths in scr tag.

 <script src="http://www.codeproject.com/sites/JQueryDemo/JS/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="http://www.codeproject.com/sites/JQueryDemo/JS/jquery.SPServices-0.7.2.js" type="text/javascript"></script>
<script src="http://www.codeproject.com/sites/JQueryDemo/JS/Slider/slides.jquery.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://www.codeproject.com/sites/JQueryDemo/JS/Slider/global.css">

3. Query image/picture list. This uses the SPServices JQuery plug in to talk to the list. Please read
Integrate/use JQuery with SP 2010
to understand this function better.

 $(document).ready(function () {
    $().SPServices({
        operation: "GetListItems",
        async: false,
        listName: "Pictures",
        CAMLRowLimit: 6,
        completefunc: function (xData, Status) {
            var hasRows = false;
            $(xData.responseXML).find("z\\:row, row").each(function () {
                hasRows = true;
                var _url = '/' + $(this).attr("ows_RequiredField")
                var _title = $(this).attr("ows_NameOrTitle");

                _slideDiv = $("<div class='slide'/>");
                _link = $("<a  src='" + _url + "'/>");
                _Image = $("<img  id='slideShowImage' src='" + _url + "'/>");
                $(_link).append(_Image);
                _slideDiv.append(_link);

                _Title = $("<div class='caption'><p>" + _title + "</p></div>");
                _slideDiv.append(_Title);

                $(".slides_container").append(_slideDiv);
            });
        }
    });
});

4. Plugin SlidesJS to the images that were downloaded from the picture library.

$(function () {
        $('#slides').slides({
            preload: true,
            preloadImage: 'img/loading.gif',
            play: 2000,
            pause: 2500,
            hoverPause: true,
            animationStart: function (current) {
                $('.caption').animate({
                    bottom: -35
                }, 100);
                if (window.console && console.log) {
                    // example return of current slide number
                    console.log('animationStart on slide: ', current);
                };
            },
            animationComplete: function (current) {
                $('.caption').animate({
                    bottom: 0
                }, 200);
                if (window.console && console.log) {
                    // example return of current slide number
                    console.log('animationComplete on slide: ', current);
                };
            },
            slidesLoaded: function () {
                $('.caption').animate({
                    bottom: 0
                }, 200);
            }
        });
    });

5. html code

<div id="container">
    <div id="example">
        <div id="slides">
            <div class="slides_container" id="slides_container_div">
        </div>
        <a href="#" class="prev"><img src="http://www.codeproject.com/sites/JQueryDemo/JS/img/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a>
        <a href="#" class="next"><img src="http://www.codeproject.com/sites/JQueryDemo/JS/img/arrow-next.png" width="24" height="43" alt="Arrow Next"></a>
    </div>
    <img src="http://www.codeproject.com/sites/JQueryDemo/JS/img/example-frame.png" width="739" height="341" alt="Example Frame" id="frame">
</div>

6. Upload the Slider.txt to any document library in your sharepoint site and use it in any content editor web part. Please read Integrate/use JQuery with SP 2010 on how to do this.

You can also copy the code to the content editor web part.

Full Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <script src="http://www.codeproject.com/sites/JQueryDemo/JS/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script src="http://www.codeproject.com/sites/JQueryDemo/JS/jquery.SPServices-0.7.2.js" type="text/javascript"></script>
    <script src="http://www.codeproject.com/sites/JQueryDemo/JS/Slider/slides.jquery.js" type="text/javascript"></script>
    <link rel="stylesheet" href="http://www.codeproject.com/sites/JQueryDemo/JS/Slider/global.css">
    <script>
 
        $(document).ready(function () {
            $().SPServices({
                operation: "GetListItems",
                async: false,
                listName: "Pictures",
                CAMLRowLimit: 6,
                completefunc: function (xData, Status) {
                    var hasRows = false;
                    $(xData.responseXML).find("z\\:row, row").each(function () {
                        hasRows = true;
                        var _url = '/' + $(this).attr("ows_RequiredField")
                        var _title = $(this).attr("ows_NameOrTitle");
                                               
                        _slideDiv = $("<div class='slide'/>");
                        _link = $("<a  src='" + _url + "'/>");
                        _Image = $("<img  id='slideShowImage' src='" + _url + "'/>");
                        $(_link).append(_Image);
                        _slideDiv.append(_link);
 
                        _Title = $("<div class='caption'><p>" + _title + "</p></div>");
                        _slideDiv.append(_Title);
 
                        $(".slides_container").append(_slideDiv);
                    });
                }
            });
        });
 

        $(function () {
            $('#slides').slides({
                preload: true,
                preloadImage: 'img/loading.gif',
                play: 2000,
                pause: 2500,
                hoverPause: true,
                animationStart: function (current) {
                    $('.caption').animate({
                        bottom: -35
                    }, 100);
                    if (window.console && console.log) {
                        // example return of current slide number
                        console.log('animationStart on slide: ', current);
                    };
                },
                animationComplete: function (current) {
                    $('.caption').animate({
                        bottom: 0
                    }, 200);
                    if (window.console && console.log) {
                        // example return of current slide number
                        console.log('animationComplete on slide: ', current);
                    };
                },
                slidesLoaded: function () {
                    $('.caption').animate({
                        bottom: 0
                    }, 200);
                }
            });
        });
    </script>
</head>
<body>
    <div id="container">
        <div id="example">
            <div id="slides">
                <div class="slides_container" id="slides_container_div">
                </div>
                <a href="#" class="prev"><img src="http://www.codeproject.com/sites/JQueryDemo/JS/img/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a>
                <a href="#" class="next"><img src="http://www.codeproject.com/sites/JQueryDemo/JS/img/arrow-next.png" width="24" height="43" alt="Arrow Next"></a>
            </div>
            <img src="http://www.codeproject.com/sites/JQueryDemo/JS/img/example-frame.png" width="739" height="341" alt="Example Frame" id="frame">
        </div>
    </div>
</body>
</html>
<html>
 

References


http://jquery.com/

http://spservices.codeplex.com/

http://www.slidesjs.com/

http://www.codeproject.com/Articles/544538/JQuery-with-SharePoint-2010

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Architect
India India
9+ plus years of experience in IT industry. This includes experience in architecting, designing and developing solutions on Web and desktop application platforms

Comments and Discussions

 
QuestionCan not see images in slider Pin
Member 1055886213-Nov-15 10:29
Member 1055886213-Nov-15 10:29 
QuestionHow to change the width of slides_control? Pin
renukanadgir4-Mar-15 19:15
renukanadgir4-Mar-15 19:15 
AnswerRe: How to change the width of slides_control? Pin
Manjunath Shrikantiah5-Mar-15 4:12
Manjunath Shrikantiah5-Mar-15 4:12 
QuestionError in code Pin
Member 8260511-Aug-14 5:11
Member 8260511-Aug-14 5:11 
QuestionHow can i download the ZIP file? Pin
nareshkapa7-Jul-14 1:50
nareshkapa7-Jul-14 1:50 
QuestionProblem With Right To left Pin
Member 108738029-Jun-14 9:06
Member 108738029-Jun-14 9:06 
AnswerRe: Problem With Right To left Pin
Manjunath Shrikantiah10-Jun-14 4:10
Manjunath Shrikantiah10-Jun-14 4:10 
QuestionCannot see images Pin
Member 1051981312-Jan-14 15:37
Member 1051981312-Jan-14 15:37 
QuestionProblem with carousel/Slider in share point 2010 Pin
shilpamapari2-Jul-13 21:41
shilpamapari2-Jul-13 21:41 
QuestionRe: Problem with carousel/Slider in share point 2010 Pin
Member 1051981312-Jan-14 15:31
Member 1051981312-Jan-14 15:31 
AnswerRe: Problem with carousel/Slider in share point 2010 Pin
shilpamapari26-Aug-14 18:14
shilpamapari26-Aug-14 18:14 
GeneralRe: Problem with carousel/Slider in share point 2010 Pin
Member 14797215-Sep-14 5:23
Member 14797215-Sep-14 5:23 
QuestionUse for an Announcements List? Pin
Ando2561-Jun-13 19:52
Ando2561-Jun-13 19:52 
AnswerRe: Use for an Announcements List? Pin
Member 1041559522-Dec-13 1:08
Member 1041559522-Dec-13 1:08 
GeneralHow can I make it clickable? Pin
Member 100378748-May-13 8:52
Member 100378748-May-13 8:52 
GeneralRe: How can I make it clickable? Pin
Member 1203818512-Oct-15 11:54
Member 1203818512-Oct-15 11:54 
QuestionProblem with Image Carousel Pin
SoumyaSrini29-Apr-13 13:18
SoumyaSrini29-Apr-13 13:18 
AnswerRe: Problem with Image Carousel Pin
Member 1051981312-Jan-14 15:32
Member 1051981312-Jan-14 15:32 
QuestionZIp file download error Pin
Member 998782614-Apr-13 16:50
Member 998782614-Apr-13 16:50 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.