elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Entrar al Canal Oficial Telegram de elhacker.net


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Ayuda videos youtube como facebook
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Ayuda videos youtube como facebook  (Leído 1,993 veces)
AmigoCabron

Desconectado Desconectado

Mensajes: 16


http://www.twitter.com/amigocabron


Ver Perfil WWW
Ayuda videos youtube como facebook
« en: 4 Noviembre 2012, 19:41 pm »

Bueno vi el tema de los videos de youtube como facebook que tambien me interesaba a mi y bueno he mirado el jquery ese del lightbox y editando el codigo he acabado con esto:

Código:
<!doctype html>
<html lang="en-us">
<head>

<meta charset="utf-8">
<title>Lightbox 2</title>

<meta name="description" lang="en" content="Lightbox 2 is a simple, unobtrusive script used to overlay images on the current page. It's a snap to setup and works on all modern browsers." />
  <meta name="author" content="Lokesh Dhakar">

  <meta name="viewport" content="width=device-width">

<link rel="shortcut icon" type="image/ico" href="images/favicon.gif" />
<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

  <link href='http://fonts.googleapis.com/css?family=Fredoka+One|Open+Sans:400,700' rel='stylesheet' type='text/css'>

</head>
<body>
<div id="sidebar">
<div class="section" id="example">


<h2>LQSA TEMPORADA 1</h2>

<h3>1x01 MIRADOR DE MONTEPINAR</h3>
  <div class="imageRow">
   <div class="single">
   <a href="images/examples/1x01.avi" rel="lightbox"><img src="images/examples/1x01.avi" alt="" /></a>
   </div>
  </div>

</div><!-- end #content -->

<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery-ui-1.8.18.custom.min.js"></script>
<script src="js/jquery.smooth-scroll.min.js"></script>
<script src="js/lightbox.js"></script>

<script>
  jQuery(document).ready(function($) {
      $('a').smoothScroll({
        speed: 1000,
        easing: 'easeInOutCubic'
      });

      $('.showOlderChanges').on('click', function(e){
        $('.changelog .old').slideDown('slow');
        $(this).fadeOut();
        e.preventDefault();
      })
  });

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-2196019-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
</body>
</html>

como veis lo que quiero poner es un video, no una foto, que tendria que modificar del codigo?

puede ser esto de: ''imagerow"?

Código:
	<h3>1x01 MIRADOR DE MONTEPINAR</h3>
  <div class="imageRow"
   <div class="single">
   <a href="images/examples/1x01.avi" rel="lightbox"><img src="images/examples/1x01.avi" alt="" /></a>
   </div>
  </div>

gracias.

pd(los videos se me quedan cargando y no se abren.)-

otra cosa, como podria poner para abrir los videos de youtube y no de mi pc , ya que de mi pc habria que subirlos al hosting o esto tambien y imposible. xd


« Última modificación: 4 Noviembre 2012, 19:43 pm por AmigoCabron » En línea

I am a PornStar
#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.855



Ver Perfil WWW
Re: Ayuda videos youtube como facebook
« Respuesta #1 en: 5 Noviembre 2012, 01:14 am »

Hola,

Lo cierto es que en el post anterior te di un mal ejemplo. Mas que nada porque "Lightbox2" no esta precisamente desarrollado para vídeos sino para imágenes.. Que se puede adaptar se puede pero no merece la pena.

Como te dije también, hay infinidad de plugins para jQuery que funcionan o están hechos para vídeos tipo youtube. Un ejemplo es prettyPhoto.


Te dejo un ejemplo de como se implementaría.
Código
  1. <!doctype html>
  2. <meta charset="utf-8">
  3. <title>Un video cualquiera</title>
  4.   <!-- Incluimos el CSS de prettyPhoto -->
  5.   <link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" />
  6. </head>
  7.  
  8.   <!-- Incluimos jQuery -->
  9.   <script src="js/jquery-1.6.1.min.js" type="text/javascript"></script>
  10.   <!-- Incluimos prettyPhoto -->
  11.   <script src="js/jquery.prettyPhoto.js" type="text/javascript"></script>
  12.   <!-- Indicamos a prettyPhoto que se active cuando encuentra un enlace (a) con el atributo rel="prettyPhoto" -->
  13.   <script type="text/javascript" charset="utf-8">
  14.      $(document).ready(function(){
  15.         $("a[rel^='prettyPhoto']").prettyPhoto();
  16.      });
  17.   </script>
  18.  
  19.   <!-- La prueba y como se implementaria -->
  20.   <a href="http://www.youtube.com/watch?v=ffmnlUL8hOk" rel="prettyPhoto">Un nombre cualquiera.</a>
  21. </body>
  22. </html>

Funciona con Youtube, Vimeo, SWF's, imágenes, iframes y etc etc..

Puedes descargar prettyPhoto desde aquí:
Código
  1. http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/#prettyPhoto

Saludos


En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines