Wie kann ich fancybox mit onclick benutzen?

Question

Ich versuche, JQuery und Fancybox zu verwenden. So sollte es verwendet werden: http://fancy.klade.lv/howto

Allerdings kann ich nicht viele IDs für "a href" generieren und ich möchte nicht viele Instanzen von fancybox bereit machen. Ich möchte also eine ausgefallene Box-Instanz für viele Hyperlinks verwenden können, die dasselbe tun.

Immer wenn einer dieser Links angeklickt wird, sollte die Fancybox dafür geöffnet werden. Ich dachte, ich würde das onclick-Attribut für ein "<a href" -Tag oder andere Tags verwenden, ich kann dies tun, aber wie verwende ich die Fancybox? Ich versuchte dies aber nichts kam:

<a href="#not-working" onclick="fancybox(hideOnContentClick);">Not Working?</a> 

Vielen Dank für jede Hilfe

Answer 1

Sie es nicht auf diese Weise tun. Wenn Sie nicht eindeutige IDs generieren können (oder wollen einfach nicht zu) sollten Sie stattdessen tun es mit CSS-Klassen sein:

<a href="image.jpg" class="fancy"><img src="image_thumbnail.jpg"></a> 

mit:

$(function() { 
    $("a.fancy").fancybox({ 
    'zoomSpeedIn': 300, 
    'zoomSpeedOut': 300, 
    'overlayShow': false 
    }); 
}); 

(aus ihrer Nutzung Seite).

Answer 2

HTML:

<a href="http://domain.com/bigimage.jpg" onclick="return fancybox(this);><img scr="http://domain.com/smallimage.jpg" /></a> 

JSCode:

function fancybox(elem) { 
elem = $(elem); 
if (!elem.data("fancybox")) { 
    elem.data("fancybox", true); 
    elem.fancybox({ 
     'overlayColor' : '#000', 
     'overlayOpacity' : 0.5 
    }); 
    elem.fancybox().trigger('click'); 
} 
return false; 
} 

Answer 3

IN CASE, möchten Sie Inhalt mehrerer divs innerhalb der Seite zu öffnen. dh ein Teil der gleichen Seite in fancybox, können Sie es durch folgenden Code tun:

<a href="#show-in-fancy1" class="popup">open_fancy1</a> 
<a href="#show-in-fancy2" class="popup">open_fancy2</a> 
<div style="display:none"> 
    <div id="show-in-fancy1"> 
    this content is shown in fancybox. 
    </div> 
    <div id="show-in-fancy2"> 
    this content is shown in fancybox. 
    </div> 
</div> 
<script> 
    $(document).ready(function(){ 
    $('.popup').fancybox({ 
      'zoomSpeedIn': 300, 
      'zoomSpeedOut': 300, 
      'overlayShow': false 
     }); 
    }); 
</script> 

HINWEIS: Stellen Sie sicher, dass Sie fancybox.js aufgenommen haben

Answer 4

Dies zeigt, wie fancybox verwenden (1.3.4) ohne das Verbindungselement <a href> zu benötigen, indem fancybox direkt aufgerufen wird.

Inline:

<div id="menuitem" class="menuitems"></div> 

<div style="display:none;"> 
    <div id="dialogContent"> 
    </div> 
</div> 

$('.menuitems').click(function() { 
    $.fancybox({ 
     type: 'inline', 
     content: '#dialogContent' 
    }); 
}); 

Iframe:

<div id="menuitem" class="menuitems"></div> 

$('.menuitems').click(function() { 
    $.fancybox({ 
     type: 'iframe', 
     href: 'http://www.abc123.com' 
    }); 
}); 

Answer 5

Ronald Antwort gab mir String #dialogContent Inhalt in fancybox v2.1.5. Versuchen Sie zu verwenden:

<div id="item"></div> 

<div style="display:none"><div id="data">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></div> 

<script type="text/javascript"> 
jQuery(document).ready(function() { 
jQuery("#item").fancybox({ 
     type: 'inline', 
     content: jQuery('#data').html() 
    }); 

}); 
</script>