llamando FancyBox usando la función jQuery .click

Question

Estoy tratando de personalizar FancyBox de modo que cuando se hace clic en una de las 4 imágenes que aparecen en la página, este es el que se carga en la ventana FancyBox.

Para ello quiero usar la función jQuery .attr para pasar el src de la imagen (como una variable) en el soporte principal de la imagen.

Mi código jQuery actual es:

    jQuery(document).ready(function($) {

        $("a.group").click(function() {
            var image = $(this).attr("name");      
            $("#largeId").attr({ src: image});
            $("a.group").fancybox({
                      'frameWidth':966,
                      'frameHeight': 547,
                      'hideOnContentClick': false,
                      'overlayOpacity': 0.85,
                      'callbackOnShow': function() {
                                    $("#container ul#thumbnails li a").click(function(){
                                    var largePath = $(this).attr("title");
                                    $("#largeId").fadeOut("fast").hide();
                                    $("#largeId").attr({ src: largePath });
                                    $("#largeId").fadeIn("slow");return false;
                            });
                       $("#container ul#thumbnails li a").click(function(){
                       $('.active').removeClass('active');
                       $(this).addClass("active");
                            });
                      }
         });

    });
});

El HTML para las imágenes de la página principal es:

    <ul id="images">

<li><a id="one_image" class="group" href="#hidden" title="images/1_large.jpg"><img src="Images/1.jpg" alt="MOMA NY #1" title="MOMA NY #1" /></a></li>
<li><a class="group" href="#hidden" title="images/2_large.jpg"><img src="Images/2.jpg" alt="MOMA NY #2" title="MOMA NY #2" /></a></li>
<li><a class="group" href="#hidden" title="images/3_large.jpg"><img src="Images/3.jpg" alt="MOMA NY #3" title="MOMA NY #3" /></a></li>
<li><a class="group" href="#hidden" title="images/4_large.jpg"><img src="Images/4.jpg" alt="MOMA NY #4" title="MOMA NY #4" /></a></li>

</ul>

En la ventana FancyBox:

<div id="main_image">

<img id="largeId" src="" alt="" title="" />

</div>

------- ---------- EDITAR

para que lo sepas, esto sobre todo funciona si me deshago de la función de clic al comienzo, las funciones dentro de la llamada FancyBox todo fino trabajo.

Answer 1

Creo que es demasiado complicado conseguir.

  jQuery(document).ready(function($) {
        $("a.group").fancybox({
                'frameWidth': 300,
                'frameHeight': 300
                });

    });

Eso debería ser todo lo que necesita Javascript. Entonces usted debe mover el título y la agrupación en la etiqueta.

<ul id="images">
    <li><a class="group" rel="group" href="images/2_large.jpg" title="MOMA NY #1"><img src="Images/3.jpg" alt="MOMA NY #1"/></a></li>
    <li><a class="group" rel="group" href="images/1_large.jpg" title="MOMA NY #2" ><img src="Images/3.jpg" alt="MOMA NY #2"/></a></li>
    <li><a class="group" rel="group" href="images/3_large.jpg" title="MOMA NY #3" ><img src="Images/3.jpg" alt="MOMA NY #3"/></a></li>
    <li><a class="group" rel="group" href="images/4_large.jpg" title="MOMA NY #4" ><img src="Images/4.jpg" alt="MOMA NY #4"/></a></li>
</ul>

Es eso lo que estabas buscando?

Answer 2

Nunca he usado FancyBox antes, pero de sólo mirar a su código, creo que la línea que llama FancyBox necesita ser arreglado desde

$("a.group").fancybox({

a esto:

$(this).fancybox({

Lo sentimos, no he probado esto ... pero yo creo que era su problema.

Answer 3

Algunos pueden encontrar esto útil cuando se necesita un atributo de la relación que consigue hecho clic.

//html:
<a href="#popup" id="lnk_0">Create a new product w/ this image</a>
<div style="display:none;"><div id="popup"><h1>This is popup text.</h1></div></div>

//jquery:
$("a[href='#popup']").fancybox({
  'onStart': function(selectedArray, selectedIndex, selectedOpts)
  {
    alert(selectedOpts.orig.attr('id'));
   }
});

Answer 4

Nota: este es un hilo viejo, pero sólo para aclarar si se utiliza un clic de llamada que no debe utilizar $ (este), ya que requerirá un doble clic

.

$(function() {
   $("myelement").click(function() {
    $.fancybox();
  });
});

Answer 5

<a style="display: none;" href="#fancy-box" class="fancybox-inline" id="fancybox-trigger"></a> 



<script type="text/javascript">
    $(document).ready(function() {
        $("#fancybox-trigger").trigger('click');
    });
</script>