Develop Reference

Open fancybox iframe when click on a div

Using fancybox2 and try to open YouTube video when click on div
<div class="vid" data-href="http://www.youtube.com/embed/gGFXXWsCiVo?autoplay=1">This DIV should open fancybox</div>
$(".vid").fancybox({
type: "iframe",
onStart: function (el, index) {
var thisElement = $(el[index]);
$.extend(this, {
href: thisElement.data("href")
});
}
});
But its dosent work, please help.
jsfiddle

Well, I don't know why you are complicating this fancybox thing like this,
Why do you need your 'thisElement' var? You should give us some more details to be sure we really understand what you need... I give you here some tips to open fancybox.. :
when you use fancybox, just start it like this :
//event function(){
$('.vid').click(function(){
$.fancybox({
//settings
'type' : 'iframe',
'width' : 640,
'height' : 480,
//You don't need your thisElement var, see below :
'href' : $(this).data('href')
});
});
and put your settings into it,
here is a starting point for you, now just customize it to make it better for your needs :
http://jsfiddle.net/rtp7dntc/9/
Hope it helps!

To make things much simpler you could use the special data-fancybox attributes on your div like
<div class="vid" data-fancybox-href="http://www.youtube.com/embed/gGFXXWsCiVo?autoplay=1" data-fancybox-type="iframe">This DIV should open fancybox</div>
Then use a script as simple as this
jQuery(document).ready(function ($) {
$('.vid').fancybox();
}); // ready
See JSFIDDLE
NOTE:
The disadvantage of triggering fancybox programmatically as in the accepted answer is that it will only trigger a single fancybox but won't work for a gallery, while you can bind a fancybox gallery of several divs using the data-fancybox-group attribute.

Multiple instances of jQuery plugin (Magnific popup)

I've hit a bit of a wall with this one. My jQuery knowledge outside of just implementation is pretty poor.
I'm building the Magnific Popup (http://dimsemenov.com/plugins/magnific-popup/) jQuery plugin into my WordPress theme as a popup gallery. I've got it all wired up and working. It grabs images dynamically from the backend using custom fields. I can also get multiple instances working on the same page. HOWEVER, when scrolling through images in one popup gallery, it wont end at the end of the first gallery but rather, it will move on into the images in the second gallery. See example: http://www.oftenvisual.com/reset/galleries/.
Unfortunately I can't post the code here as it's too long, but hopefully the demo page helps. Because the galleries are generated dynamically and the client using the backend wont have the knowledge to add container with different classes, I need some way to also dynamically separate out the galleries. Any idea GREATLY appreciated!
Script calling the plugin
// Magnific
$(document).ready(function() {
$('.popup-gallery').magnificPopup({
delegate: 'a',
type: 'image',
tLoading: 'Loading image #%curr%...',
mainClass: 'mfp-img-mobile',
gallery: {
enabled: true,
navigateByImgClick: true,
preload: [0,1] // Will preload 0 - before current, and 1 after the current image
},
image: {
tError: 'The image #%curr% could not be loaded.',
titleSrc: function(item) {
return item.el.attr('title');
}
}
});
});

try to set different id_s on your .popup-gallery div's and then do
$('#popup-gallery1').magnificPopup....
$('#popup-gallery2').magnificPopup....

You may use jQuery contains selector to point "a" tag with specific class name - a[class*='popup-gallery-']. If you have different IDs for you pop-ups it just work as a charm. It just search for all "a" where class contains "popup-gallery-".
And if it matches, it fires up the Magnific Pop Up etc.
jQuery:
$(document).ready(function(){
$("a[class*='popup-gallery-']").magnificPopup({
//your settings goes here
});
});
HTML:
# first div
<a class="popup-gallery-1" href="#popup-1">First popup</a>
<div id="popup-1"> Your content here </div>
# second div
<a class="popup-gallery-2" href="#popup-2">Second popup</a>
<div id="popup-2"> Your content here </div>

You can simply use jquery's each with the same class, for example:
$('.popup-gallery').each(function() {
$(this).magnificPopup({
delegate: 'a', // child items selector, by clicking on it popup will open
type: 'image', // override with class 'mfp-iframe' on delegate or any other supported type
gallery: {enabled:true },
});
});
And now if you have multiple .popup-gallery divs, they all work separately.

jQuery FancyBox YouTube videos not working

I have a situation whereby I cannot modify the HTML code for the anchor tag, with the exception of the 'href' attribute. So adding a class to the anchor tag is not an option.
The HTML markup is as follows:
To distinguish between this and other links, I have added a selector based on the 'href' to the jQuery code.
The code is as follows:
(function ($) {
$('a[href*="youtube"]').fancybox({
'padding' : 0,
'type' : 'swf',
'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
'swf' : { 'wmode' : 'transparent', 'allowfullscreen' : 'true' }
});
e.preventDefault();
})(jQuery);
This does not seem to be working at all. Can anyone tell me where I am going wrong? I am using Drupal, hence why I have added the part at the top to enable to '$'.
I cannot see any errors in the console, the page simply navigates straight to the YouTube page with no JavaScript intervention.

adding a class to the anchor tag is not an option
That is not necessarily true since you can always add the class via jQuery like
$('a[href*="youtube"]').addClass("fancybox")
Anyway, personally I don't like to use the swf mode for youtube videos any more but iframe mode; that makes them easier to handle and cross-platform compatible (including iOS)
What I would do is, using the .each() method :
convert every single href to embed format using javascript .replace()
bind each anchor to fancybox
set the new converted href using the fancybox href API option
This is the code that works for both fancybox v1.3.4 or v2.x :
(function ($) {
$(document).ready(function(){
$('a[href*=youtube]').each(function () {
// convert youtube swf href to embed for iframe
var thisHref = this.href
.replace(new RegExp("watch\\?v=", "i"), 'embed/')
.replace(new RegExp("&", "i"), '?');
// bind fancybox to each anchor
$(this).fancybox({
"padding" : 0,
"type" : "iframe",
// add trailing parameters to href (wmode)
"href" : thisHref + "&wmode=opaque"
}); // fancybox
}); // each
}); // ready
})(jQuery);
Notice that I added wmode=opaque, otherwise the close button will be behind the youtube video.
See JSFIDDLE with version 1.3.4 ... or JSFIDDLE with v2.1.4

You have missed the doc ready handler inside the closure and there is no need for the e.preventDefault():
(function ($) {
$(function(){
$('a[href*="youtube"]').fancybox({
'padding' : 0,
'type' : 'swf',
'href' : this.href.replace(/watch?v=/gi, 'v/'),
'swf' : { 'wmode' : 'transparent', 'allowfullscreen' : 'true' }
});
});
})(jQuery);

Load new content in Fancybox on Fancybox onClosed event

I'm stuck with a problem with Fancybox windows. I use fancybox to display the content of a hidden div on my page (".popup" fancybox below). In that content, there is a link to a new fancybox content called #exemple. When I click on the link in the first fancybox, it loads the second fancybox content (iframe - this works fine). But I'd like to come back to the first fancybox when the user hits the close button of the second fancybox.
I tried with "onClosed" event but it doesn't work ...
Is there a way to do that?
Thank you in advance for your help!
Here is the code I use :
$("#exemple").fancybox({
'width' : '100%',
'height' : '100%',
'titleShow' : true,
'titlePosition' : 'over',
'titleFormat' : formatTitle,
'autoScale' : false,
'centerOnScroll' : true,
'type' : 'iframe',
'onClosed' : function() {
alert('test');
$(".popup").trigger('click');
}
});
$(".popup").fancybox({
'autoScale' : false,
'centerOnScroll' : true
});
// and here is the HTML code to trigger the hidden div:
<a style="font-weight: bold;" href=#data class=popup>our data</a>
//and the HTML code of the link inside the hidden div that gets displayed in the fancybox:
<a id=exemple title="xxx" href=xxx.php?id=xxx>link</a>

I was working with same thing and onClosed was not working. After lots of research I figured out that there is some kind of versioning problem and onClosed works in older versions of fancy box. The other approach, which worked for me, is as following using beforeClose instead of onClosed.
‘beforeClose’: function() { alert(‘test’) },
This might be helpful for some of the readers.

It would help if you had a jsFiddle to work from, but first try wrapping the onClosed function code in a setTimeout. A zero time should be sufficient:
'onClosed' : function() {
setTimeout(function(){
$(".popup").trigger('click');
}, 0);
}

'onClosed'=> 'js:function() { alert("test") }',
note : we need to put "js:"
i m calling fancybox automatically (using extension)
It is Working fine for me

Opening Shadowbox from javascript function

I'm trying to open Shadowbox from within a radio button onclick event on a asp.net web form without success. I was initially opening it using a button click which worked fine, but now need to make sure it happens when the radio button option is selected. I then tried to click the button in javascript (button.click()), but that only worked in IE and Newer versions of firefox. So I have opted to use Shadowbox.open, but it is causing some issues. Here is my code:
if (yes.checked == true)
{
var url = 'http://localhost:52963/items.aspx';
Shadowbox.open( { content: url,
type: "iframe",
title: "sbTitle ",
options: { initialHeight:350,
initialWidth:450,
loadingImage:"loading.gif",
handleUnsupported: 'link'
}
});
}
This just seems to bring up the overlay but doesn't open the web page inside it. Anyone know where I'm going wrong?

Apparently I needed to add a player as well as a type. So the amended code is this:
Shadowbox.open( { content: url,
type: "iframe",
player: "iframe",
title: "sbTitle ",
options: { initialHeight:350,
initialWidth:450,
loadingImage:"loading.gif",
handleUnsupported: 'link'
}
});

I had a lot of trouble with this, I tried firing click using .trigger('click') from jquery , but that didnt work in chrome (worked in firefox)
Turns out the answer is pretty simple, similar to e-on answer, but dialed down.
Your images are in a normal shadowbox gallery
<div class="gallery">
<a href="/img1.jpg" rel="shadowbox[gallery1]" >
<img id="Image0" src="/img1.jpg" />
</a>
<a href="/img2.jpg" rel="shadowbox[gallery1]" >
<img id="Image1" src="/img2.jpg" />
</a>
</div>
Then your clickable link
Click to view all images
I wired up the clickable link via jquery in a document.ready call
$('.galleryLauncher').click(function () {
//gallery to launch
var id = $(this).attr('gallery');
//get the first item out of the cache
var content = Shadowbox.cache[1].content;
//default options object
var options = {};
//now we can open it
Shadowbox.open({
content: content,
player: "img",
gallery: id,
options: options
});
return false;
});