Click here to Skip to main content
Click here to Skip to main content

Tagged as

Image Carousel/Slider in SharePoint 2010

, 11 Feb 2013 CPOL
Rate this:
Please Sign up or sign in to vote.
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.

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)

Share

About the Author

Manjunath Shrikantiah
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

 
QuestionError in code PinmemberMember 8260511-Aug-14 6:11 
QuestionHow can i download the ZIP file? Pinmembernareshkapa7-Jul-14 2:50 
QuestionProblem With Right To left PinmemberMember 108738029-Jun-14 10:06 
AnswerRe: Problem With Right To left PinmemberManjunath Shrikantiah10-Jun-14 5:10 
QuestionCannot see images PinmemberMember 1051981312-Jan-14 16:37 
QuestionProblem with carousel/Slider in share point 2010 Pinmembershilpamapari2-Jul-13 22:41 
QuestionRe: Problem with carousel/Slider in share point 2010 PinmemberMember 1051981312-Jan-14 16:31 
AnswerRe: Problem with carousel/Slider in share point 2010 Pinmembershilpamapari26-Aug-14 19:14 
GeneralRe: Problem with carousel/Slider in share point 2010 PinmemberMember 14797215-Sep-14 6:23 
QuestionUse for an Announcements List? PinmemberAndo2561-Jun-13 20:52 
AnswerRe: Use for an Announcements List? PinmemberMember 1041559522-Dec-13 2:08 
GeneralHow can I make it clickable? PinmemberMember 100378748-May-13 9:52 
QuestionProblem with Image Carousel PinmemberSoumyaSrini29-Apr-13 14:18 
AnswerRe: Problem with Image Carousel PinmemberMember 1051981312-Jan-14 16:32 
QuestionZIp file download error PinmemberMember 998782614-Apr-13 17:50 

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

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

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.1411022.1 | Last Updated 12 Feb 2013
Article Copyright 2013 by Manjunath Shrikantiah
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid