JavaScript Video Gallery

As User request, I was searching how to make video gallery which able to connect to SharePoint List. finally I found beautiful JavaScript Video Gallery call UniteGallery that more than enough for what I expected. Herewith Easy way to make your portal look beautiful. I used SPServices to retrieve data from SharePoint List

1. Download jQuery , UniteGallery and SPservices (Create a Document Library and upload it)

2. Create Custom list call "VideoList" (you can name it as you wish but make sure mention in bellow Script)
Create 5 Columns: Title, Description, Link, Image1, Image2

Title : For Your Video Title
Description : Enter Description of Video
Link : Link of You Tube or Vimeo (you just enter Video code)
Image1 : This is the Thumbnail image for Video List
Image2 : This is the Thumbnail Image for View


3. Here is the JavaScript Code ( Save as TXT file it to Document Library and attach it to CEWP )

<script type="text/javascript" src="../YourSite/jQuery/jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="../YourSite/jQuery/jquery.SPServices-2014.02.min.js"></script>
<script type="text/javascript" src="../YourSite/jQuery/unitegallery/unitegallery.js"></SCRIPT>
<script type="text/javascript" src="../YourSite/jQuery/unitegallery/ug-theme-video.js"></SCRIPT>
<link rel="stylesheet" href="../YourSite/jQuery/unitegallery/unite-gallery.css" />
<link rel="stylesheet" href="../YourSite/jQuery/unitegallery/skin-right-thumb.css" />

<script language="javascript" type="text/javascript">

$(document).ready(function() {
  $().SPServices({
    operation: "GetListItems",
    async: false,
    listName: "VideoList",
    CAMLViewFields: "<ViewFields></ViewFields>",
    completefunc: function (xData, Status) {
      $(xData.responseXML).SPFilterNode("z:row").each(function() {
var NewsTitle  = $(this).attr("ows_LinkTitle");
var NewsDec  = $(this).attr("ows_Description");
var NewsLink  = $(this).attr("ows_Link");
var NewsPic  = $(this).attr("ows_Image1");
var NewsPic2  = $(this).attr("ows_Image2");


        var liHtml11 = "<div data-type='youtube' data-title='" + NewsTitle + "' " + "data-description='" + NewsDec + "' "+ "data-thumb='" + NewsPic + "' "+ "data-image='" + "' " + NewsPic2 + "' " + "data-videoid='" + NewsLink + "' " + ">" + "</div>";


        $("#tasksUL4").append(liHtml11);
      });
    }
  });
});
</script>
<div id="tasksUL4" ></div>

<script type="text/javascript">

jQuery(document).ready(function(){

jQuery("#tasksUL4").unitegallery();

});

</script>

Simple. enjoy it !!

jQuery Accordion for SharePoint List

This is another simple Javascript using  jQuery Accordion for your SharePoint video Gallery. The Reason that I was using this Accordion, because of small space on my SharePoint Portal home page. but I have 5-6 YouTube videos to embed within small space. And I connected it  with SharePoint Custom List which My user able to add/remove Video's easily.
So I used this jQueryUI sample to solve my issue http://jqueryui.com/accordion/

Let's follow bellow simple steps,

1. create SharePoint list with two columns (Title, HTML)
2. Go to YouTube and enter your video to Sharepoint List
     Title: you can use YouTube Title
     HTML: copy and paste YouTube embed code

3. Download Jquery and SPServices (Or You can use their CDN)
4. Copy bellow code and save as TXT in your jQuey Library

<script type="text/javascript" src="../jQuery/jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="../jQuery/jquery.SPServices-2014.02.js"></script>

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<script language="javascript" type="text/javascript">

$(document).ready(function() {
  $().SPServices({
    operation: "GetListItems",
    async: false,
    listName: "Video",
    CAMLViewFields: "<ViewFields></ViewFields>",
    completefunc: function (xData, Status) {
      $(xData.responseXML).SPFilterNode("z:row").each(function() {
        var liHtml = "<h3>" + $(this).attr("ows_LinkTitle")+ "</h3>" + "<div>" +$(this).attr("ows_HTML")+ "</div>"  ;
$("#tasksUL2").append(liHtml);

      });
    }
  });
});
</script>
 <script>
  $(function() {
    $( "#tasksUL2" ).accordion();
  });
</script>

<ul id="tasksUL2"/>


4. Use CEWP and attache to TXT file.

Enjoy it !!