Click here to Skip to main content
11,484,752 members (77,557 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as

Image Carousel/Slider in SharePoint 2010

, 11 Feb 2013 CPOL 32.8K 1.5K 3
This article will discuss on how to read the image/picture library and come up with an image slider in SharePoint 2010
JQuery_Image_Slider_in_SharePoint_2010.zip
img
arrow-next.png
arrow-prev.png
background.png
example-frame.png
loading.gif
new-ribbon.png
pagination.png
slide-1.jpg
slide-2.jpg
slide-3.jpg
slide-4.jpg
slide-5.jpg
slide-6.jpg
slide-7.jpg
slide.jpg
<!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="/sites/JQueryDemo/JS/jquery-1.8.3.min.js" type="text/javascript"></script>
	<script src="/sites/JQueryDemo/JS/jquery.SPServices-0.7.2.js" type="text/javascript"></script>
	<script src="/sites/JQueryDemo/JS/Slider/slides.jquery.js" type="text/javascript"></script>
    <link rel="stylesheet" href="/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="/sites/JQueryDemo/JS/img/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a>
				<a href="#" class="next"><img src="/sites/JQueryDemo/JS/img/arrow-next.png" width="24" height="43" alt="Arrow Next"></a>
			</div>
			<img src="/sites/JQueryDemo/JS/img/example-frame.png" width="739" height="341" alt="Example Frame" id="frame">
		</div>
	</div>
</body>
</html>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

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

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