Tuesday, November 15, 2016

A free JavaScript image gallery framework for image galleries used in SharePoint

A free JavaScript image gallery framework for image galleries used in SharePoint.
Go to SharePoint Site -> Doc1 -> ImageSlider Folder and upload few images as shown below..
Go to Site Assets Library and upload JS files into Library.
Go to any page -> Edit Page -> add content editor web part (CEWP ) and add below script to web part.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        html, body {
            background: #222;
            margin: 0;
        } 
        body {
            border-top: 4px solid #000;
        } 
        .content {
            color: #777;
            font: 12px/1.4 "helvetica neue",arial,sans-serif;
            width: 620px;
            margin: 20px auto;
        } 
        h1 {
            font-size: 12px;
            font-weight: normal;
            color: #ddd;
            margin: 0;
        } 
        p {
            margin: 0 0 20px;
        } 
        a {
            color: #22BCB9;
            text-decoration: none;
        } 
        .cred {
            margin-top: 20px;
            font-size: 11px;
        } 
        #galleria {
            height: 320px;
        }
    </style>
</head>
<body>
    <!--<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices-2014.02.min.js"></script>-->
    <script type="text/javascript" src="/SiteAssets/jquery.min.js"></script>
    <script type="text/javascript" src="/SiteAssets/jquery.SPServices-2014.02.min.js"></script>
<script language="javascript" type="text/javascript">
        $.noConflict();
        var varListName = "Doc1";
        var folderName = "/Doc1/ImageSlider";
        var folderName1 = "/Doc1/ImageSlider/";
        //var folderName = "/sites/dev/Doc1/ImageSlider"; //for Site Collection
        //var folderName1 = "/sites/dev/Doc1/ImageSlider/"; //For Site Collection
        jQuery(document).ready(function ($) {
            $().SPServices({
                operation: "GetListItems",
                async: false,
                webURL: "https://sreekanth5.sharepoint.com/",
                //webURL: "https://sharepointonline01.sharepoint.com/sites/dev/", //for Site Collection
                listName: varListName,
                CAMLViewFields: "<ViewFields><FieldRef Name='LinkFilename'/></ViewFields>",
                CAMLQueryOptions: "<QueryOptions><Folder>" + folderName + "</Folder></QueryOptions>",
                completefunc: function (xData, Status) {
                    $(xData.responseXML).find("[nodeName='z:row']").each(function () {
                        var liHtml = $(this).attr("ows_LinkFilename");
                        console.log(liHtml);
                        $("#galleria").append("<a href='" + folderName1 + liHtml + "'><img src='" + folderName1 + liHtml + "', data-big='" + folderName1 + liHtml + "' data-title='' data-description=''></a>");                     
                    });
                }
            });
            loadGalleria()
        });
    </script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/galleria/1.4.7/galleria.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/galleria/1.4.7/themes/classic/galleria.classic.min.js"></script>
<script>
        function loadGalleria() {
            Galleria.run('#galleria');
        }
</script>
    <div class="content">
        <div id="galleria"></div>
    </div>
</body>
</html>

Save page and check the result as shown below. 

No comments:

Post a Comment