Crear una galería de imágenes y texto sencilla con jQuery

Escrito el 16 febrero, 2011 por Juan Díaz-Bustamante

Aprovechando lo que hicimos con jQuery en el artículo anterior Crear un menú con pestañas con jQuery, vamos a cambiar las pestañas por una galería de imágenes en tamaño pequeño, de tal manera que al hacer click sobre una de ellas aparezca en grande la imagen que le corresponde junto a un texto explicativo.

Es una galería sencilla y con muchas mejoras posibles, como podréis ver (podríamos poner que las imágenes avancen de manera automática, o unas flechas a izquierda y derecha para avanzar o retroceder en las imágenes grandes), pero nos puede servir para algunos proyectos. Lo que pretendemos hacer es esto:

Ver Demo

Como veis hay dos partes bien diferenciadas: la parte de las imágenes pequeñas, que hace la función de menú, y la parte de las imágenes grandes con su texto correspondiente. Para la parte de las imágenes pequeñas he optado, por sencillez, por aprovechar una solución ya existente. He utilizado jMyCarousel. Otras opciones disponibles son: jQuery Thumnail Scroller o Thumbnails preview slider, por ejemplo.

Comenzamos entonces con el contenido que vamos a mostrar, es decir, las imágenes grandes y el texto explicativo de cada una de ellas:

<div id="contenido_galeria">
  <div id="imagen1">
    <img src="images/1.jpg" alt="" />
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque convallis varius elementum. In euismod tempor mi eu euismod. Donec libero tortor, tincidunt id egestas at, ultricies non nisl. Donec enim lorem, commodo sed dapibus quis, molestie vitae urna. Mauris semper dignissim nibh. Proin rhoncus, urna non posuere sagittis, risus eros iaculis tellus, a hendrerit sem felis nec urna. Integer purus mauris, pharetra quis commodo non, varius quis ante.</p>
  </div>
  <div id="imagen2">
    <img src="images/2.jpg" alt="" />
    <p>Nullam et dolor ut neque eleifend elementum in quis lacus. Donec lorem libero, posuere feugiat ornare vitae, adipiscing in nunc. Sed gravida, purus vel malesuada luctus, nisi nisi lobortis nisl, nec auctor odio diam non nibh. Maecenas mattis mi sed arcu consequat id pretium tortor facilisis. Praesent nec vestibulum massa. Proin at pulvinar orci. Nulla facilisi. Duis rhoncus diam ut orci ultricies auctor dignissim massa rutrum. </p>
  </div>
  <div id="imagen3">
    <img src="images/3.jpg" alt="" />
    <p>Nulla facilisi. Phasellus blandit dictum neque. Etiam id fringilla nisl. Fusce pharetra commodo felis ac viverra. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nisi lorem, feugiat at adipiscing eu, ullamcorper eget orci. Curabitur scelerisque diam et risus vestibulum convallis. Integer vestibulum ultricies purus sed semper. Ut lobortis dui non nunc facilisis venenatis.</p>
 </div>
  <div id="imagen4">
    <img src="images/4.jpg" alt="" />
    <p>Fusce porta pretium tincidunt. Curabitur sapien purus, malesuada sit amet sagittis ut, feugiat volutpat magna. Duis vitae enim ligula. In orci ligula, mollis quis facilisis in, rhoncus sodales ipsum. Mauris vel sem mauris, at sollicitudin magna. Fusce mi sem, porttitor ut rutrum vitae, sollicitudin in nibh. Integer quis leo libero. Quisque ligula lorem, mollis et viverra at, consequat et turpis.</p>
  </div>
  <div id="imagen5">
    <img src="images/5.jpg" alt="" />
    <p>Aenean semper auctor sem fringilla volutpat. Maecenas ultricies tortor quis sapien vulputate scelerisque. Integer consequat purus at libero posuere vel vestibulum est tristique. Donec augue arcu, hendrerit sed dignissim ut, eleifend et neque. Sed placerat, augue quis vulputate accumsan, libero nibh posuere quam, a volutpat ante odio et ipsum. Nulla malesuada tellus ac justo mattis ultrices. </p>
  </div>
  <div id="imagen6">
    <img src="images/6.jpg" alt="" />
    <p>Suspendisse potenti. Nam elementum augue id augue lobortis et ultrices nisi vestibulum. In dapibus, nibh a vehicula rutrum, risus enim tincidunt erat, eu facilisis felis ante cursus arcu. Aenean ut varius libero. Sed metus tellus, tempus eu cursus quis, consectetur vitae lorem. Nullam sodales nulla a erat tempus condimentum.  Aenean vulputate neque eget arcu consequat interdum. Aliquam ut nisi dui, sit amet tincidunt sem. Etiam volutpat dignissim gravida.</p>
  </div>
</div><!-- fin div contenido-galeria -->

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque convallis varius elementum. In euismod tempor mi eu euismod. Donec libero tortor, tincidunt id egestas at, ultricies non nisl. Donec enim lorem, commodo sed dapibus quis, molestie vitae urna. Mauris semper dignissim nibh. Proin rhoncus, urna non posuere sagittis, risus eros iaculis tellus, a hendrerit sem felis nec urna. Integer purus mauris, pharetra quis commodo non, varius quis ante.</p>

</div>

<p>Nullam et dolor ut neque eleifend elementum in quis lacus. Donec lorem libero, posuere feugiat ornare vitae, adipiscing in nunc. Sed gravida, purus vel malesuada luctus, nisi nisi lobortis nisl, nec auctor odio diam non nibh. Maecenas mattis mi sed arcu consequat id pretium tortor facilisis. Praesent nec vestibulum massa. Proin at pulvinar orci. Nulla facilisi. Duis rhoncus diam ut orci ultricies auctor dignissim massa rutrum. </p>

</div>

<p>Nulla facilisi. Phasellus blandit dictum neque. Etiam id fringilla nisl. Fusce pharetra commodo felis ac viverra. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nisi lorem, feugiat at adipiscing eu, ullamcorper eget orci. Curabitur scelerisque diam et risus vestibulum convallis. Integer vestibulum ultricies purus sed semper. Ut lobortis dui non nunc facilisis venenatis.</p>

</div>

<p>Fusce porta pretium tincidunt. Curabitur sapien purus, malesuada sit amet sagittis ut, feugiat volutpat magna. Duis vitae enim ligula. In orci ligula, mollis quis facilisis in, rhoncus sodales ipsum. Mauris vel sem mauris, at sollicitudin magna. Fusce mi sem, porttitor ut rutrum vitae, sollicitudin in nibh. Integer quis leo libero. Quisque ligula lorem, mollis et viverra at, consequat et turpis.</p>

</div>

<p>Aenean semper auctor sem fringilla volutpat. Maecenas ultricies tortor quis sapien vulputate scelerisque. Integer consequat purus at libero posuere vel vestibulum est tristique. Donec augue arcu, hendrerit sed dignissim ut, eleifend et neque. Sed placerat, augue quis vulputate accumsan, libero nibh posuere quam, a volutpat ante odio et ipsum. Nulla malesuada tellus ac justo mattis ultrices. </p>

</div>

<p>Suspendisse potenti. Nam elementum augue id augue lobortis et ultrices nisi vestibulum. In dapibus, nibh a vehicula rutrum, risus enim tincidunt erat, eu facilisis felis ante cursus arcu. Aenean ut varius libero. Sed metus tellus, tempus eu cursus quis, consectetur vitae lorem. Nullam sodales nulla a erat tempus condimentum. Aenean vulputate neque eget arcu consequat interdum. Aliquam ut nisi dui, sit amet tincidunt sem. Etiam volutpat dignissim gravida.</p>

</div>

</div>

Simplemente hemos incluido cada imagen y su texto dentro de un div (imagen1, imagen2, etc..) y todo ello lo hemos envuelto en un div que hemos llamado contenido-galeria.

A continuación tenemos las imágenes pequeñas, que las hemos guardado en una carpeta que se llama “thumbs”, con una sencilla lista siguiendo las instrucciones de jMyCarousel. Es muy importante que los “href” de los enlaces se correspondan con los “div” de las imágenes grandes, tal y como veremos más adelante.

<div class="jMyCarousel">
    <ul>
        <li><a href="#imagen1" title=""><img src="images/thumbs/1.jpg"alt="" /></a></li>
        <li><a href="#imagen2" title=""><img src="images/thumbs/2.jpg"alt="" /></a></li>
        <li><a href="#imagen3" title=""><img src="images/thumbs/3.jpg"alt="" /></a></li>
        <li><a href="#imagen4" title=""><img src="images/thumbs/4.jpg"alt="" /></a></li>
        <li><a href="#imagen5" title=""><img src="images/thumbs/5.jpg"alt="" /></a></li>
        <li><a href="#imagen6" title=""><img src="images/thumbs/6.jpg"alt="" /></a></li>
    </ul>
</div><!-- Fin div jMyCarousel -->

<ul>

</ul>

</div>

Ahora le vamos a dar unos pequeños estilos a todo esto:

div.jMyCarousel  {   margin-top: 10px; height: 143px !important;}
div.jMyCarousel .prev  {   background: url('../images/left.png') center center no-repeat; width:47px; height:61px; border:0px; }
div.jMyCarousel .next  {   background: url('../images/right.png') center center no-repeat; width:40px; height:61px; border:0px; }
div.jMyCarousel ul li   {   margin:0px; line-height:0px; padding:0px; }
div.jMyCarousel ul li a  {   display:block; }
div.jMyCarousel ul li img   {   display:block; border:0px; margin: 0px 5px 0px;}
#contenido_galeria {   position: relative; height: 350px;}
#contenido_galeria img  {   float: left; width: 700px;}
#contenido_galeria p {   width: 270px; position: absolute; top: 0px; left: 730px; }

div.jMyCarousel { margin-top: 10px; height: 143px !important;}

div.jMyCarousel .prev { background: url('../images/left.png') center center no-repeat; width:47px; height:61px; border:0px; }

div.jMyCarousel .next { background: url('../images/right.png') center center no-repeat; width:40px; height:61px; border:0px; }

div.jMyCarousel ul li { margin:0px; line-height:0px; padding:0px; }

div.jMyCarousel ul li a { display:block; }

div.jMyCarousel ul li img { display:block; border:0px; margin: 0px 5px 0px;}

#contenido_galeria { position: relative; height: 350px;}

#contenido_galeria img { float: left; width: 700px;}

#contenido_galeria p { width: 270px; position: absolute; top: 0px; left: 730px; }

Hemos utilizado los estilos sugeridos por jMyCarousel. Las imágenes grandes las vamos a posicionar de manera absoluta una sobre otra mediante jQuery (por eso ponemos #contenido-galeria con position: relative), por lo que jMyCarousel debe tener un margen superior alto para situarlo bajo las imágenes grandes. El texto lo posicionamos a la derecha de cada imagen también con position: absolute.

Y ahora vamos a ver las líneas de jQuery necesarias:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js?ver=1.4.4'></script>
<script type="text/javascript" src="js/jMyCarousel.min.js"></script>
<script type="text/javascript">
 $(document).ready(function() {
    $(".jMyCarousel").jMyCarousel({ // Script de los Thumbnails
    visible: '100%',
    eltByElt: true
    });
$(".jMyCarousel img").fadeTo(100, 0.6);
$(".jMyCarousel a img").hover(
    function(){ //mouse over
       $(this).fadeTo(400, 1);
    },
    function(){ //mouse out
      $(this).fadeTo(400, 0.6);
    });
});
</script>
<script type="text/javascript">
  $(document).ready(function(){ // Script de la Galeria
    $('#contenido_galeria div').css('position', 'absolute').not(':first').hide();
    $('#contenido_galeria div:first').addClass('aqui');
    $('.jMyCarousel a').click(function(){
        $('#contenido_galeria div.aqui').fadeOut(400);
        $('#contenido_galeria div').removeClass('aqui').filter(this.hash).fadeIn(400).addClass('aqui');
        return false;
    });
 });
</script>

$(document).ready(function() {

$(".jMyCarousel").jMyCarousel({ // Script de los Thumbnails

visible: '100%',

eltByElt: true

});

$(".jMyCarousel img").fadeTo(100, 0.6);

$(".jMyCarousel a img").hover(

function(){ //mouse over

$(this).fadeTo(400, 1);

function(){ //mouse out

$(this).fadeTo(400, 0.6);

});

</script>

$(document).ready(function(){ // Script de la Galeria

$('#contenido_galeria div').css('position', 'absolute').not(':first').hide();

$('#contenido_galeria div:first').addClass('aqui');

$('.jMyCarousel a').click(function(){

$('#contenido_galeria div.aqui').fadeOut(400);

$('#contenido_galeria div').removeClass('aqui').filter(this.hash).fadeIn(400).addClass('aqui');

return false;

});

</script>

Vamos a ver línea a línea lo que hemos hecho:
- En la línea 1 hemos cargado jQuery.
- En la línea 2 hemos cargado el script de jMyCarousel, que lo podéis bajar desde su web.
- Líneas 4 a 17 son las propias de jMyCarousel. Lo que hacen es primero aplicar una cierta opacidad a todas las imágenes pequeñas con fadeTo. Luego con hover elimina la opacidad a las imágenes sobre las que se sitúa el ratón y se la vuelve a aplicar al quitar el ratón.
- En la línea 20 comienza el script que hace funcionar las imágenes grandes de arriba. Es prácticamente igual al que usamos para el menú con pestañas del artículo anterior.
- En la línea 21 posicionamos de manera absoluta todos los div que hay dentro del div general #contenido-galería. De esta manera ponemos todos los contenidos uno sobre otro en el mismo espacio. A continuación sacamos de esa selección al primer div mediante .not(:first), es decir, ahora la selección será todos los div menos el primero. Y esa selección la ocultamos mediante .hide(). Ahora la única imagen que se verá será la primera.
- En la línea 22 añadimos la clase “aqui” al primer div, es decir, a la primera imagen (que es la que no hemos ocultado). Como veréis la imagen que está siempre visible tendrá siempre la clase “aqui”.
- En la línea 23 comenzamos una función que recogerá las instrucciones a seguir cuando se haga click sobre un enlace del div jMyCarousel (es decir, sobre cualquier imagen de las pequeñas).
- En la línea 24 hacemos desaparecer el div que tiene la clase “aqui”. Cuando cargamos la página por primera vez, esta será la primera imagen.
- En la línea 25 hacemos una serie de cosas seguidas: primero eliminamos la clase “aqui” de todos los div. Luego seleccionamos el div que se corresponde con la imagen pequeña donde hemos hecho click. ¿Cómo hacemos esto? con .filter(this.hash). Como habréis visto los “id” de las imágenes grandes se llaman igual que los enlaces (href) de las imágenes pequeñas. Por ejemplo, la primera imagen pequeña tiene un href=”#imagen1″ y el primer div es id=”imagen1″. El “hash” de un enlace nos da lo que hay desde “#” incluyendo al mismo, es decir, que el “hash” del primer enlace es “#imagen1″ lo cual para jQuery es igual a un id=”imagen1″. Si ponemos (this.hash) lo que obtenemos es el hash del enlace sobre el que se ha hecho click (this nos da el enlace sobre el que se ha hecho click de entre todos los enlaces).
A continuación mostramos ese div que hemos seleccionado y le aplicamos la clase “aqui”.

¡Y eso es todo! Espero que os haya gustado y sobre todo, que os sea de alguna utilidad.

39 comentarios en “Crear una galería de imágenes y texto sencilla con jQuery”

Aurelio en 16 marzo, 2011 en 12:06 am dijo:

Hola Juan.
He implementado esta solución en una web, y me ocurre algo muy extraño. Todo funciona OK pero a veces, no me carga el carrusel de thumbnails al abrir la página de primeras.

No tengo idea qué puede ser porque parece todo correctamente implementado. De hecho me acaba de pasar también al entrar en tu demo.

Sabes algo al respecto?

Responder ↓
- Juan Diaz-Bustamante en 16 marzo, 2011 en 7:56 am dijo:
  
  Gracias Aurelio!
  
  No conseguía que me pasara lo que decías hasta que de repente me ha pasado. Era algo relacionado con la librería de myCarousel, he hecho tres cambios. Primero cambié en $function por $(document).ready(function) en el el script de jMyCarousel, pero no parecía que ayudara. Luego he fijado el alto tanto del contenedor de las imágenes como de jMyCarousel en la hoja de estilos, y parece que ya no da problemas. Si te sigue dando problemas dímelo. He introducido ya estos cambios en el artículo como en la demo.
  
  Responder ↓
  - Oscar Camargo en 19 enero, 2012 en 2:40 pm dijo:
    
    Hola Juan, a veces al cargar el demo de tu pagina me pasa lo mismo, no carga las imagenes del jMyCarousel. Tendra algo que ver con el navegador?
    
    Responder ↓
    - Juan Díaz-Bustamante en 19 enero, 2012 en 2:52 pm dijo:
      
      Lo acabo de ver, era un ejemplo hecho con la web antigua y salía fatal! Lo he adecentado un poco y he añadido el ancho y el alto a cada imagen, con lo cual se arregla. Gracias!
      
      Responder ↓
mari en 31 marzo, 2011 en 5:21 pm dijo:

Estimado Juan, buenas tardes:

Quisiera preguntarte como puedo enlazar un contenido o noticia con una galeria de fotos como ésta. Es decir, yo quiero hacer un comentario de moda con una foto de referencia en una página, y al final de este comentario poner “Ver Galeria de imagenes” para que me aparezca una galeria como ésta que tú has hecho y que tenga texto en cada foto. Espero que me puedas ayudar porque ya llevo un montón de tiempo intentando hacerlo, tengo un modelo de galeria programada pero me falta la primera parte de la noticia pero sigo sin poder solucionarlo. Soy una aficionada y quisiera tu ayuda. Un cordial saludo

Responder ↓
- Juan Diaz-Bustamante en 31 marzo, 2011 en 5:33 pm dijo:
  
  Hola Mari,
  
  Qué estás usando para crear los contenidos? WordPress o algo similar?
  
  Responder ↓
  - Oswaldo Pacheco Morales en 19 abril, 2012 en 6:36 pm dijo:
    
    Al igual que mari yo deseo hacer lo mismo y uso WordPress por lo que se me a dificultado un poco.
    
    Responder ↓
mari en 1 abril, 2011 en 4:37 pm dijo:

Hola Juan, gracias por contestar, mira yo empecé usando el macromedia dreamweaver sin saber nada de ningún otro programa, mi marido mirando en la ayuda me enseñó como hacer las tablas meter los botones flash y varias cosas más, los dos autoditactas, pero me di cuenta que a veces la información que había metido en ese programa se cambiaba de sitio, aunque no estaba mal el resultado, pero no me convenció y me quedé ahi, porque lo que yo siempre he querido es tener la galeria de fotos con su texto incluido y no tengo ni idea hasta ahora, hice algunos con photoshop pero no era lo que esperaba; luego he empezado otra pagina con la ayuda de mi hermana que entiende un poco mas que yo porque estuvo estudiando lo de las paginas web (aunque no lo terminó), pero esta vez en html, y esta saliendo bien, normalita, pero ninguna sabemos como encajar la galeria en la noticia, tenemos una galeria que me lo hizo un amigo en lightbox2 pero no sabemos como incluirla en la noticia, he pensado que vinculando la noticia con un subtitulo que ponga “ver imagenes” hacia la dirección de la galeria podria funcionar pero no me atrevo no vaya a ser que haga algo mal, asi que si tuvieras otra idea me gustaria que me ayudaras, si puede ser. Te agradezco anticipadamente tu atención. mari

Responder ↓
- Juan Diaz-Bustamante en 5 abril, 2011 en 7:36 am dijo:
  
  Hola Mari, va a ser un poco dificil si no sabes al menos html y css. ¿No puedes encontrar algún amigo que te pueda ayudar? Yo si quieres una vez tengas colgada la página en internet te puedo orientar para solucionar cualquier error que tenga.
  
  Responder ↓
mari en 5 abril, 2011 en 11:44 pm dijo:

Gracias Juan, ya te indicaré la dirección de la página cuando lo pasemos al hosting. un abrazo y gracias de nuevo.

Responder ↓
Ismael en 28 abril, 2011 en 1:15 pm dijo:

Hola,

muy bueno el artículo, me ha sido de gran ayuda, pero quería comentarte un detalle al igual que el usuario Aurelio, y es que en la demo me acaba de ocurrir lo mismo, a veces no me carga las imagenes en pequeño, puedes ver como queda aquí http://i54.tinypic.com/1429ehd.png

Probando varias cosas porque sucede, resulta que si limpias el historial reciente del navegador y ves la galería sucede eso, pero si le vuelves a dar a actualizar funciona perfectamente…
Lo que le comentastes al usuario Aurelio , ¿están hechas esas modificaciones en la demo también?

Un saludo, y gracias.

Responder ↓
Guillermo en 18 junio, 2011 en 3:03 pm dijo:

Hola juan como estas….estoy tratndo de subir mi web….implemente el carrusel y funciona fantastico pero lo ke intento hacer es ke no gire como si fuera un circulo , es decir ke cuando llegue a la ultima imagen se detenga ke no siga con la primera imagen eso se puede???? gracias de ante mano

Responder ↓
Susa en 7 noviembre, 2011 en 4:36 pm dijo:

hola Juan
Me interesa el codigo ya que le veo utilidad para una web que estoy haciendo. El problema que tengo es que el contenido del texto necesito que tenga divs con diferentes id y clases.
Al poner el texto dentro de un div en vez de en el estilo no me muestra el texto y el sistema falla.

saludos

Responder ↓
David en 23 noviembre, 2011 en 10:44 am dijo:

Saludos Juan.

Ante todo felicitarte por estos fantásticos tutoriales, me están ayudando mucho a desarrollar mi página web.
He incluido un carrusel de imágenes en la página de entrada y me da el mismo problema que a Aurelio, incluso con las correcciones que le proponías, pero curiosamente solo me pasa en el navegador Chome. Pero lo que realmente me interesa es saber que tendría que hacer para que la imagen grande fuera pasando automaticamente de una foto a otra.

Muchas gracias por adelantado.

Responder ↓
- Juan Díaz-Bustamante en 23 noviembre, 2011 en 11:03 am dijo:
  
  Hay veces que da problemas si no especificas el ancho y el alto de cada imagen dentro de la etiqueta img
  
  Responder ↓
  - David en 1 diciembre, 2011 en 4:22 pm dijo:
    
    Muchas gracias por la respuesta y por que esta haya sido tan rapida.
    
    Efectivamente, una vez que especifiqué las dimensiones se resolvió el problema completamente.
    
    Respecto a lo de que las imagenes grandes fueran pasando automaticamente, solo he visto en la página de jMyCarousel el comando para que sea el carrusel de miniaturas el que se desplace por si mismo, así que imagino que serían necesarias modificaciones más importantes en el código.
    
    Saludos
    
    Responder ↓
Santiago en 18 marzo, 2012 en 4:10 am dijo:

Juan los scrips de java donde los tengo que poner? yo tengo mi web con HTML y CSS nose nada de java , espero tu respuesta un saludo.

Responder ↓
- Juan Díaz-Bustamante en 18 marzo, 2012 en 6:57 am dijo:
  
  Hola Santiago,
  
  Lo más aconsejable es ponerlos en el pie de la página, antes de cerrar la etiqueta body.
  
  Responder ↓
wendy sierra en 9 abril, 2012 en 9:08 am dijo:

Hola, quería preguntarte si hay posibilidad de incorporar vídeo en esta galería, la idea seria que en lugar de cargar las imágenes grandes cargara un vídeo como estos http://blueblots.com/tools/11-efficient-html5-video-players/ . y si es misión imposible podría al menos llamar de vimeo???

Muchas gracias si puedes ayudarme con este problemon!!!!

Responder ↓
Cristina en 13 junio, 2012 en 6:17 pm dijo:

Hola, gracias por el codigo, estoy utilizandolo y no se como poder hacer que se ejecute una sola vez y que no este continuamente ejecutandose.

Gracias

Responder ↓
Cristina en 14 junio, 2012 en 10:26 am dijo:

Buenos dias de nuevo, creo que no me he explicado muy bien, la idea que tengo para hacer con este codigo es que tengo dos imagenes una vacia y otra con lo que quiero mostrar, para hacer el efecto que sale una imagen de un lada a otro, pues la idea es que cuando aparezca esta ultima imagen el slide se pare en esta ultima imagen y no vuelva a cargar la primera foto, no se que parametros deberia añadir en para que haga esto, simplemente quiero como un stop o algo similar

$(function() { $("#capamovil").jMyCarousel({ visible: '100%', .......... }); });

1
2
3
4
5
6

$(function() {
    $("#capamovil").jMyCarousel({
        visible: '100%',
        ..........
    });
});

Gracias

Responder ↓
Juan Carlos Coronado en 8 julio, 2012 en 12:55 am dijo:

Hola Juan, te saluda desde Perú, estoy buscando una we igualita pero con los thumb en forma vertical, porfavor me podrías indicar que se tiene que modificar o adicionar, sería UNA GRAN AYUDA.. Muchas gracias..!!

Responder ↓
Paqui en 3 agosto, 2012 en 2:34 pm dijo:

Hola Juan, me ha encantado este tutorial, manejo Html y css y estoy comenzando con el mundillo del jquery.
He realizado el tutorial y me funcioan perfectamente en firefox, pero no puedo ver las fotos en explorer y en chrome siempre visualizo la primera foto. Una ayudita por favor. Muchas gracias.

Responder ↓
williams Miguel en 8 septiembre, 2012 en 4:49 pm dijo:

waou ..esta Pagina es impresionante para aquel que quiere aprender… ¡Felicitaciones amigos !

Responder ↓
angel en 5 diciembre, 2012 en 1:50 pm dijo:

Tengo un problema con el slider lo integre a mi sitio web pero las imagenes del carrusel superan el ancho que le doy que es de 500 px, quiero que no se vean las imagenes en miniatura fuera del carrusel y que este debajo unicamente de la imagen mas grande como puedo hacer esto, gracias espero que me ayudes.

Responder ↓

Hola buen dia, mira yo estoy desarrollando una galeria con jMyCarousel pero tengo una duda, exisitira en esta libreria la forma de que al ejecutarse automaticamente, adjunto el codigo :

$(".jMyCarousel").jMyCarousel({
     auto: true,
     speed: 1000,
     btnNext: $("#carousel_container"),
     evtStart: 'mouseout',
     evtStop: 'mouseover',
     visible: '100%'
});

$(".jMyCarousel").jMyCarousel({

auto: true,

speed: 1000,

btnNext: $("#carousel_container"),

evtStart: 'mouseout',

evtStop: 'mouseover',

visible: '100%'

});

Me muestre cada una de las imagenes sin necesidad de dar clic, por el momento lo muestro al evento hover, pero si me interesaria un poco el que se haga automatico al ir recorriendose el carrusel, soy nuevo pero si entiendo conceptos de programacion, de igual manera gracias.

Responder ↓

judit en 27 enero, 2013 en 5:03 pm dijo:

hola es posible realizar esto en wordpress???
yo simplemente necesito una galeria de imagenes con un texto explicativo a la derecha y no hay forma de hacerlo y esta opción me gusta pero no se si la puedo usar en mi pagina wordpress

Responder ↓
maria en 4 marzo, 2013 en 1:29 am dijo:

Muchas gracias por su ayuda de verdad que me ayudo mucho, de nuevo muuuuchas gracias

Responder ↓
Andres en 3 abril, 2013 en 6:00 am dijo:

Debo agradecerte mucho este post porque me permitió acabar la página de like, pero ahora lo que me pasa es algo muy curioso (y bastante horrible).

En los 3 navegadores principales (Explorer, Firefox y Chrome) me funciona perfecto la página:

http://www.onlynux.com/facelike/vestidos.php

1

http://www.onlynux.com/facelike/vestidos.php

Pero cuando corro la página como aplicación dentro de Facebook, sólo funciona bien en Firefox, en Chrome las imágenes salen todas en vertical y en Explorer lanza unos errores de Javascript y también se ve mal la página.

De repente me puedes ayudar. Si hay que pagar algo, de repente me conviene contratarte para arreglar esto.

Responder ↓
- Juan Díaz-Bustamante en 3 abril, 2013 en 8:02 am dijo:
  
  Hola Andrés,
  
  Puedo ver la página de Facebook. para verlo en funcionamiento?
  
  Responder ↓
Luisa en 8 abril, 2013 en 5:27 pm dijo:

Hola Juan:

Las imágenes pequeñas no las puedo visualizar en mi celular, en un computador si, ¿a qué se debe esto?.

la web para observar lo que hice es la siguiente: http://www.luisapacheco.cl/GRUPOW/index.html

esperando tu respuesta y agradeciendo la ayuda.

Responder ↓
- Juan Díaz-Bustamante en 8 abril, 2013 en 6:36 pm dijo:
  
  Hola Luisa,
  
  En mi iPhone sí veo las imágenes pequeñas…
  
  Responder ↓
Luisa en 8 abril, 2013 en 7:01 pm dijo:

Gracias Juan, entonces es problema del navegador que tengo instalado????

Responder ↓
- Juan Díaz-Bustamante en 8 abril, 2013 en 7:02 pm dijo:
  
  Con qué navegador lo estás viendo, para poder mirarlo?
  
  Responder ↓
Luisa en 10 abril, 2013 en 2:16 pm dijo:

Lo estoy tratando de ver en un celular Samsung GT-i5800. No sé mucho de navegadores de celulares. Disculpa no contestar antes. Otra cosa, es posible cambiar la rutina de girar las fotos pequeñas indefinidamente y sin necesidad de aplicar en las flechas de ambos lados?? En que linea puedo alterar esto? Gracias.

Responder ↓
- Juan Díaz-Bustamante en 10 abril, 2013 en 4:21 pm dijo:
  
  No sabría decirte por qué no se ven en tu móvil… Por otro lado ten en cuenta que el artículo es antiguo, no sé si habrá nuevas versiones del script usado para el carrusel…
  
  Responder ↓

Todo va pero esta parte del ejemplo donde la inserto, encabezado, body. o donde?

div.jMyCarousel  {   margin-top: 10px; height: 143px !important;}
div.jMyCarousel .prev  {   background: url(‘../images/left.png’) center center no-repeat; width:47px; height:61px; border:0px; }
div.jMyCarousel .next  {   background: url(‘../images/right.png’) center center no-repeat; width:40px; height:61px; border:0px; }
div.jMyCarousel ul li   {   margin:0px; line-height:0px; padding:0px; }
div.jMyCarousel ul li a  {   display:block; }
div.jMyCarousel ul li img   {   display:block; border:0px; margin: 0px 5px 0px;}
#contenido_galeria {   position: relative; height: 350px;}
#contenido_galeria img  {   float: left; width: 700px;}
#contenido_galeria p {   width: 270px; position: absolute; top: 0px; left: 730px; }

div.jMyCarousel { margin-top: 10px; height: 143px !important;}

div.jMyCarousel .prev { background: url(‘../images/left.png’) center center no-repeat; width:47px; height:61px; border:0px; }

div.jMyCarousel .next { background: url(‘../images/right.png’) center center no-repeat; width:40px; height:61px; border:0px; }

div.jMyCarousel ul li { margin:0px; line-height:0px; padding:0px; }

div.jMyCarousel ul li a { display:block; }

div.jMyCarousel ul li img { display:block; border:0px; margin: 0px 5px 0px;}

#contenido_galeria { position: relative; height: 350px;}

#contenido_galeria img { float: left; width: 700px;}

#contenido_galeria p { width: 270px; position: absolute; top: 0px; left: 730px; }

Responder ↓

Juan Díaz-Bustamante en 25 abril, 2013 en 8:03 am dijo:

Hola!

Esa parte debería de ir en una hoja de estilos (CSS) externa.

Responder ↓

david en 28 abril, 2013 en 7:17 am dijo:

inserte el codigo en un archivo pero no me aparecen los div me aparece todas las imagenes en lista me podrias mandar el archivo ami correo esta galeria la llevo buscado ya mucho rato seria de gran ayuda

Responder ↓