Foro de elhacker.net

Hola a todos..

Espero y me puedan ayudar con este codigo que me esta volviendo loco... yo no conozco mucho este lenguaje (javascript), y quiero modificar un pequeño codigo, que yo creo no es muy complicado. El codigo toma la imagen miniatura de un video de youtube y la muestra en un div, el problema es que yo quiero redimencionar esa imagen pero no se como, ya le intente de varias formas y no me sale, aqui el codigo...

jQuery.fn.ytplaylist = function(options) {
 
  // default settings
  var options = jQuery.extend( {
    holderId: 'ytvideo',
	playerHeight: '280',
	playerWidth: '325',
	addThumbs: false,
	thumbSize: 'small',
	showInline: false,
	autoPlay: true,
	showRelated: true,
	allowFullScreen: false
  },options);
 
  return this.each(function() {
 
   		var selector = $(this);
 
		var autoPlay = "";
		var showRelated = "&rel=0";
		var fullScreen = "";
		if(options.autoPlay) autoPlay = "&autoplay=1"; 
		if(options.showRelated) showRelated = "&rel=1"; 
		if(options.allowFullScreen) fullScreen = "&fs=1"; 
 
		//throw a youtube player in
		function play(id)
		{
		   var html  = '';
 
		   html += '<object height="'+options.playerHeight+'" width="'+options.playerWidth+'">';
		   html += '<param name="movie" value="http://www.youtube.com/v/'+id+autoPlay+showRelated+fullScreen+'"> </param>';
		   html += '<param name="wmode" value="transparent"> </param>';
		   if(options.allowFullScreen) { 
		   		html += '<param name="allowfullscreen" value="true"> </param>'; 
		   }
		   html += '<embed src="http://www.youtube.com/v/'+id+autoPlay+showRelated+fullScreen+'"';
		   if(options.allowFullScreen) { 
		   		html += ' allowfullscreen="true" '; 
		   	}
		   html += 'type="application/x-shockwave-flash" wmode="transparent"  height="'+options.playerHeight+'" width="'+options.playerWidth+'"></embed>';
		   html += '</object>';
 
		   return html;
 
		};
 
 
		//grab a youtube id from a (clean, no querystring) url (thanks to http://jquery-howto.blogspot.com/2009/05/jyoutube-jquery-youtube-thumbnail.html)
		function youtubeid(url) {
			var ytid = url.match("[\\?&]v=([^&#38;#]*)");
			ytid = ytid[1];
			return ytid;
		};
 
 
		//load inital video
		var firstVid = selector.children("li:first-child").addClass("currentvideo").children("a").attr("href");
		$("#"+options.holderId+"").html(play(youtubeid(firstVid)));
 
		//load video on request
		selector.children("li").children("a").click(function() {
 
			if(options.showInline) {
				$("li.currentvideo").removeClass("currentvideo");
				$(this).parent("li").addClass("currentvideo").html(play(youtubeid($(this).attr("href"))));
			}
			else {
				$("#"+options.holderId+"").html(play(youtubeid($(this).attr("href"))));
				$(this).parent().parent("ul").find("li.currentvideo").removeClass("currentvideo");
				$(this).parent("li").addClass("currentvideo");
			}
 
 
 
			return false;
		});
 
 
		if(options.addThumbs) {
 
			selector.children().each(function(i){
 
				var replacedText = $(this).text();
 
				if(options.thumbSize == 'small') {
 
					var thumbUrl = "http://img.youtube.com/vi/"+youtubeid($(this).children("a").attr("href"))+"/2.jpg";
				}
				else {
					var thumbUrl = "http://img.youtube.com/vi/"+youtubeid($(this).children("a").attr("href"))+"/0.jpg";
				}
 
 
				$(this).children("a").empty().html("<img src='"+thumbUrl+"' alt='"+replacedText+"' />"+replacedText).attr("title", replacedText);
 
			});	
 
		}
 
 
  });
 
};

creo yo, la parte donde se tienen que poner los parametros es en esta parte del codigo:

$(this).children("a").empty().html("<img src='"+thumbUrl+"' alt='"+replacedText+"' />"+replacedText).attr("title", replacedText);

pero ya intente de varias formas y nomas no me funciona, espero alguien me puedan echar la mano.. se lo agradeceria mucho.

Gracias.

Pero si te fijas, podes sacar la imagen directamente desde las imágenes de YOUTUBE. Así, supongamos que el video sea el siguiente,

"http://www.youtube.com/watch?v=".ZyvZ6sLfj2k;

para ver el THUMB es así,

"http://img.youtube.com/vi/".ZyvZ6sLfj2k."/default.jpg";

Supongo que deberías de agregarle esto,

$(this).children("a").empty().html(
  "<img src='"+thumbUrl+"' alt='"+replacedText+"' height = '580' width= '525' />"+replacedText
).attr(
  "title", replacedText
);

K tal,

Gracias por responder tan rápido, mira efectivamente funciona, pero solo con "heigh" osea, solo me cambia ese valor, el otro width no me lo respeta.. el código lo tengo lo tengo exactamente asi.

$(this).children("a").empty().html("<img src='"+thumbUrl+"' height='100' width='100' alt='"+replacedText+"' />"+replacedText).attr("title", replacedText);

sabrás a que se deba??

gracias.

Pues la verdad, ni idea. --Mi cerebro esta en otra cosa ahora--, de igual forma, solo puedo decirte, de que pondle lo siguiente,

$(this).children("a").empty().html(
  "<img src='"+thumbUrl+"' alt='"+replacedText+"' height = '580px' width= '525px' />"+replacedText
).attr(
  "title", replacedText
);

Ok,

Gracias, de igual forma me ayudaste mucho, deja ver si puedo arreglar ese pequeño error ya es mas fácil..

saludos.