fancybox - w3toppers.com

Proper way to use JQuery when using MasterPages in ASP.NET?

You would declare your main jQuery scripts within the master page, as you would normally: <head runat=”server”> <link href=”https://stackoverflow.com/Content/Interlude.css” rel=”Stylesheet” type=”text/css” /> <script type=”text/javascript” src=”/Scripts/jquery-1.3.2.min.js”></script> <asp:ContentPlaceHolder ID=”head” runat=”server”> </asp:ContentPlaceHolder> </head> And then any page specific JS files could be loaded within the Content controls that reference the Head ContentPlaceholder. However, a better option would be … Read more

Open fancybox from function

If you’d like to simply open a fancybox when a javascript function is called. Perhaps in your code flow and not as a result of a click. Here’s how you do it: function openFancybox() { $.fancybox({ ‘autoScale’: true, ‘transitionIn’: ‘elastic’, ‘transitionOut’: ‘elastic’, ‘speedIn’: 500, ‘speedOut’: 300, ‘autoDimensions’: true, ‘centerOnScroll’: true, ‘href’ : ‘#contentdiv’ }); } … Read more

Open YouTube video in Fancybox jQuery

THIS IS BROKEN, SEE EDIT <script type=”text/javascript”> $(“a.more”).fancybox({ ‘titleShow’ : false, ‘transitionIn’ : ‘elastic’, ‘transitionOut’ : ‘elastic’, ‘href’ : this.href.replace(new RegExp(“watch\\?v=”, “i”), ‘v/’), ‘type’ : ‘swf’, ‘swf’ : {‘wmode’:’transparent’,’allowfullscreen’:’true’} }); </script> This way if the user javascript is enabled it opens a fancybox with the youtube embed video, if javascript is disabled it opens the … Read more

Fancybox (jQuery) – Passing information from parent to iframe and iframe back to parent

Your question can be dived in two parts : How to pass data (stored in variables) from parent page to an iframe (opened in fancybox) How to manipulate data (and/or store such data in variables) inside the iframe and then pass those values to the parent page when fancybox is closed. 1). Pass data from … Read more

Fancybox – ASP.NET button not working

You need to change this (somewhere around line 719 of jquery.fancybox-1.3.1.js): $(‘body’).append( tmp = $(‘<div id=”fancybox-tmp”></div>’), loading = $(‘<div id=”fancybox-loading”><div></div></div>’), overlay = $(‘<div id=”fancybox-overlay”></div>’), wrap = $(‘<div id=”fancybox-wrap”></div>’) ); to $(‘form’).append( tmp = $(‘<div id=”fancybox-tmp”></div>’), loading = $(‘<div id=”fancybox-loading”><div></div></div>’), overlay = $(‘<div id=”fancybox-overlay”></div>’), wrap = $(‘<div id=”fancybox-wrap”></div>’) );

How do I make fancybox href dynamic?

Without each() or click() simply add the beforeLoad callback to your script like this $(“.fancybox”).fancybox({ autoScale: false, // href : $(‘.fancybox’).attr(‘id’), // don’t need this type: ‘iframe’, padding: 0, closeClick: false, // other options beforeLoad: function () { var url = $(this.element).attr(“id”); this.href = url } }); // fancybox NOTE: this is for fancybox v2.0.6+ … Read more

Can Fancybox be responsive only horizontally for tall content?

Try combining the fitToView and maxWidth API options like : $(‘.thumbs_small’).fancybox({ openEffect: ‘elastic’, closeEffect: ‘elastic’, prevEffect: ‘fade’, nextEffect: ‘fade’, fitToView: false, // images won’t be scaled to fit to browser’s height maxWidth: “90%” // images won’t exceed the browser’s width }); Check JSFIDDLE

Fancybox2 – different content for tooltip and image title, both from title attribute?

What I would do is to set the titles to appear in Fancybox in a hidden DIV so my tooltip will show a different content from the title in Fancybox: UPDATE : edited to match your content sample Your HTML: <a class=”fancybox” rel=”works” title=”Sculpture1″ href=”https://stackoverflow.com/questions/8418721/images/Sculpture1_large_res.jpg”><img alt=”Sculpture1 Height:1232mm” src=”images/thumbs/Sculpture1_thumb.jpg” class=”thumb”></a> <a class=”fancybox” rel=”works” title=”Sculpture2″ href=”images/Sculpture2_large_res.jpg”><img alt=”Sculpture2 … Read more

Fancybox: iframe doesn’t work

I had success changing the class on the anchor to fancybox fancybox.iframe. <a class=”fancybox fancybox.iframe” href=”http://www.google.be/”>This goes to iframe</a> <script type=”text/javascript”> $(document).ready(function() { $(‘a.fancybox’).fancybox(); }); </script> No idea why this is the case but it worked for me. Edit: also need to update to a recent version of jQuery

How do you resize Fancybox at runtime?

If you are using version 1.3 of Fancybox, there is a resize method: $.fancybox.resize(); For version 2.x of Fancybox the same would be done with: $.fancybox.update() Which will resize the active fancybox based on the size of the content inside it.