jQuery Multimedia Portfolio Publicada el Miércoles 28 de Noviembre de 2007 a las 2:31 am por Infected-FX
Un útil carrusel multiformato utilizando jQuery con soporte para archivos mp3, flv e imágenes. El funcionamiento es muy similar al que carrusel que tienen en la página de apple.
Este plugin para jQuery detecta automáticamente la extensión del archivo y le inserta el player que le corresponde en caso de ser necesario, para las imágenes trae integrado el script de thickbox y ocupa la UI de jQuery.
Llamada JS/CSS
Lo primero queh ay que hacer es mandar a llamar el javascript y la hoja de estilos entre las etiquetas head de tu html.
HTML:
-
<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>
Implementación
HTML:
-
<ul class="multimedia-portfolio">
-
<li><a href='doc-link'><img src='img-thumbnail' title='doc-title'></a></li>
-
<li>...</li>
-
</ul>
Ejemplo :: Imagen
HTML:
-
<li>
-
<a href="imagen.jpg" alt="agrandir"><img src="thumbnail.jpg" title="imagen" /></a>
-
</li>
Ejemplo :: Video (flv)
HTML:
-
<li>
-
<a href="video.flv" alt="video"><img src="imagen.jpg" width="320" height="240" title="video" /></a>
-
</li>
Ejemplo :: Audio (mp3)
HTML:
-
<li>
-
<a href="audio.mp3" alt="Audio"><img src="imagen.jpg" title="Audio" /></a>
-
</li>
