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.
Save page and check the result as shown below.
Go to SharePoint Site -> Doc1 -> ImageSlider Folder and upload few images as shown below..
<!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">
<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>
No comments:
Post a Comment