chiamando fancybox utilizzando la funzione jQuery .Click

Question

Sto cercando di personalizzare fancybox in modo che quando una delle 4 immagini visualizzate sulla pagina viene cliccato, questo è quello che carica nella finestra fancybox.

Per fare questo voglio usare il jquery .attr funzione per passare lo src dell'immagine (come variabile) al titolare immagine principale.

Il mio codice jQuery corrente è:

    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");
                            });
                      }
         });

    });
});

Il codice HTML per le immagini della pagina principale è:

    <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>

Per la finestra Fancybox:

<div id="main_image">

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

</div>

------- ---------- EDIT

solo così sai, questo funziona per lo più se mi libero della funzione scatto alla partenza, le funzioni all'interno della chiamata fancybox tutti bene il lavoro.

Answer 1

Credo che la sua sempre troppo complicato.

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

    });

Questo dovrebbe essere tutto il javascript che vi serve. Poi si dovrebbe spostare il titolo e il raggruppamento sul tag.

<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>

E 'questo quello che cercavi?

Answer 2

Non ho mai usato fancybox prima, ma da solo guardando il codice, Penso che la linea che chiama fancybox deve essere risolto da

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

a questo:

$(this).fancybox({

Mi dispiace, non ho ancora testato questo ... ma credo che era il problema.

Answer 3

Alcuni potrebbero trovare questo utile quando è necessario un attributo del link che viene cliccato.

//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: questo è un vecchio thread, ma solo per chiarire se si utilizza un clic chiamata non si dovrebbe usare $ (questo), perché sarà necessario un doppio click

.

$(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>