Slide Show desde una librería de imágenes

Step 1: Plugin Setup

1. Download the Easy Slider Plugin from http://cssglobe.com/lab/easyslider1.7/easyslider1.7.zip
2. Unzip the file and Upload easySlider1.7.js to a document library.

Step 2: Note down the List ID

1. Navigate to your Site Actions -> Site Settings
2. Under Site Administration, click Site libraries and lists
3. Click on your Picture Library name, to open it.
4. Note down the value of parameter List as displayed in Url window of your Internet explorer. It will be something like {26EC0E08-3D8A-4C67-ABF5-909D572B3030}
5. Add a content editor web part (CEWP) on your target page

Step 3: Set up Content Editor Web Part

1. On your target page, add a content editor web part (CEWP)
2. Paste the following code in Source Editor

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<!-- Step 1:  Download easy slider plugin fromhttp://cssglobe.com/lab/easyslider1.7/easyslider1.7.zip  -->
<script type="text/javascript" src="http://TestServer/TestSite/js/easySlider.js"></script>

    <script type="text/javascript">
    _spBodyOnLoadFunctionNames.push("startSlider");

    function startSlider() {
        //Step 2 Replace {26EC0E08-3D8A-4C67-ABF5-909D572B3030} with the ID of your picture library
        var soapEnv =
            "<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> \
                <soapenv:Body> \
                     <GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \
                        <listName>{26EC0E08-3D8A-4C67-ABF5-909D572B3030}</listName> \
                         <viewFields> \
                            <ViewFields> \
                               <FieldRef Name='Title' /> \
                           </ViewFields> \
                        </viewFields> \
                    </GetListItems> \
                </soapenv:Body> \
            </soapenv:Envelope>";
        $.ajax({
            url:  "//"+window.location.hostname+L_Menu_BaseUrl+"/_vti_bin/lists.asmx",
            type: "POST",
            dataType: "xml",
            data: soapEnv,
            complete: processResult,
            contentType: "text/xml; charset=\"utf-8\""
        });
    };
    function processResult(xData, status) {

        //Uncomment the following line to see the raw xml received from lists.asmx
        //$("#rawXml").text(xData.responseText);

        $(xData.responseXML).find("z\\:row").each(function() {

            //Get relevant field values
            imageUrl="//"+window.location.hostname + "/" + $(this).attr("ows_FileRef").split(";#")[1];
            var description=getDescription( $(this).attr("ows_MetaInfo"));
            var title=$(this).attr("ows_Title");

            //Construct required HTML Markup
            var liHtml = "<li><h3>" + title + "</h3>" ;
            liHtml+="<IMG border=0 alt='" + title + "'src='" + imageUrl + "' >";
            liHtml+="<p>" + description + "</p>";
            liHtml+="</li>";

            //Add markup as line item in UL tag
            $("#imagesUL").append(liHtml);
        });

        //Start Slider
        //For full options, refer to http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding
        $("#slider").easySlider({
            auto: true,
            continuous: true,
            controlsShow : false,
            speed : 800,
            pause : 4000
        });

        }
    function getDescription(metaInfo)
    {
        var description="";
        if(metaInfo!=null)
        {
            metaParts=metaInfo.split("\n");
            if(metaParts!=null && metaParts.length>0)
            {
                var i=0;
                do
                {
                    if(metaParts[i].indexOf("vti_description")>-1)
                    {
                        var descParts=metaParts[i].split("|");
                        if(descParts!=null && descParts.length>1)
                        {
                            description=descParts[1];
                        }
                    }
                    i++;
                } while (i<metaParts.length && description=="" );
            }
        }
        return description;
    }
</script>
<style type="text/css">
#slider{border-bottom:2px solid #ccc; background:#eee; padding:5px;    font-size:x-small;}
#slider h5{font:italic medium Georgia, Times, serif; color:#555; padding:3px; margin-bottom:-10px; background:#c6c6c6;}
#slider h5 span{text-transform:lowercase; padding:5px; font:x-small normal Arial, Helvetica, san-serif;}
#slider div {font-size: x-small; padding:3px;}
#slider ul, #slider li{margin:0; padding:0; list-style:none;}
#slider li{width:310;    height:400px; overflow:hidden; padding:0px;}
#controls2 {padding:3px 0 0 0; text-align:right; width:300;}
#prevBtn, #nextBtn{}
#nextBtn{}
#prevBtn a, #nextBtn a{font-size:x-small; background-color:#ccc; color:#444; padding:2px; text-decoration:none;}
#nextBtn a{}

</style>
    <div id="rawXml" ></div>
       <div id="slider">
        <ul id="imagesUL"/>
    </div>

Step 4: Update Code

1. Replace {26EC0E08-3D8A-4C67-ABF5-909D572B3030} by the List ID you got in step 2, above
2. Click OK, exit edit mode and Enjoy!

Notes:

1. This code is a sample code and you may need to change the styles section to match your site’s theme.
2. Please make sure all your images are of same size, if not, then please adjust the size in line 47 of source code.
3. This code assumes the size of images as 300×300 pixels, if you need to change it then update the relevant size at line 98.

 

Fuente:

http://www.sharepoint-insight.com/2012/02/05/quickest-way-to-create-slide-show-from-your-picture-library-in-sharepoint/