appelant fancybox en utilisant la fonction .cliquez jquery

Question

Je suis en train de personnaliser fancybox de sorte que lorsque l'un des 4 images affichées sur la page est cliqué, c'est celui qui charge dans la fenêtre fancybox.

Pour ce faire, je veux utiliser la fonction jquery .attr pour passer le src d'image (comme une variable) au principal support d'image.

Mon code actuel jquery est:

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

    });
});

Le code HTML pour les principales images de la page est:

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

Pour la fenêtre Fancybox:

<div id="main_image">

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

</div>

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

juste pour que vous le savez, cela fonctionne surtout si je me débarrasser de la fonction de clic au début, les fonctions au sein de l'appel fancybox tout amende de travail.

Answer 1

Je pense que ça devient trop compliqué.

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

    });

Cela devrait être tout le javascript dont vous avez besoin. Ensuite, vous devez déplacer le titre et le regroupement sur la balise.

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

Est-ce que vous cherchez?

Answer 2

Je ne l'ai jamais utilisé fancybox avant, mais de simplement regarder votre code, je pense que la ligne qui appelle doit fancybox être fixé de

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

à ceci:

$(this).fancybox({

Désolé, je ne l'ai pas testé ... mais je crois que votre problème est.

Answer 3

Certains pourraient trouver ce utile lorsque vous avez besoin d'un attribut du lien qui obtient cliqué.

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

Note: ceci est un vieux fil, mais juste pour clarifier si vous utilisez un clic que vous appelez ne doit pas utiliser $ (cela) car il faudra un double 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>