How to popup url in lightbox - javascript

I am trying to popup the url using the lightbox, when i click the button, the lightbox call has been made, but the given url is not pop-up in the light box.
when i click the button it is showing popup with just small white screen
here is code i have used
code:
<a class="example-image-link" href="uitab/index.html" data-lightbox="example-1"><input class="buton" type="button" value="View details" name="View details"></a> </td>
how can i solve this?

try to use something like that may be it helps
<a class="various fancybox.ajax" href="uitab/index.html">Ajax</a>
$(document).ready(function() {
$(".various").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
});
and read the example url here
http://fancyapps.com/fancybox/

Related

Add custom html in outside the fancybox

$.fancybox({
content: '<button>prev</button><button>next</button>',
href: src,
'autoScale': false,
'transitoinIn': 'none',
'transitionOut': 'none',
.......
});
I simply open images in fancybox. I want to add some html button in fancybox but problem is that it is override the image. but I don't want to override the image so I want to add button outside the image.
Any help?
How about you try having z-index?
<style>
.btn1 {z-index: 5;}
</style>
<html>
...
<html>
<script>
$.fancybox({
content: '<button class="btn1">prev</button><button class="btn1">next</button>',
href: src,
'autoScale': false,
'transitoinIn': 'none',
'transitionOut': 'none',
.......
});
Or you can try having your buttons in the html and position it to absolute.

jQuery Fancybox trigger not working properly

I am opening fancybox automatic when page load and for this, I am using trigger method with a hidden link inside the page, The problem is fancybox popup loading but its missing overlay, just that overlay is not opening.
I am using fancyBox v2.1.5
This is the code I am using
$(".login_signup_lb").fancybox({
maxWidth: 450,
autoSize: true,
fitToView: true,
openEffect: 'none',
closeEffect: 'none',
closeBtn: false,
helpers: {
overlay: {
css: {
'background': 'rgba(0, 0, 0, 0.6)'
}
}
}
}).trigger("click");
This is the html code which is hidden in the page
<a id="login_signup" class="login_signup_lb fancybox.ajax" href="fileurl.html" style="display:none;">
Lightbox
</a>
Try to trigger after creating fancybox
$(".fancybox.ajax").eq(0).trigger('click');
Here is jsfiddle

Creating modal with different link

I am trying to create a page with different news articles(each article page directs to a different page that was created). Using modal can I create an environment where the page pop's up in the same window rather than opening in another window? If yes, can someone please help me with the code and example?
Yes, use jQuery modal dialogs. You can have a link or button for each article and when it gets clicked, open a modal dialog with the article's text.
See this JSFiddle for a working example.
<div class='article' id="article1">
<p>This is article 1, etc...</p>
</div>
<button id='article1Button'>Article 1...</button>
<div class='article' id="article2">
<p>This is another article...</p>
</div>
<button id='article2Button'>Article 2...</button>
And the javascript:
$(document).ready(function(){
$(".article").dialog({
autoOpen : false,
resizable : false,
width : 400,
height: 400,
modal : true,
buttons: {
"Close" : function(){
$( this ).dialog( "close" );
}
},
close : function(ev, ui) {
return true;
}
});
$('#article1Button').click(function(){
$("#article1").dialog("open");
})
$('#article2Button').click(function(){
$("#article2").dialog("open");
})
});

Jquery fancyBox() Uncaught TypeError: Object [object Object] has no method 'fancybox'

Attempting to implement fancybox2 which will open a hidden div(maybe where the user clicks or predefined location).
The div
<div class="catSelections" style="display:none"><ol class="selectable ui-selectable"><div class="ui-selectee"><p class="ui-selectee">Dwelling Pictures</p><p class="ui-selectee"></p><li parentid="1" id="3" class="ui-widget-content ui-selectee">Front of Risk</li><li parentid="1" id="8" class="ui-widget-content ui-selectee">Right side of risk</li><li parentid="1" id="9" class="ui-widget-content ui-selectee">Left side of risk</li></div></ol></div>
The method I am invoking on a specific action(when user clicks on a photo div)
function addFancy(div){
$(".catSelections").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
}
Am I approaching this in the wrong way?
Error message
Uncaught TypeError: Object [object Object] has no method 'fancybox'
js loaded at bottom of page
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://fancyapps.com/fancybox/source/jquery.fancybox.pack.js?v=2.0.5"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
..
..
..
Ended up using jquery UI dialog to accomplish this. Seemed like a better fit.
$(".catSelections").dialog({
width: 450,
height: 400,
}
);

TinyMCE with div tag?

Below is my JSP code:
<tr>
<td colspan="2">custEmail</td>
<td colspan="5"><div id= "custEmail"><p><strong>Test</strong></p></div></td>
</tr>
Below is the code attaching the div with TinyMCE Editor
<script type="text/javascript" src="tinymce/tinymce.min.js"></script>
<script type="text/javascript">
tinyMCE.init({
width : "640",
mode : "exact",
elements : "custEmail",
theme : "advanced",
plugins : "preview",
readonly : true,
theme_advanced_buttons1 : "forecolor,backcolor,|,justifyleft,justifycenter,justifyright,justifyfull,|,bullist,numlist,|,formatselect,fontselect,fontsizeselect,sub,sup,|,bold,italic,underline,strikethrough",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true
});
</script>
But on my HTML page, I see the content as:
<p><strong>Test</strong></p>
Instead of Bold Test. As soon as I change the following:
div id="custEmail" tag to textarea id="custEmail"
It works fine. Not sure if I need to have some setting for div tag?
All you need to do is to set forced_root_block to 'div' :
tinyMCE.init({
...
forced_root_block : 'div'
});

Categories