Is this possible ?

**DDmUSA** · 10-01-2011, 11:35 PM

1) Script Title: Thumbnail Viewer II

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...thumbnail2.htm

3) Describe problem:

I was wondering if it was possible to modify this script to have thumbnail images trigger the object embed code from Youtube to display video content in the target area.

**rangana** · 10-02-2011, 03:41 AM

Assuming you use Youtube's embedding that generates codes like:

Code:

<iframe width="420" height="315" src="http://www.youtube.com/embed/nYrVLt8NavI" frameborder="0" allowfullscreen></iframe>

...you can just use the same technique you did with the image, but instead of the image's source, use the Youtube video's source. In the example above, it's: http://www.youtube.com/embed/nYrVLt8NavI

Then, the quickest solution is to modify thumbnailviewer2.js into (add highlighted):

Code:

buildimage:function($, $anchor, setting) {
		var imghtml='<img src="'+$anchor.attr('href')+'" style="border-width:0" />'
		imghtml = ($anchor.attr('href').indexOf('youtube')>-1)?('<iframe width="420" height="315" src="'+$anchor.attr('href')+'" frameborder="0" allowfullscreen></iframe>'):imghtml;
		if (setting.link)
			imghtml='<a href="'+setting.link+'">'+imghtml+'</a>'
		imghtml='<div>'+imghtml+((setting.enabletitle!='no' && $anchor.attr('title')!='')? '<br />'+$anchor.attr('title') : '')+'</div>'
		return $(imghtml)
	},

**jscheuer1** · 10-02-2011, 03:42 AM

In testing it appears one cannot fade a YouTube iframe video. But perhaps rangana's way would fade. I didn't specifically test it. If it doesn't and that's important to you, it would be easier to write a new script. Here's one way:

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
// Video Thumb Script (c)2011 John Davenport Scheuer
// as first seen in http://www.dynamicdrive.com/forums/
// username: jscheuer1 - This Notice Must Remain for Legal Use
jQuery(function($){
	var faderate = 4000,
	urlbase = 'http://www.youtube.com/v/',
	urlquery = '?version=3&amp;hl=en_US&amp;rel=0;showinfo=0;controls=0;modestbranding=1;iv_load_policy=3',
	urlregex = /\/([^\/]+)$/, urlfrag;
	$('.vidlink').each(function(){
		$(this).click(function(e){e.preventDefault()})
		.bind($(this).hasClass('mouseover')? 'mouseenter' : 'click', function(){
			if(!(urlfrag = urlregex.exec(this.href))){return;}
			var $varea = $('#loadarea div').empty().hide().html('<object><param name="movie" value="' + urlbase +
			urlfrag[1] + urlquery + '"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><param name="wmode" value="opaque"></param><embed wmode="opaque" src="' + urlbase +
			urlfrag[1] + urlquery + '" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true"></embed></object>' +
			'<br>' + (this.rev || ''));
			if(window.opera){
				$varea.show();
			} else {
				$varea.fadeIn(faderate);
			}
		});
	});
});
</script>
<style type="text/css">
#loadarea, #loadarea object, #loadarea embed {
	width: 420px;
	height: 236px;
}
#loadarea, #loadarea div {
	height: 261px;
	text-align: center;
	background-color: #eee;
	font: bold 95% verdana, arial, sans-serif;
}
#loadarea {
	margin-bottom: 3px;
}
</style>
<!--[if lt IE 8]>
<style type="text/css">
#loadarea object, #loadarea embed {
	margin-bottom: 3px;
}
</style>
<![endif]-->
</head>
<body>
<div id="loadarea"><div></div></div>
<a class="vidlink" rev="Awsome Body Builder" href="http://youtu.be/l-CbdaTYJhs">Vid 1</a><br>
<a class="vidlink" rev="What Gets Model Rachel Davis Off . . . the Couch" href="http://youtu.be/zGVUUnrK1-s">Vid 2</a>
</body>
</html>

You can substitute img tags for the texts "Vid 1" and "Vid 2" as your thumbnail images.

Any questions, feel free to ask.

Notes:

The links are to the video, like if you click the Share button and copy the "Link to this video:" code. The urlbase and urlquery variables are then wrapped around the video's code (the last part of the "Link to this video:" url). These can be edited in the script, but I set them to values many people would want - displays the video without the suggested video at the end and without controls and with minimal promotions.
If you want to use mouseover activation (not recommended for video), add to the class name, example:
Code:
```
<a class="vidlink" rev="Awsome Bo . . .
```
becomes:
Code:
```
<a class="vidlink mouseover" rev="Awsome Bo . . .
```
Fades in for IE, Firefox, Chrome and Safari, not Opera (the effect worked oddly in that browser). Others not tested.

Thread: Is this possible ?

Thread Tools

Search Thread

Is this possible ?

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions