MixInformatico.com » script http://www.mixinformatico.com Reforzando tus ideas Sat, 31 Jul 2010 00:47:31 +0000 en hourly 1 http://wordpress.org/?v=3.1.2 Query Multimedia Portfolio – Galería con contenido múltiple http://www.mixinformatico.com/2010/04/04/query-multimedia-portfolio-%e2%80%93-galeria-con-contenido-multiple/ http://www.mixinformatico.com/2010/04/04/query-multimedia-portfolio-%e2%80%93-galeria-con-contenido-multiple/#comments Sun, 04 Apr 2010 19:16:51 +0000 javier http://www.mixinformatico.com/?p=9221

jQuery Multimedia Portfolio un interesante plugin para jQuery que nos permitirá crear un porfolio utilizando una especia de carrusel con contenido múltiple. Para ser claros, en el no solo podremos introducir imágenes, sino que jQuery Multimedia Portfolio nos permitirá también optar por agregar videos en formato “ flv” o audio en formato “ mp3 ”. Esto es sin duda algo que hace a jQuery Multimedia Portfolio realmente interesante. Este plugin detectara automáticamente la extensión del archivo y le inserta el contenido o la funcionalidad correspondiente a cada uno de ellos. Por ejemplo, en el caso de videos, la opción de reproducción.

Ver Demo

Descargas:

Podremos bajar los archivos desde infectedfx o de la web oficial de openstudio

USO :

Como de costumbre lo primero que haremos será realizar las llamadas correspondientes al script y hoja de estilos utilizadas. Copiamos y pegamos el siguiente código dentro de nuestra etiqueta < head > .

JavaScript:

1
2
3
4
5
6
7
8
9
10
11

<link rel=“stylesheet” href=“css/multimedia-portfolio.css” type=“text/css” media=“screen” />
<script type=“text/javascript” src=“js/jquery.js”></script>
<script type=“text/javascript” src=“js/jquery.dimensions.js”></script>
<script type=“text/javascript” src=“js/ui.mouse.js”></script>
<script type=“text/javascript” src=“js/ui.slider.js”></script>
<script type=“text/javascript” src=“js/jquery.multimedia-portfolio.js”></script>
<script type=“text/javascript”>
  $(document).ready(function(){
  $(“ul.multimedia-portfolio”).multimedia_portfolio({width: 500, baseDir: ‘.'});
  });
</script>

y para insertar el contenido, la siguiente estructura

HTML:

1
2
3
4
5

<ul class=”multimedia-portfolio”>
<li>
………………CONTENIDO………………….
</li>
</ul>

Ejemplo: agregar imagenes de contenido

HTML:

1
2
3

<li>
<a href=”imagen.jpg” alt=”agrandir”> <img src=”thumbnail.jpg” title=”imagen” /> </a>
</li>

HTML:

1
2
3

 <li>
<a href=”video.flv” alt=”video”> <img src=”imagen.jpg” width=”320? height=”240? title=”video” /> </a>
</li>

Ejemplo: agregar audio record (mp3 format) de contenido

HTML: 

1
2
3

<li>
<a href=”audio.mp3? alt=”Audio”> <img src=”imagen.jpg” title=”Audio” /> </a>
</li>

HTML:

1
2
3
4
5

<ul class=”multimedia-portfolio”>
<li>
………………CONTENIDO………………….
</li>
</ul>

Ejemplo: agregar imagenes de contenido

HTML:

1
2
3

<li>
<a href=”imagen.jpg” alt=”agrandir”> <img src=”thumbnail.jpg” title=”imagen” /> </a>
</li>

Ejemplo: agregar video (flv format) de contenido

HTML: 

1
2
3

<li>
<a href=”video.flv” alt=”video”> <img src=”imagen.jpg” width=”320? height=”240? title=”video” /> </a>
</li>

Ejemplo: agregar audio record (mp3 format) de contenido

HTML:

1
2
3

<li>
<a href=”audio.mp3? alt=”Audio”> <img src=”imagen.jpg” title=”Audio” /> </a>
</li>
]]> http://www.mixinformatico.com/2010/04/04/query-multimedia-portfolio-%e2%80%93-galeria-con-contenido-multiple/feed/ 0