Web Solution 4U: JavaScript Video Gallery, youtube Video Gallery, JavaScript Dynamic Video Gallery, JavaScript Tutorial to create dynamic Video gallery using youtube, DHTML SlideShow in JavaScript for Video

I found DHTML Slideshow coded in JavaScript on Dynamic Drive for manual slide show for images.

I found it useful because i need same effect but Instead using image i need same effect for my videos.

So i have edit its javascript to run OBJECT code of youtube flash to create my dynamic Video galley. I am sharing my own edited script here so it will help other users to create their Video gallery.

To run the video we are using youtube links means videos uploaded on youtubes will run in our video gallery by passing their links to javascript array.

I am providing here complete source for JavaScript Dynamic Video gallery.

HTML Source

<div class="youtube_frame">
<div class="video">
<script type="text/javascript">

    //Define your own array to hold the photo album images
    //Syntax: ["path_to_thumbnail", "opt_image_title", "opt_destinationurl", "opt_linktarget"]

    var myvacation = new Array()
    myvacation[0] = ["http://www.youtube.com/v/cgd5OQy0nhI?fs=1&hl=en_US", "Indian michael jackson awesome dance - funny video", ""]
    myvacation[1] = ["http://www.youtube.com/v/q5ZUWEDyyxA?fs=1&hl=en_US", " Antisex ( Max Film Company) (1m 20s, Russia)", ""]
    myvacation[2] = ["http://www.youtube.com/v/cgd5OQy0nhI?fs=1&hl=en_US", "Indian michael jackson awesome dance - funny video", ""]
    myvacation[3] = ["http://www.youtube.com/v/q5ZUWEDyyxA?fs=1&hl=en_US", " Antisex ( Max Film Company) (1m 20s, Russia)", ""]
    myvacation[4] = ["http://www.youtube.com/v/cgd5OQy0nhI?fs=1&hl=en_US", "Indian michael jackson awesome dance - funny video", ""]
    myvacation[5] = ["http://www.youtube.com/v/q5ZUWEDyyxA?fs=1&hl=en_US", " Antisex ( Max Film Company) (1m 20s, Russia)", ""]

    //myvacation[2]=["http://www.youtube.com/v/r5N2BLDftuY?fs=1&hl=en_US&color1=0x234900&color2=0x4e9e00", "Delhi 6 Mast Song", ""]

    //initiate a photo gallery
    //Syntax: new photogallery(imagearray, cols, rows, tablewidth, tableheight, opt_[paginatetext_prefix, paginatetext_linkprefix])
    var thepics = new photogallery(myvacation, 1, 1, '659px', '260px', 'testing')

    //OPTIONAL: Run custom code when an image is clicked on, via "onselectphoto"
    //DELETE everything below to disable
    //Syntax: function(img, link){}, whereby img points to the image object of the image, and link, its link object, if defined
    thepics.onselectphoto = function(img, link) {
        if (link != null) //if this image is hyperlinked
            window.open(link.href, "", "width=800, height=600, status=1, resizable=1")
        return false //cancel default action when clicking on image, by returning false instead of true
    }

</script></div>

</div>

Put this text into body of your HTML.

CSS Source

JavaScript Source

// -------------------------------------------------------------------
// Photo Album Script v2.0- By Dynamic Drive, available at: http://www.dynamicdrive.com
// Mar 11th, 07': Script updated to v2.0
// -------------------------------------------------------------------

function photogallery(garray, cols, rows, twidth, theight, paginatetext){
 gcount=(typeof gcount=="undefined")? 1 : gcount+1 //global var to keep count of current instance of photo gallery
 this.gcount=gcount
 this.galleryarray=garray
 this.cols=cols
 this.rows=rows
 var twidth=twidth || "700x" //default table width is 700px
 var theight=theight || "500px"
 var ptext=(typeof paginatetext=="object")? paginatetext : ["Browse Gallery:", ""] //Store 2 compontents of paginate DIV text inside array
 this.pagecount=Math.ceil(this.galleryarray.length/(cols*rows)) //calculate number of "pages" needed to show the images
 document.write('<table class="photogallery" id="photogallery-'+gcount+'" style="width:'+twidth+'; height:'+theight+';">') //Generate table for Photo Gallery
 for (var r=0; r<rows; r++){
  document.write('<tr>')
  for (var c=0; c<cols; c++)
   document.write('<td valign="top"></td>')
  document.write('</tr>')
 }
 document.write('</table>')
 document.write('<div class="photonavlinks" id="photogallerypaginate-'+gcount+'"></div>') //Generate Paginate Div

 var gdiv=document.getElementById("photogallery-"+this.gcount)
 var pdiv=document.getElementById("photogallerypaginate-"+this.gcount)
 gdiv.onselectphoto=function(imgobj, linkobj){return true} //custom event handler "onselectphoto", invoked when user clicks on an image within gallery
 this.showpage(gdiv, 0)
 this.createNav(gdiv, pdiv, ptext)
 gdiv.onclick=function(e){return photogallery.defaultselectaction(e, this)} //attach default custom event handler action to "onclick" event
 return gdiv
}


photogallery.prototype.createImage=function(imgparts){
 //var imageHTML='<img src="'+imgparts[0]+'" title="'+imgparts[1]+'"/>'
 var imageHTML='<object height="243" width="645" type="application/x-shockwave-flash" data="'+imgparts[0]+'"><param name="movie" value="'+imgparts[0]+'"><param name="quality" value="high"><param value="opaque" name="wmode"></object>'
 if (typeof imgparts[2]!="undefined" && imgparts[2]!=""){ //Create URL?
  var linktarget=imgparts[3] || ""
  imageHTML='<a href="'+imgparts[2]+'" target="'+linktarget+'">'+imageHTML+'</a>'
 }
 if (typeof imgparts[1]!="undefined" && imgparts[1]!="") //Display description?
  imageHTML+='<div class="details" style="position:absolute; left:0px; bottom:30px;">'+imgparts[1] +'</div>'
 return imageHTML
}


photogallery.prototype.showpage=function(gdiv, pagenumber){
 var totalitems=this.galleryarray.length //total number of images
 var showstartindex=pagenumber*(this.rows*this.cols) //array index of div to start showing per pagenumber setting
 var showendindex=showstartindex+(this.rows*this.cols) //array index of div to stop showing after per pagenumber setting
 var tablecells=gdiv.getElementsByTagName("td")
 for (var i=showstartindex, currentcell=0; i<showendindex && i<totalitems; i++, currentcell++) //Loop thru this page's images and populate cells with them
  tablecells[currentcell].innerHTML=this.createImage(this.galleryarray[i])
 while (currentcell<tablecells.length){ //For unused cells, if any, clear out its contents
  tablecells[currentcell].innerHTML=""
  currentcell++
 }
}

photogallery.prototype.createNav=function(gdiv, pdiv , ptext){
 var instanceOfGallery=this
 var navHTML=""
 for (var i=0; i<this.pagecount; i++)
  navHTML+='<a href="#navigate" rel="'+i+'">'+ptext[1]+(i+1)+'</a> ' //build sequential nav links
 pdiv.innerHTML=ptext[0]+' '+navHTML
 var navlinks=pdiv.getElementsByTagName("a")
 navlinks[0].className="current" //Select first link by default
 this.previouspage=navlinks[0] //Set previous clicked on link to current link for future ref
 for (var i=0; i<navlinks.length; i++){
  navlinks[i].onclick=function(){
   instanceOfGallery.previouspage.className="" //"Unhighlight" last link clicked on...
   this.className="current" //while "highlighting" currently clicked on flatview link (setting its class name to "selected"
   instanceOfGallery.showpage(gdiv, this.getAttribute("rel"))
   instanceOfGallery.previouspage=this //Set previous clicked on link to current link for future ref
   return false
  }
 }
}

photogallery.defaultselectaction=function(e, gdiv){ //function that runs user defined "onselectphoto()" event handler
 var evtobj=e || window.event
 var clickedobj=evtobj.target || evtobj.srcElement
 if (clickedobj.tagName=="object"){
  var linkobj=(clickedobj.parentNode.tagName=="A")? clickedobj.parentNode : null
  return gdiv.onselectphoto(clickedobj, linkobj)
 }
}

Modification
myvacation[0] = ["http://www.youtube.com/v/cgd5OQy0nhI?fs=1&hl=en_US", "Indian michael jackson awesome dance - funny video", ""]

Myacation is array name to add new links.
it accept four argument as describe below.
["path_to_thumbnail", "opt_image_title", "opt_destinationurl", "opt_linktarget"]

path_to_thumbnail = here you mention the url for video you want to run.
Else option will not used as we are working on video so their title will be same as it on youtube.