hosting powerhost

jQuery Multimedia Portfolio – Galería con contenido múltiple

Posted by admin in scriptsAbr 21st, 2009 | no responses

jporfolio

Por medio de Mauricio en infectedfx doy con 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:

<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:

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

</ul>

Ejemplo: agregar imagenes de contenido

HTML:

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

Ejemplo: agregar video (flv format) de contenido

HTML:

<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:

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

Link to this page

Link to this page

Copy the code below to your web site.

x

Get LinkToThisPage from the Creative Real Estate Investing Guide.

Comparte esta información

Comments are closed.