bxGallery, un plugin jQuery de tan solo 4kb que les permitirá crear y diseñar galerías de imágenes para sus productos y/o porfolios. Posee bellos efectos y puede configurarse a gusto. Algunas de sus características:
- Cross browser (incluyendo IE6)
- Crea una lista con las miniaturas automaticamente
- Configuras el tamaño máximo de las imágenes
- Asignas la clase que desees al contendor
- Configuras la opacidad de las thumbnails
- Defines la imagen que se mostrará para precarga
- Asignas dimensiones para la lista, imágenes, contendores
Ver Demo InfectedFX - Otros demos
Uso
JavaScript:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.bxGallery.min.js"></script>
<script type="text/javascript" src="js/jquery.bxGallery.min.js"></script>
Nuestra estructura
HTML:
<ul id="myID">
<li><img src="Fotos/Fotonumero01.png" alt="imagen01" width="400" height="400" /></li>
<li><img src="Fotos/Fotonumer02.png" alt="imagen02" width="400" height="400" /></li>
<li><img src="Fotos/Fotonumer03.png" alt="imagen03" width="400" height="400" /></li>
</ul>
<li><img src="Fotos/Fotonumero01.png" alt="imagen01" width="400" height="400" /></li>
<li><img src="Fotos/Fotonumer02.png" alt="imagen02" width="400" height="400" /></li>
<li><img src="Fotos/Fotonumer03.png" alt="imagen03" width="400" height="400" /></li>
</ul>
Función para que se ejecute nuestra galería
JavaScript:
$(document).ready(function(){
$('#myID').bxGallery();
});
$('#myID').bxGallery();
});
Mas info y Descarga bxgalleryplugin.com
Via bxGallery : Galería de imágenes con jQuery by InfectedFX
Testking offers you guaranteed 70-646 exam preparation at your own pace. Subscribe for 70-647 online training to guarantee pass exam 70-640.
Loading ...
Tweets that mention bxGallery : Simple jQuery image gallery -- Topsy.com
22-01-2010
Permalink
[...] This post was mentioned on Twitter by Allen Zapien and rpulido, jQueryBuzz. jQueryBuzz said: bxGallery : Simple jQuery image gallery http://bit.ly/8wXomt [...]
Diseño web
22-01-2010
Permalink
Interesante script, nunca están de mas.
acristalamiento fachadas
22-01-2010
Permalink
Una galería fotográfica sencilla visualmente, pero muy práctica. Quizás la pruebe en mi sitio web.
Un saludo y gracias por el aporte.
Markos
22-01-2010
Permalink
Bonito efecto, simple
Webstandard-Blog
22-01-2010
Permalink
Que fácil, esta solución. Sabes el jQuery Plugin Roundabout (- Shapes) ?
Top contenidos » Blog Archive » bxGallery : Simple jQuery image gallery
22-01-2010
Permalink
[...] PLAIN TEXT JavaScript: <script type=”text/javascript” [...]
Carla
22-01-2010
Permalink
Hola Nikko,
Tengo un problemilla a ver si me puede ayudar...
Resulta que he utilizado esta galería para hacer una web de un amigo y ahora despues de haber implementado esta galeria en más de 50 páginas me dice que no le va bien porque necesita añadir unas 40 fotos en cada galeria y es muy incomodo tener que estar bajando el ratón a buscar la miniatura y luego subir para ver la imagen en grande.
La solución que hemos comentado que estaría bien es añadir la opción que haciendo clic sobre la imagen grande te fuera a la siguiente foto.
O añadir unos botones de 'siguiente' y 'anterior'.
Mi problema es:
1. Nose como hacer ninguna de las opciones anteriores
2. La solución ideal seria realizarlo de alguna manera que no tenga que ir abriendo todas las galerias pk tendria k modificar 50 arichivos, una locura.
Nose alomejor esta galeria ya e da la opción modificando algun codigo o añadiendo algo sencillo.
Pero mis conocimientos ya no pueden hacer más.
Gracias por tu atención
Rick
22-01-2010
Permalink
[...] PLAIN TEXT JavaScript: <script type=”text/javascript” [...]
Bill
22-01-2010
Permalink
Una galería fotográfica sencilla visualmente, pero muy práctica. Quizás la pruebe en mi sitio web.
Un saludo y gracias por el aporte.