Here we show a simple example of a Video Scroller in JavaScript. Here we use images to be scrolled using jQuery fadeIn() and fadeOut() functions and the video will be shown in a PopUp window like this:
![VidScro1.jpg]()
![VidScro2.jpg]()
The popup window will be shown in the middle of the screen.
Step 1
First we will use some images:
![VidScro3.jpg]()
![VidScro4.jpg]()
Then we will write the code:
<div>
Videos</div>
<table width="330" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000">
<tr>
<td>
<a id="pvideo11" class="pvideo">
<img id="imgVideo" src="First Video.png" onclick="NewWindow('TeriMeri.html','win','500','350','no','center');return false" /></a>
<a id="pvideo12" class="pvideo">
<img id="imgVideo1" src="Second Video.png" onclick="NewWindow('Bin Tere.html','win','500','350','no','center');return false" /></a>
<a id="pvideo13" class="pvideo">
<img id="imgVideo2" src="Third Video.png" onclick="NewWindow('I Love You.html','win','500','350','no','center');return false" /></a>
<a id="pvideo14" class="pvideo">
<img id="imgVideo3" src="Fourth Video.png" onclick="NewWindow('Oh Hum Dum.html','win','500','350','no','center');return false" /></a>
<a id="pvideo15" class="pvideo">
<img id="imgVideo4" src="Fifth Video.png" onclick="NewWindow('Lakshya.html','win','500','350','no','center');return false" /></a>
</td>
</tr>
</table>
</div>
<script type='text/javascript'>//<![CDATA[
(function () {
var quotes = $(".pvideo");
var quoteIndex = -1;
function showNextQuote() {
++quoteIndex;
quotes.eq(quoteIndex % quotes.length)
.fadeIn(2000)
.delay(2000)
.fadeOut(2000, showNextQuote);
}
showNextQuote();
})();
//]]>
</script>
Step 2
Now we create various HTML pages to show the window in the PopUp Window (in this article, I will discuss only one HTML page coding); see:
TeriMeri.html
<html>
<head>
</head>
<body>
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<iframe id="i1" width="560" height="300px" src="http://www.youtube.com/embed/QqgJkkVaWk8"
frameborder="0" allowfullscreen></iframe>
</td>
</tr>
</table>
</body>
</html>
Here we will use the <iframe> tag to show the video and set the source of the video here. So when we run this page the output will be:
![VidScro5.jpg]()
Step 3
Now we will write the code in our Main (Video Scroller.html) page like this:
<a id="pvideo11" class="pvideo">
<img id="imgVideo" src="First Video.png" onclick="NewWindow('TeriMeri.html','win','500','350','no','center');return false" /></a>
Now we will write the JavaScript Code Like this:
<script language="javascript" type="text/javascript">
$(function () { $("a.youtube").YouTubePopup().click(); });
$.fn.YouTubePopup.defaults = { 'youtubeId': '', 'title': '', 'idAttribute': 'rel', 'draggable': false, 'modal': true, 'width': 640, 'height': 480, 'hideTitleBar': false, 'clickOutsideClose': true, 'overlayOpacity': 0.5, 'autohide': 2, 'autoplay': 1, 'color': 'red', 'color1': 'FFFFFF', 'color2': 'FFFFFF', 'controls': 1, 'fullscreen': 1, 'loop': 0, 'hd': 1, 'showinfo': 0, 'theme': 'light' };
var win = null;
function NewWindow(mypage, myname, w, h, scroll, pos) {
if (pos == "random") { LeftPosition = (screen.width) ? Math.floor(Math.random() * (screen.width - w)) : 100; TopPosition = (screen.height) ? Math.floor(Math.random() * ((screen.height - h) - 75)) : 100; }
if (pos == "center") { LeftPosition = (screen.width) ? (screen.width - w) / 2 : 100; TopPosition = (screen.height) ? (screen.height - h) / 2 : 100; }
else if ((pos != "center" && pos != "random") || pos == null) { LeftPosition = 0; TopPosition = 20 }
settings = 'width=' + w + ',height=' + h + ',top=' + TopPosition + ',left=' + LeftPosition + ',scrollbars=' + scroll + ',location=no,directories=no,status=no,menubar=no,toolbar=no,resizable=no';
win = window.open(mypage, myname, settings);
}
</script>
The output will be:
![VidScro6.jpg]()