I am trying to get the id of the clicked/shown element in fancybox. I have tried both "this.id" and "this.attr("id")" - but none of them works.
$("a.lightbox_image").fancybox({
'transitionIn': 'elastic',
'transitionOut': 'elastic',
'speedIn': 600,
'speedOut': 200,
'content': 'Id of element clicked'+this.attr("id")
});
Any suggestions?
You can do it like this:
$("a.lightbox_image").each(function() {
$(this).fancybox({
'transitionIn': 'elastic',
'transitionOut': 'elastic',
'speedIn': 600,
'speedOut': 200,
'content': 'Id of element clicked' + this.id
});
});
this refers probably to window where you're binding currently (or document if in the ready event, can't be sure without seeing more code). For this to be the <a> like you want, you should use a .each() loop and assign it there...inside the .each() closure, this refers to the anchor.
I had problems using Nick Craver's solution together with "onClosed" function and after some tests I found working solution:
$("a.lightbox_image").each(function() {
var tthis = this;
$(this).fancybox({
'transitionIn': 'elastic',
'transitionOut': 'elastic',
'speedIn': 600,
'speedOut': 200,
onClosed : function() {
alert(this.id);
}
});
});
This, in my case, was used to reload row with data after closing fancybox window where that data was edited.
This seems to work for me :)
<div class="thumbnail">
<a class="fancybox" title="MyTitle" rel="group" href="#" id="fiid_4">
<img src="/dir/image4.png" alt="x" style="width:200px;height:160px;" />
</a>
<a class="fancybox" title="MyTitle" rel="group" href="#" id="fiid_5">
<img src="/dir/image5.png" alt="x" style="width:200px;height:160px;" />
</a>
<a class="fancybox" title="MyTitle" rel="group" href="#" id="fiid_6">
<img src="/dir/image6.png" alt="x" style="width:200px;height:160px;" />
</a>
</div>
The javascript:
$(document).ready(function() {
$(".fancybox").attr('rel', 'gallery').fancybox({
loop : false,
afterLoad: function(current, previous) {
console.log(this.element[0].id)
console.info( 'Current: ' + current.href );
console.info( 'Previous: ' + (previous ? previous.href : '-') );
if (previous) {
console.info( 'Navigating: ' + (current.index > previous.index ? 'right' : 'left') );
//When navigating, we want to add the next set of images! :)
new_images = getNextFancyImages(current.index > previous.index ? 'right' : 'left')
}
}
});
});
In firebug, you can see the logging :)
The answers which suggest using an each loop are correct, but if you're using any of the callbacks (beforeShow, beforeLoad, onUpdate etc) there's one important detail to understand.
In the context of your each loop, this refers to the element which will get clicked.
But as soon as you're inside the fancybox callback, this refers to the fancybox object.
The trick is to store the elements this into another variable, e.g that.
Then refer to that in your callback.
$('.fancybox').each(function() {
var that = this;
$(this).fancybox({
beforeLoad: function() {
var id = $(that).attr('id');
console.log("id of element clicked is: "+id)
}
});
});
The each(function() solution breaks the gallery (in other words, no more Next and Prev button).
A solution that seems to work and saves the gallery is to assign a function to the click event on the element before fancyBox is called and save the id to a unique div.
For instance:
$(document).ready(function() {
$(".fancybox").click(function() { $("#<unique_div>").data("clickedid", this.id); }).fancybox({
beforeShow: function () {
this.title += '<br />';
this.title += 'Clicked id: ' + $("#<unique_div>").data("clickedid");
},
prevEffect: 'none',
nextEffect: 'none',
loop: false,
fitToView: false,
helpers: { title: { type: 'inside' } }
});
});
Related
I have a page where the user will click the button then a fancybox popup will appear and in there is a php file that has all the fields you can update. What I want to happen is that after I press the update button the whole page will refresh and will close the popup. But what's happening is that after I press update only the popup refreshes. How could I do that?
in this page is where I echo all of the user info
emp_refer.php
<a id="various5" href="http://i-refer.elitebpocareers.com/refer/updateInfo.php">
<button class="button">Edit Personal Information</button>
</a>
<SCRIPT TYPE = "text/javascript">
$("#various5").fancybox({
'width' : '75%',
'height' : '75%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
</SCRIPT>
Then in the page 2 after the update I do this code and the popup only refreshes
echo "<meta http-equiv='refresh' content='0; url=emp_refer.php'>";
What you could do is :
In page 2, after the update run the fancybox.close() method instead of the meta tag like :
echo "<script>parent.jQuery.fancybox.close();</script>";
Then, in your fancybox initialization script (emp_refer.php page) add the onClosed callback to your API options and run location.reload() within it like :
$("#various5").fancybox({
'width': '75%',
'height': '75%',
'autoScale': false,
'transitionIn': 'none',
'transitionOut': 'none',
'type': 'iframe',
'onClosed': function () {
location.reload();
return;
}
});
NOTE: if you are using fancybox v2.x use the afterClose callback
I have the following fancybox call:
$(document).ready(function() {
$('.fancybox').fancybox({
'closeClick' : false,
'scrolling' : 'no',
afterShow: function(){
//do some stuff
}
});
});
for influence on the following:
<img src="example"/>
what I would like to do is add the href to the fancybox call so that I can simply put a hash tag in the href in the html.
$(document).ready(function() {
$('.fancybox').fancybox({
'closeClick' : false,
'scrolling' : 'no',
'href' : 'example_url',
afterShow: function(){
//do some stuff
}
});
});
But I need to take it a bit further. Lets say I have three different items to consider:
<img src="example"/> //requires url-1
<img src="example"/> //requires url-2
<img src="example"/> //requires url-3
I know I need to give each one some type of unique identifier. Further, I realize I could just make three different fancybox calls for each one, but I think the better way to do it would be something like this:
$(document).ready(function() {
$('.fancybox').fancybox({
//do some processing here to find out what triggered the fancybox, then set a variable with the proper href based on that input. Could have a switch statement etc
'closeClick' : false,
'scrolling' : 'no',
'href' : //variable holding proper url
afterShow: function(){
//do some stuff
}
});
});
But I am having trouble making it actually happen how I envision!
EDIT: I should say that my example is using Fancybox 2, it will probably not work in the earlier versions
You can have the links carry a data-href attribute, which you can use in the fancybox call like this (fiddle: http://jsfiddle.net/xEtZ8/)
<a class="fancybox" data-href="http://fiddle.jshell.net/YtwCt/show/" href="#">URL 1</a>
<a class="fancybox" data-href="http://doc.jsfiddle.net/use/echo.html" href="#">URL 2</a>
And JS
$(function() {
$('.fancybox').fancybox({
type: 'iframe',
beforeLoad: function() {
this.href = this.element.data('href');
}
});
});
I am using this code with fancybox 1.3.7. When fancybox opens url changes to the corresponding div (/page#div-id), when it closes it is supposed to go back to /page but the commented function doesn't work. I had to use a temporary value as shown below. How can I fix this?
window.onload = function(){
function showfb(id) {
if (/^#.*/.test(id)) {
$(id).show();
$.fancybox({
href: id,
type:'inline',
position: 'center',
'transitionIn': 'fade', // elastic, none, ease, fade
'transitionOut': 'fade',
onClosed: function(){
//$(id).hide();
window.location.hash = "_"; // temporary
}
});
}
}
showfb(location.hash);
$('a.profile').click(function(e){
showfb($(this).attr('href'));
});
};
Try replacing the function with the below:
window.location.hash = "";
I have searched enough in the Stackoverflow and i could not able to find a thread to answer my question.
Below is my scenario,
function openVideo(videoid,urlid){
var videourl = 'http://localhost/ptchoice-local/welcome/video/'+videoid+'/'+urlid;
$("a#video_link").fancybox({
'type': 'iframe',
'width' : 1000,
'height' : 600,
'autoDimensions' : false,
'autoScale' : false,
'href' : videourl
});
$("a#video_link").trigger('click');
return false;
}
Show video
So, i would like to set href value when i click the "openVideo" function not in the anchor tag itself.
Fancybox version: jquery.fancybox-1.3.4.pack.js
Please suggest on this.
If I understood your question correctly this should work for you:
Need to add an ID to the anchor:
Show video
The jQuery:
$("#showVideo").click(function () {
var videourl = 'http://localhost/ptchoice-local/welcome/video/2134sdf234532sdfs324234/1';
$("#video_link").fancybox({
'type': 'iframe',
'width' : 1000,
'height' : 600,
'autoDimensions' : false,
'autoScale' : false,
'href' : videourl
});
$("#video_link").trigger('click');
});
Since the videoid and urlid were hard coded in your example, I did the same here. They can be variables if they need be -- just set them the same way.
You can do it this way.
function openVideo(videoid,urlid) {
var videourl = 'http://localhost/ptchoice-local/welcome/video/'+videoid+'/'+urlid;
$.fancybox.open({
href: videourl,
type: 'iframe',
padding: 0
});
}
I have the following fancybox code:
$('.fancybox').fancybox({
'autoScale' : false,
'href' : $('.fancybox').attr('id'),
'type':'iframe',
'padding' : 0,
'closeClick' : false,
//some other callbacks etc
the problem is I have twenty different A tag id's on the page and I want the fancybox href attribute to take the id of the clicked element, ie the one that triggered the event.
I have tried several things, none of them have worked!
'href' : $(this).attr('id'),
'href' : $(this.element).attr('id'),
This seems so simple but anytime I plug in 'this' or similar nothing works.
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+
On the other hand, a more elegant solution is to use (HTML5) data-* attribute to set the href (it would look weird to set id="images/01.jpg" otherwise) so you could do :
<a href="#" id="id01" data-href="images/01.jpg" ...
and your callback
beforeLoad: function(){
var url= $(this.element).data("href");
this.href = url
}
and use the id attribute for what is meant for.
EDIT : The best is to use the special data-fancybox-href attribute in your anchor like :
<a id="item01" data-fancybox-href="http://jsfiddle.net" class="fancybox" rel="gallery" href="javascript:;">jsfiddle</a>
and use a simple script without callback like
$(".fancybox").fancybox({
// API options
autoScale: false,
type: 'iframe',
padding: 0,
closeClick: false
});
See JSFIDDLE
You can iterate over your collection of .fancybox items and grab the id.
$('.fancybox').each(function(){
$(this).fancybox({
'autoScale' : false,
'href' : $(this).attr('id'),
'type':'iframe',
'padding' : 0,
'closeClick' : false,
//some other callbacks etc
});
});
Try this:
$(".fancybox").click(function(){
var url = $(this).attr('id');
$.fancybox({
'autoScale' : false,
'href' : url ,
'type':'iframe',
'padding' : 0,
'closeClick' : false,
//some other callbacks etc
});
})
Try this
$('.fancybox').each( function() {
var elem = jQuery(this);
elem.fancybox({
'autoScale' : false,
'href' : elem.attr('id'),
'type':'iframe',
'padding' : 0,
'closeClick' : false,
});
}
);
Have you tried this?
$('.fancybox').each(function(){
$(this).fancybox({
'autoScale' : false,
'href' : this.id,
'type':'iframe',
'padding' : 0,
'closeClick' : false,
//some other callbacks etc
});
});