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:

Power Automate + Excel data

Extract excel data, get manager and update row with user details which will get from GET MANAGER Concepts and examples Key column:  Column i...