However, when I load up the page with the iframe and click on the image link in the page that is in the iframe I want the lightbox to display in the parent window and not in the iframe.
you can call parent function with below code
<a onclick="parent.ShowLighbox('http://example/sampleImagePath.jpg');" href="#" >Show Lightbox</a>
and on your parent windows implement that function like below
function ShowLighbox(imageURL){
//write your code to show lightbox
}
Related
I got the code for the Facebook share button code right from facebook, it is as this:
<div class="fb-share-button" data-href="http://example.com/item/sharefb/47"></div>
While on a regular page, it works fine. It renders it assyncrhonously and for each item on the page working great.
But inside a fancybox ajax call, the button simply won't work. Facebook API will not process it, and the div will not turn into facebook's iframe full of stuff.
Any hints?
You need to parse the button after opening the box:
FB.XFBML.parse();
Source: https://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse
I have a like button that is loaded from ajax on to my page. When the user clicks it, a popup appears with a textbox that the user can fill and a description of my website. I want to access the dom of that popup, which is in an iframe.
This is so I can add text to the textbox.
All of the following is done in Firebug's Console.
I access the iframe with this:
var x = document.getElementsByTagName("iframe")[3] // the '3' selects this specific iframe
Then, I try this...
x.documentWindow
And I get
undefined
Now this probably has something to do with it, but Firebug's DOM Window does not show inside the iframe. It just shows this:
<iframe id="f3fb49f36c" name="f1b13ffab" scrolling="no" style="border: none; overflow: hidden; height: 225px; width: 401px; " class="fb_ltr" src="http://www.facebook.com/plugins/comment_widget_shell.php?locale=en_US&master_frame_name=f39fb5fa34&offsetX=0&sdk=joey"/>
BUT, in in the Element tab under Chrome's Developer Tools, I can see everything inside it.
Any help you can offer is appreciated.
Take a look at https://en.wikipedia.org/wiki/Same-origin_policy.
It's not possible.
I want to close both the i frame as well as the modal dialog box on a button click present inside the file which is called in the iframe.. the file included in the i frame is an external file having tabs.. So how to close the dialog box and iframe on a button click which is defined in the file..
I had searched the net for days but did'nt solved the problem....
//My Code for the iframe for and modal dialog box is as follows..
I want to close both the i frame as well as the modal dialog box on a button click present inside the file which is called in the iframe.. the file included in the i frame is an external file having tabs.. So how to close the dialog box and iframe on a button click which is defined in the file..
// here is the code for i frame
<div id="dialog_with_tabs" title="Vehicle Selection">// div of modal dialog
<div id="tabs_in_dialog">
<ul>
</ul>
<iframe id="myframe" src="add.php" width="100%" height="400" frameborder="0" scrolling="auto" seamless="seamless"> /// here i have included a file which has tabs..
</iframe> /*****************End of Iframe*********************/
</div>
</div>
/********************End of Div of Modal Dialog box***********************/
I want to close both the i frame as well as the modal dialog box on a button click present inside the file which is called in the iframe.. the file included in the i frame is an external file having tabs.. So how to close the dialog box and iframe on a button click which is defined in the file..
//code for modal dialog box popup is as follows..
<script type="text/javascript" > //script for modal dialog
$("#dialog_with_tabs").dialog({
bgiframe: true,
autoOpen: false,
height: 400,
width: 700,
modal: true,
buttons: {
}
});
$("#dialog_with_tabs").bind('dialogopen', function() {
/* init tabs, when dialog is opened */
$("#tabs_in_dialog").tabs();
});
$("#dialog_with_tabs").bind('dialogclose', function() {
/* your function */
window.location.reload(true);
/* destroy tabs to avoid problems on re-open */
$("#tabs_in_dialog").tabs('destroy');
/* destroy dialog to avoid problems on re-open */
$("#dialog_with_tabs").tabs('destroy');
});
/* your function to open the dialog */
$('#tabtest').click(function() {
$('#dialog_with_tabs').dialog('open');
})
//$("#dialog_with_tabs").dialog('open'); // opens the modal dialog
<!-- jquery part -->
</script>
/*********************End of script*********************/
I want to close both the i frame as well as the modal dialog box on a button click present inside the file which is called in the iframe.. the file included in the i frame is an external file having tabs.. So how to close the dialog box and iframe on a button click which is defined in the file..
// so how can close the dialog and iframe on a button click
any help will be appreciated......
Not sure how to implement this precisely, but I think this route will work!
http://davidwalsh.name/window-postmessage
Or, try this thread?
Pass jquery variables between iframe and parent
I'm trying to use FancyBox for a gallery of 36 images, but whenever I click on the image to trigger FancyBox, the thumbnail helper does 2 really odd things:
1) loads an extra thumbnail of the image I clicked at the END of the gallery thumbnails
2) the thumbnail helper does not go to clicked image's corresponding thumbnail. instead, it goes to the new thumbnail of that image I made at the end of the gallery.
here is a link to what I have so far: http://lalalichan.com/temp/process_test6.html
At the bottom, you'll see the thumbnails that trigger the images into a display area. the images that appear in that display area are links that then trigger FancyBox.
everything else is working like it's supposed to; i can navigate between my images, i can close out of FancyBox, and when I click on the thumbnail that I want the correct corresponding image appears.
it's just this nuisance that's making an otherwise smooth functionality go to heck.
any kind of help would be appreciated, thanks so much in advance!
Fancybox will generate a thumbnail for each link with the class bound to it so if you have this script
$('.fancybox').fancybox({});
and 6 links with the same class as the selector bound to fancybox like
<a class="fancybox" href="{target}" .... etc
then fancybox will generate 6 thumbnails ... so far so good.
What is happening in your case, when you load your (demo) page, there are 6 (hidden) links with class="fancybox". Also there is an empty container (id="content") where you display your bigger thumbnails
<div style="width: 820px; height: 546px;" id="content"></div>
but when you click on any of the (non-fancybox) thumbnails at the bottom of your page, the container with id="content" is populated with a 7th link with class="fancybox", duplicating one of your original links, depending on which thumbnail you clicked ... so 7 thumbnails will be generated in fancybox after this action.
Since this link is appended at the end of the pile, it will be placed at the end of the gallery too.
Your are using another plugin (thumbnailScroller), which I believe is adding the extra element to the DOM.
EDIT : New questions asked:
I still don't fully understand how clicking on the scrolling thumbnails would populate the #content div with a seventh link. How could I stop it from doing that while still retaining all the functionality of the scroller?
Your code needs a bit of tweaks: first, you are duplicating your fancybox custom script ... you just need it once. Second, you just need to load either jquery.fancybox.js or jquery.fancybox.pack.js but not both.
Regarding the functionality you ask, what I would do is:
1: Move the hidden links from the DIV id="load" to DIV id="content"
2: change the css to
#content a {
position:absolute;
visibility: hidden;
}
3: change this script
$(function(){
$('.image').live('click',function(){
var href = $(this).attr('href');
if ($('#content').is(':visible')) {
$('#content').css('visibility','hidden');
}
$('#content').load('#load #'+href,function(){
$('#content').css('visibility','visible').hide().fadeIn('3000');
});
});
return true;
})
into this
$(function(){
$('.image').each(function(i){
$(this).bind('click', function(){
$("#content a").css('visibility','hidden').eq(i).css('visibility','visible').hide().fadeIn('3000');
}); // bind
}); // each
return false;
});
assuming that the thumbnails are in the same order as the links inside the DIV with id="content".
I haven't tested the code but it's pretty much what would do the trick
EDIT 2: code improved Some changes to the css and js
New css:
#content a {
position:absolute;
display: none; /* was visibility: hidden; */
}
new js: displays the first big thumbnail on page load
$(function(){
$("#content a").eq(0).show();
$('.image').each(function(i){
$(this).bind('click', function(){
$("#content a").hide().eq(i).fadeIn('3000');
}); // bind
}); // each
return false;
});
BTW, I wouldn't add inline styles (using the style attribute), I would use style sheets instead.
I have a view in which I have the following code:
<div id="DivPassword" >
<%Html.RenderPartial("PasswordDetails"); %>
I want to display the div as a dialog, in which I am successful. When I click on a link the dialog opens.
However, I can see that the partial view is also being displayed in the View, when the page loads. Why is it so? How can I correct that?
It displays because your code generates markup like:
<div id="DivPassword" ><!-- contents of partial view here --></div>
When a browser sees this markup, id displays stuff. :)
In order to not display the dialog until you run some JavaScript to make it display, you need to hide it. You can do this with a CSS rule:
div#DivPassword
{
visibility: hidden;
}
Pretty much all JS dialog libraries will change the visibility when you pop up the dialog.