Thursday, December 4, 2014

DYNAMIC PICTURE Library Slideshow and embedded with image link by Using SPServices and JQuery Cycle Plugin

<table width="940px" border="0" cellspacing="0" cellpadding="0">
    <tbody>

        <tr>
            <td width="260px">
            <div id="BGLStaticContentArea" style="display: block" >
                <img width="260px" height="175px" align="left" src="/sites/BGL/BGLBannersLibrary/BGLStaticBanner.jpg" border="0" alt="" /></div>
            </td>
            <td width="680px">
                <div id="slideshowContentArea" style="display: block"></div>
            </td>
        </tr>
    </tbody>
</table>
<script src="/sites/BGL/SiteAssets/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="/sites/BGL/SiteAssets/jquery.SPServices-2014.01.js" type="text/javascript"></script>
<script src="/sites/BGL/SiteAssets/jquery.cycle.all.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">

    $(document).ready(function () {
        $().SPServices({
            operation: "GetListItems",
            async: false,
            listName: "BGLBanners",
            CAMLRowLimit: 10,
            completefunc: function (xData, Status) {
                $("#slideshowContentArea").html("");

                $(xData.responseXML).SPFilterNode("z:row").each(function () {
                    var title = $(this).attr("ows_Title");
                    var pictureURL = '/' + $(this).attr("ows_RequiredField");
                    var bannerLinkURL = $(this).attr("ows_BannerLinkURL");
                    var n = bannerLinkURL.indexOf(',');
                    bannerLinkURL = bannerLinkURL.substring(0, n != -1 ? n : s.length);

                    var liHtml = "<div padding=0><a target=_blank href=" + bannerLinkURL + "><img align=left border=0 height=175 width=680 src=" + pictureURL + "></a></div>";

                    $("#slideshowContentArea").append(liHtml);
                });
                $("#slideshowContentArea").css("display", "block");

                $('#slideshowContentArea').cycle({
                    fx: 'fade',
                    timeout: 6000,
                    delay: -3000
                });
            }
        });
    });
</script>

No comments:

Post a Comment

Building Secure Azure AI Foundry Agents with Managed Identity

  The credential problem nobody wants to own Every team that connects an Azure AI Foundry agent to Microsoft Graph, SharePoint, Outlook, or...