jquery - simple - galeria responsive

fancybox, haz presentaciones con imágenes y divs que no son la galería

Question

Estoy usando el complemento jQuery fancybox para crear una galería de imágenes. El usuario hace clic en una imagen y luego aparece un modal para navegar por todas las imágenes. Hasta este punto, todo se hace con el siguiente código.

Pero el cambio que quiero hacer es en la presentación de diapositivas modal. La presentación de diapositivas debe mostrar la imagen particular que se hizo clic en más otras imágenes que no están en la galería más div extra. Esas imágenes y divs adicionales pueden permanecer en cualquier parte del código.

HTML:

<a class="fancybox" href="img/a_small.jpg" data-fancybox-group="gallery" title="Project">
<img src="img/a_big.jpg" alt="image project"/>
</a>
<a class="fancybox" href="img/b_small.jpg" data-fancybox-group="gallery" title="Project">
<img src="img/b_big.jpg" alt="image project"/>
</a>
<a class="fancybox" href="img/c_small.jpg" data-fancybox-group="gallery" title="Project">
<img src="img/c_big.jpg" alt="image project"/>
</a>

JS:

$(''.fancybox'').fancybox({
padding: 0,
openEffect : ''elastic'',
openSpeed : 150,
closeEffect : ''elastic'',
closeSpeed : 150,
closeClick : true,
''autoSize'': false,
''autoWidth'' : 600,
''autoScale'' : false,
''transitionIn'' : ''none'',
''transitionOut'' : ''none'',
''type'' : ''swf'',
''autoCenter '' :true,
''aspectRatio'':true
});

1) ¿Cómo lograr eso?

2) Si Fancybox no es una buena opción, ¿hay alguna otra secuencia de comandos que ayudará a lograr el propósito de una manera de diseño receptivo?

EDITAR: una demostración en línea está aquí .

Answer 1

Estaba mirando y veo que si agrega data-fancybox-group a otros elementos que desea agregar a la galería, fancybox los obtiene y funciona como se esperaba.

Comprueba este jsFiddle como ejemplo (las imágenes no se cargan en jsFiddle, pero si copias el código en un archivo puedes ver cómo funciona).

PD. Tienes algunos atributos incorrectos en tus imágenes. Busque width11="" y height11="" .