- This topic is empty.
-
AuthorPosts
-
May 16, 2009 at 9:38 am #10131absParticipant
I am trying to make use of JQuery and Fancybox. This is how it should be used: http://fancy.klade.lv/howto
However, I can not generate many ids for “a href” and I do not want to make many instances of fancybox ready. So I want to be able to use one fancy box instance for many hyperlinks that do the same thing.
Whenever any of these links are clicked, the fancybox should popup for it. I thought I would use the onclick attribute for a “
<a href
” tag or any other tags, I can chnage this but how do I use the fancybox? I tried this but nothing came up:<a href="#not-working" onclick="fancybox(hideOnContentClick);">Not Working?</a>
Thanks for any help
May 16, 2009 at 9:51 am #10137cletusParticipantDon’t do it that way. If you can’t generate unique IDs (or simply don’t want to) you should be doing it with CSS classes instead:
<a href="image.jpg" class="fancy"><img src="image_thumbnail.jpg"></a>
with:
$(function() { $("a.fancy").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'overlayShow': false }); });
(from their usage page).
December 16, 2011 at 10:43 am #10136lukas-gottschallParticipantHTML:
<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; }
July 6, 2012 at 4:12 am #10135thegaurawParticipantIN CASE, you want to open contents of multiple divs within the page. i.e. part of the same page in fancybox, you can do it by following code:
<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>
NOTE: Make sure that you have included fancybox.js
October 17, 2012 at 1:22 am #10138ronaldParticipantThis demonstrates how to use fancybox (1.3.4) without requiring the
<a href>
link element by calling fancybox directly.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' }); });
March 12, 2014 at 3:47 am #10133silpionParticipantRonald answer gave me string #dialogContent content in fancyBox v2.1.5. Try to use:
<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>
December 5, 2018 at 10:10 am #10132munish-kumar-sharmaParticipantIn fancybox 3 it can be done by using following code.
jQuery().fancybox({ selector : 'your selector' });
August 5, 2020 at 12:32 pm #10134jf-trichardParticipant$(".btn_fancybox_messagerie").on("click", function(event) { //event.preventDefault(); var to = $(this).text(); $.fancybox.open({ type: 'iframe', src: 'http://..../form-messagerie.php?to=' + to, toolbar : false, smallBtn : true, iframe : { preload : false, scrolling: 'auto' } }); });
-
AuthorPosts
- You must be logged in to reply to this topic.