How to bind fancybox to dynamic added element?
The easiest way to bind fancybox (v1.3.x) to dynamically added elements is:
1: Upgrade to jQuery v1.7.x (if you haven't yet)
2: Set your script using jQuery API on()
+ the focusin
event.
To make it work you need to find the parent
element of your elements with class="ajaxFancyBox"
as per your code above (or the parent
of the parent
as you need it) and attach jQuery on()
to it so for example, having this html:
<div id="container">
<a class="ajaxFancyBox" href="image01.jpg">open image 01</a>
<a class="ajaxFancyBox" href="image02.jpg">open image 02</a>
</div>
.. we will apply on()
and focusin
event to the element with id="container"
(the parent
) as in the example above, like:
$("#container").on("focusin", function(){
$("a.ajaxFancyBox").fancybox({
// fancybox API options here
'padding': 0
}); // fancybox
}); // on
You can apply any fancybox option as you need. Additionally you may have different scripts for different type of content (inside the on()
method) like:
$("#container").on("focusin", function(){
$("a.ajaxFancyBox").fancybox({
// fancybox API options here
'padding': 0
}); // fancybox
$("a.iframeFancyBox").fancybox({
// fancybox API options here
'padding': 0,
'width': 640,
'height': 320,
'type': 'iframe'
}); // fancybox
}); // on
IMPORTANT: the example above won't work like that on Chrome. The workaround is to add the tabindex
attribute to all of your elements bound to fancybox like
<div id="container">
<a tabindex="1" class="ajaxFancyBox" href="image01.jpg">open image 01</a>
<a tabindex="1" class="ajaxFancyBox" href="image02.jpg">open image 02</a>
</div>
that solves the issue and will work (as far as I know) in most browsers including IE7+.
See my demo page here
UPDATE: March 07, 2012.
I was told that this method only works when you add new content to the page but not when you replace the content of the page.
The method actually works on either of the two scenarios mentioned above. Just make sure that the new replacing content is also loaded inside the container where you applied the .on()
method.
See demo
The tabindex
workaround for Chrome also applies.
fancybox 3 selector for dynamically added elements and multiple gallery
This is actually a valid question, because early versions of v3 worked like you described - items were grouped by data-fancybox
attribute. But, in the practice, that caused some confusion, because data-fancybox
attribute adds click event by default.
But, do not be afraid to create your own trigger function, it so easy. For example, you could choose to use data-group
attribute for grouping:
$(document).on('click', '[data-group]', function() {
var $this = $(this);
var group = $('[data-group="' + $this.data('group') + '"]');
$.fancybox.open(group, {
// Put your options here, for example:
thumbs : {
autoStart : true
}
}, group.index($this));
return false;
});
Demo - https://codepen.io/anon/pen/ZqBJyj?editors=1010
How to apply fancybox to dynamic Async content
If you are using fancybox v2.x then you don't need the .live()
method because fancybox v2.x supports both existing and dynamically added (ajax) elements so just bind your selector to fancybox like :
$(document).ready(function(){
$("a.event_link").fancybox({
'width' : 610,
'height' : 347,
'autoScale' : false,
'overlayOpacity' : 0.8,
'overlayColor' : '#000',
'type' : 'iframe',
'padding' : '5px',
'margin' : '5px',
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
});
On the other hand, if you are using fancybox v1.3.4, which doesn't support dynamically added elements, then check https://stackoverflow.com/a/9084293/1055987 for a further explanation, workaround and demo.
UPDATE (Nov 15, 2012) : in your specific situation (using fancybox v1.3.4), we would need to redefine the way the mouseover
event is delegated so this code :
$(document).ready(function() {
// open fancybox on mouseover
$("div#cal-wrapper").on("mouseover", "a.event_link", function() {
$("a.event_link").fancybox({
// API options here
}).trigger("click");
}); // on
}); // ready
... should do the trick. See FIDDLE
Firing Fancybox on element which is appended by jQuery
Try to call fancybox after you append "prehungHelp" element with jQuery
jQuery(document).ready(function($) {
$('.valueDoorSlabonly').append('<div id="prehungHelp"><a class="prehungHelp" href="/template/images/door-slab-only.jpg"></a></div>');
$("a.prehungHelp").fancybox();
});
how do I trigger fancybox gallery with dynamic content
Basically you would need two selectors:
1). one to load the gallery thumbnails into the page using the .load()
method, e.g. loadGallery
:
<a href="javascript:;" class="loadGallery">add dynamic gallery thumbnails</a>
2). another to bind elements to fancybox, e.g. lightbox
. All the elements within the file "gallery.htm" should have then such class
like:
<a class="lightbox" rel="gallery1" href="images/01.jpg"><img src="images/01t.jpg" alt="Sample Image" /></a>
<a class="lightbox" rel="gallery1" href="images/02.jpg"><img src="images/02t.jpg" alt="Sample Image" /></a>
<a class="lightbox" rel="gallery1" href="images/03.jpg"><img src="images/03t.jpg" alt="Sample Image" /></a>
Then bind those elements (in your main page) to fancybox with one script and load the gallery thumbnails into the page and fire the fancybox gallery within the same click
, with another like :
$(document).ready(function(){
// bind elements to fancybox
$(".lightbox").fancybox();
// load thumbnails and fire fancybox gallery
$('.loadGallery').on('click', function(e){
e.preventDefault();
var url = "gallery.htm";
$('#content').load(url, function(data, stat, req){
$(".lightbox").eq(0).trigger("click");
}); // load
$(this).remove(); // you may remove the selector loadGallery after loading the thumbnails
}); // on
}); // ready
Notice that we are using .on()
instead of .live() since the second has been deprecated. The .on()
method requires jQuery 1.7+ though.
Also notice that we used .eq(0)
to start the gallery from the first item, otherwise the gallery will start from the last element appended to the document.
UPDATE : See it working here DEMO
Jquery add image dynamically in fancybox
Somewhere in your code (you didn't show) you will have the initial call to the fancybox method. You will have to refresh the fancybox with another call to the fancybox method after you inserted new dynamic elements.
Most plug-ins offer a parameter like 'refresh' for the method, some other plug-ins require you to repeat the full initial method call. Some plug-ins offer an .init() method. You'll have to dig into the documentation of fancybox to find out.
Related Topics
How to Remove All Line Breaks from a String
Is Right Click a JavaScript Event
How to Submit a Form Using JavaScript
What Does (Function($) {})(Jquery); Mean
Check Whether a String Matches a Regex in Js
Generic Deep Diff Between Two Objects
How to Post a X-Www-Form-Urlencoded Request Using Fetch
Emberjs: How to Load Multiple Models on the Same Route
How to Escape a JSON String Containing Newline Characters Using JavaScript
Check/Uncheck Checkbox with JavaScript
Access Object Child Properties Using a Dot Notation String
JavaScript Setinterval and 'This' Solution
When to Use Vanilla JavaScript VS. Jquery
Are There Constants in JavaScript
When to Use Es6 Class Based React Components VS. Functional Es6 React Components