Is there a way to set a fancybox to open whenever a separate fancybox closes?
I have tried the following
$('a.linkEditClass').fancybox({
href: "#editClassPanel",
closeClick: false,
autoDimensions: true,
autoScale: false,
afterClose: function() {
$.fancybox({
href: "#classInfoPanel"
});
}
});
But this doesn't seem to be doing anything. Here is my other fancybox code for reference
$('a#linkClassInfo').fancybox({
href: "#classInfoPanel",
// maxHeight: 350,
// maxWidth: 425,
closeClick: false,
autoDimensions: false,
autoScale: false
});
They both target div's.
When you close fancybox, it takes a little while for it to clean up and complete the closing process so, opening another fancybox while the clean up process is running may trigger a js error that voids the second box from opening.
Just give it a little bit of time and it should work so
afterClose: function () {
// wait for this box to close completely before opening the next one
setTimeout(function () {
$.fancybox({
href: "#classInfoPanel"
});
}, 300);
}
See JSFIDDLE
Update: Now it popups from a specific referer =)
Here is my fancybox code:
if (document.referrer) { //if for the referrer
referrerone = /referrersite.com/;
if (referrerone.test(document.referrer)) {
$(document).ready(function(){
$(".fancybox").fancybox({
});
$(".various").fancybox({
hideOnContentClick: true,
showCloseButton: false,
transitionOut : 'none',
transitionIn : 'none',
}).trigger('click');
$('.fancybox-media').fancybox({
openEffect : 'none',
closeEffect : 'none',
helpers : {
media : {}
}
});
});
}
}
I want to add some static rules like the Popup plug-in for wordpress allows:
-Fancybox will auto close after some seconds.
-Not from an internal link: Shows the PopUp if the user did not arrive on this page via another page on your site.
You can use
document.referrer
to get the last page which your page has been loaded from
I use Bootstrap to display a popover, until there is with all this code below everything works normal.
$(".emoticons").popover({
html : true,
placement : 'bottom',
animation : true,
delay: { show: 100, hide: 500 },
content: function() {return $('.emoticonimg').html();
}
});
I only need to load the content of the page via ajax, then I changed the code because when I load the content dynamically I need to delegate events, changed the code and it looked like this:
$('body').on('click','.emoticons',function()
{
$(".emoticons").popover({
html : true,
placement : 'bottom',
animation : true,
delay: { show: 100, hide: 500 },
content: function() {return $('.emoticonimg').html();
}
});
});
Now my troubles started. The code works however when I click the first time it does not work, so it works when I click more than once on the link. What to do?
What's happening is that when you are clicking on the .emoticons and executing your popover function, it is at that moment that you are binding it to your click. That's why it doesn't work the first time, but it works afterwards. It starts listening to the click event after that.
Ideally, the solution is to run the .popover function when the new content is loaded (on your AJAX callback).
If you want to just copy paste my code and see if it works, you can do this:
$('body').on('click','.emoticons',function()
{
// Convert this element into a popover and then display it
$(this).popover({
html : true,
placement : 'bottom',
animation : true,
delay: { show: 100, hide: 500 },
content: function() {
return $('.emoticonimg').html();
}
}).popover('toggle');
});
But, I would NOT recommend this code specifically, since you are re-initializing your popover every time you click on it.
It's better and more clear if you bind all popovers after your AJAX request is done:
$.ajax( "BlaBlaBla.php" )
.done(function() {
// Convert all emoticons to popovers
$(".emoticons").popover({
html : true,
placement : 'bottom',
animation : true,
delay: { show: 100, hide: 500 },
content: function() {
return $('.emoticonimg').html();
}
});
});
It doesn't work the first time because the first click if firing off the body onclick handler which binds your popover.
Try something like this in your $(document).ready() function.
$(".emoticons").click(function(){
$(this).popover({
html : true,
placement : 'bottom',
animation : true,
delay: { show: 100, hide: 500 },
content: function() {return $('.emoticonimg').html();
}
});
});
what I'm trying to do is to call fancybox gallery which has and iframe and couple images, by clicking a non related div. Everything works fine with image group, but when i try to add an iframe it shows "The requested content cannot be loaded.
Please try again later."
Below is html and javascript:
<div id="gallery_1">Gallery</div>
<script>
$('#gallery_1').click(function (){
$('#gallery_1').addClass('cur_gal');
$.fancybox([
'iframe.html',
'2.jpg',
'1.jpg'
],
{ 'padding' : 0,
'transitionIn' : 'fade',
'transitionOut' : 'fade',
'type' : 'image',
'changeFade' : 1,
'loop' :false,
afterClose: function() {
$('#gallery_1').removeClass('cur_gal');
}
});
});
</script>
I tried to remove 'type' : 'image' , but then the iframe doesn't show.
I've also tried to change type to iframe, but then the images are messed up. The sizes are incorrect, and the scroll bar appears.
So maybe someone has any ideas how to display iframe and images correctly?
You need to specify the type of content individually but you are doing it globally so try modifying your script this way
$(document).ready(function () {
$('#gallery_1').click(function () {
$('#gallery_1').addClass('cur_gal');
$.fancybox([{
href: "iframe.html",
type: "iframe"
}, {
href: "image2.jpg",
type: "image"
}, {
href: "image1.jpg",
type: "image"
}], {
padding: 0,
// 'transitionIn': 'fade', // for v1.3.4 not compatible
// 'transitionOut': 'fade', // for v1.3.4 not compatible
// 'type' : 'image', // sets type of content globally
changeFade: 1,
loop: false,
afterClose: function () {
$('#gallery_1').removeClass('cur_gal');
}
});
});
}); // ready
See JSFIDDLE
EDIT : you can also change this lines
$('#gallery_1').click(function () {
$('#gallery_1').addClass('cur_gal');
into this
$('#gallery_1').click(function () {
$(this).addClass('cur_gal');
I am trying to open a fancybox from a function I have - in short my HTML code looks like this;
<a href="#modalMine" onclick="myfunction(this); return false;">
click
</a>
and a part of my function looks like this;
function myfunction(me) {
$(me).fancybox({
'autoScale': true,
'transitionIn': 'elastic',
'transitionOut': 'elastic',
'speedIn': 500,
'speedOut': 300,
'autoDimensions': true,
'centerOnScroll': true,
});
}
The above works in IE but not in FireFox or Chrome - any idea how I can fix this? I know that one why is to trigger another link, but I hope another solution is possible.
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'
});
}
This creates the box using "contentdiv" and opens it.
Since you're using jQuery, stop binding event handlers in your HTML, and start writing unobtrusive JavaScript.
$(document).ready(function ()
{
function myfunction(me)
{
$(me).fancybox({
'autoScale': true,
'transitionIn': 'elastic',
'transitionOut': 'elastic',
'speedIn': 500,
'speedOut': 300,
'autoDimensions': true,
'centerOnScroll': true // remove the trailing comma!!
}).click();
// fire the click event after initializing fancybox on this element
// this should open the fancybox
}
// use .one() so that the handler is executed at most once per element
$('a[href=#modalMine]').one('click', function ()
{
myfunction(this);
return false;
});
});
However, I don't particularly see a reason for setting up the fancybox on click. You could just do this instead:
$(document).ready(function ()
{
function myfunction()
{
// note the use of "this" rather than a function argument
$(this).fancybox({
'autoScale': true,
'transitionIn': 'elastic',
'transitionOut': 'elastic',
'speedIn': 500,
'speedOut': 300,
'autoDimensions': true,
'centerOnScroll': true
});
}
$('a[href=#modalMine]').each(myfunction);
});
Basic demo (no images) →
What you need is:
$.fancybox.open({ .... });
See the "API methods" section at the bottom of here:
http://fancyapps.com/fancybox/
You don't have to add you own click event handler at all. Just initialize the element with fancybox:
$(function() {
$('a[href="#modalMine"]').fancybox({
'autoScale': true,
'transitionIn': 'elastic',
'transitionOut': 'elastic',
'speedIn': 500,
'speedOut': 300,
'autoDimensions': true,
'centerOnScroll': true // as MattBall already said, remove the comma
});
});
Done. Fancybox already binds a click handler that opens the box. Have a look at the HowTo section.
Later if you want to open the box programmatically, raise the click event on that element:
$('a[href="#modalMine"]').click();
You do not have to trigger a click event, you can do it with fancybox type as ajax.
$.fancybox.open({
href: "http://........",
type: 'ajax'
});
Make argument object extends from <a> ,
and use open function of fancybox in click event via delegate.
var paramsFancy={
'autoScale': true,
'transitionIn': 'elastic',
'transitionOut': 'elastic',
'speedIn': 500,
'speedOut': 300,
'autoDimensions': true,
'centerOnScroll': true,
'href' : '#contentdiv'
};
$(document).delegate('a[href=#modalMine]','click',function(){
/*Now you can call your function ,
you can change fields of paramsFancy via this function */
myfunction(this);
paramsFancy.href=$(this).attr('href');
$.fancybox.open(paramsFancy);
});
The answers seems a bit over complicated. I hope I didn't misunderstand the question.
If you simply want to open a fancy box from a click to an "A" tag. Just set your html to
<a id="my_fancybox" href="#contentdiv">click me</a>
The contents of your box will be inside of a div with id "contentdiv" and in your javascript you can initialize fancybox like this:
$('#my_fancybox').fancybox({
'autoScale': true,
'transitionIn': 'elastic',
'transitionOut': 'elastic',
'speedIn': 500,
'speedOut': 300,
'autoDimensions': true,
'centerOnScroll': true,
});
This will show a fancybox containing "contentdiv" when your anchor tag is clicked.
Here is working code as per the author's Tips & Tricks blog post, put it in document ready:
$("#mybutton").click(function(){
$(".fancybox").trigger('click');
})
This triggers the smaller version of the currently displayed image or content, as if you had clicked on it manually. It avoids initializing the Fancybox again, but instead keeps the parameters you initialized it with on document ready. If you need to do something different when opening the box with a separate button compared to clicking on the box, you will need the parameters, but for many, this will be what they were looking for.
function myfunction(){
$('.classname').fancybox().trigger('click');
}
It works for me..
...
<div class="img_file" style="background-image: url('/upload/test/14120330.jpg')" data-img="/upload/test/14120330.jpg"></div>
<div class="img_file" style="background-image: url('/upload/test/14120330.jpg')" data-img="/upload/test/14120330.jpg"></div>
...
if($(".img_file[data-img]").length) {
var imgs_slider_img = [];
$(".img_file[data-img]").each(function(i) {
imgs_slider_img.push({
href:$(this).attr('data-img')
});
$(this).attr('data-index-img', i);
}).on("click", function(e) {
e.preventDefault();
$.fancybox.open(imgs_slider_img, {
index: $(this).attr('data-index-img'),
padding: 0,
margin: 0,
prevEffect: 'elastic',
nextEffect: 'elastic',
maxWidth: '90%',
maxHeight: '90%',
autoWidth: true,
autoHeight: true
});
});
}
...
if jQuery.fancybox.open is not available (on fancybox 1.3.4) you may need to use semafor to get around the recursion problem:
click me
<script>
var clickSemafor = false;
myfunction(el)
{
if (!clickSemafor) {
clickSemafor = true;
return false; // do nothing here when in recursion
}
var e = jQuery(el);
e.fancybox({
type: 'iframe',
href: el.href
});
e.click(); // you could also use e.trigger('click');
return false; // prevent default
}
</script>