FancyBox grupos galería

Question

estoy usando FancyBox http://fancyapps.com/fancybox/, y mi pregunta es:

¿podría agrupar los diferentes recursos juntos? Me refiero a imágenes con video en línea o en la misma galería (o 'grupo'). Si es así, ¿alguien sabe cómo?

Aquí un ejemplo que no funciona:

<a class="fancyinline" data-fancybox-group="testgroup" href="#cont3">Test</a> 
<div class="fancyhidden" id="cont3">Test Content</div> 
<a class="fancyimage" data-fancybox-group="testgroup" href="test.jpg" > 
    <img src="test-th.jpg" alt="" /> 
</a> 

fancyinline y fancyimage no están agrupados juntos, pero necesito hacerlo. Por supuesto que necesito diferentes parámetros para líneas y imágenes ...

Gracias de antemano.

Answer 1

Para agrupar elementos de navegación dentro de la caja de fantasía, debe establecer el atributo rel en cada uno de ellos. El mismo valor rel le indicará a fancybox que todos ellos deben estar presentes en la navegación si uno se abre.

Ver este working Fiddle!

GRUPO Ejemplo

HTML

<a rel="example_group" title="Custom title" href="full_path_to_image.jpg"> 
    <img alt="" src="path_to_image_thumbs.jpg"> 
</a> 
<a rel="example_group" title="Custom title" href="full_path_to_image.jpg"> 
    <img alt="" src="path_to_image_thumbs.jpg"> 
</a> 

JQUERY

$("a[rel=example_group]").fancybox(); 

---

GRUPO Ejemplo visible, RESTO HIDDEN

HTML

<a rel="group2" title="Custom title" href="full_path_to_image.jpg"> 
    <img alt="" src="path_to_image_thumbs.jpg"> 
</a> 
<a rel="group2" title="" href="full_path_to_img.jpg" style="display:none;"></a> 
<a rel="group2" title="" href="full_path_to_img.jpg" style="display:none;"></a> 
<a rel="group2" title="" href="full_path_to_img.jpg" style="display:none;"></a> 

JQUERY

$("a[rel=group2]").fancybox(); 

Answer 2

lo hago como esto

$("#fancybox-manual-c").click(function() { 
      $.fancybox.open([ 
       { 
        href : '1_b.jpg', 
        title : 'My title' 
       }, { 
        href : '2_b.jpg', 
        title : '2nd title' 
       }, { 
        href : '3_b.jpg' 
       } 
      ], { 
       helpers : { 
        thumbs : { 
         width: 75, 
         height: 50 
        } 
       } 
      }); 
     });