Click here to Skip to main content
13,252,362 members (55,248 online)
Click here to Skip to main content

Tagged as

Stats

57.1K views
2.1K downloads
4 bookmarked
Posted 11 Feb 2013

Image Carousel/Slider in SharePoint 2010

, 11 Feb 2013
This article will discuss on how to read the image/picture library and come up with an image slider in SharePoint 2010
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

You may also be interested in...

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