I am using fancybox to allow my users to show pictures in full size.
$(document).ready(function () {
$('body').on('click', 'img', function () {
var src = $(this).attr('src');
$.fancybox.open([
{
type: 'iframe',
href: src,
title: '1st title'
}
], {
padding: 0
});
})
});
However one of my images is rather wide:
Which gives the following when open in fancybox:
So can anyone tell me what i can do to make sure the image matches?
Related
I recently had an issue with triggering Fancybox after xx amount of seconds which was resolved kindly by Janis.
I should have thought of this before, however is there a way of altering the code below so the lightbox doesn't trigger for mobile users?
<script type="text/javascript">
setTimeout(function() {
$.fancybox.open({
type: 'iframe',
src: '/contact-us/voucher-request-nc.aspx?Enquiry_Type=Sales%20Special%20Offers&Make=Vauxhall&Model=ADAM',
width: "100%",
opts: {
iframe: {
preload: false
}
}
});
}, 15000);
</script>
Thanks for any help guys.
The simplest solution would be to use built-in mobile device detection of fancyBox, like so:
if ( !$.fancybox.isMobile ) {
setTimeout(function() {
$.fancybox.open({
type: 'iframe',
src: '/contact-us/voucher-request-nc.aspx?Enquiry_Type=Sales%20Special%20Offers&Make=Vauxhall&Model=ADAM',
width: "100%",
opts: {
iframe: {
preload: false
}
}
});
}, 500);
}
So I've setup a fancybox with boxslider.
I have some problems with the boxslider when opening the fancybox again after closing it the first time.
website (please note that the onclick is only applied to the first block (top row, most left))
The fancybox is called by the code below:
<div class="img-spacer" onclick="$.fancybox({href : '#portfolio-1', width: 1040, margin: 0, padding: 0, closeBtn: false}); $('.bxslider').bxSlider({auto: true,controls: false,pager: false});">
This code works just fine when opening the fancybox for the first time but when I close the fancybox and open it again the boxslider is not working anymore like it is supposed to. It will skip some photo's and won't slide smoothly.
Any suggestions on how to fix this?
Like I mentioned in my comment, you need to move the fancybox init out of the inline click handler, in into your JS file.
$(document).ready(function() {
// Attach fancybox to every .image-spacer div
$("img-spacer").fancybox({
href : '#portfolio-1',
width: 1040,
margin: 0,
padding: 0,
closeBtn: false,
onUpdate: function() {
alert('update!');
},
onCancel: function() {
alert('cancel!');
},
onPlayStart: function() {
alert('play start!');
},
onPlayEnd: function() {
alert('play end!');
},
beforeClose: function() {
alert('before close!');
},
afterClose: function() {
alert('after close!');
},
beforeShow: function() {
alert('before show!');
},
afterShow: function() {
alert('after show!');
},
beforeLoad: function() {
alert('before load!');
},
afterLoad: function() {
alert('after load!');
}
});
// On clicking a .img-spacer div, attach a bxSlider
$(".portfolio").click(function(){
$('.bxslider').bxSlider({
auto: true,
controls: false,
pager: false
});
});
});
And for the HTML
<div class="img-spacer"></div>
Give this a shot and let me know how it went. If you place it on the live site I can take a look at it there.
I created an initial version of a plugin for inserting footnotes in tinyMCE, basing on some resources that I found for WordPress and Drupal. Here's the code:
tinymce.PluginManager.add('footnotes', function(editor) {
function showDialog() {
var win = editor.windowManager.open({
title: "Add a footnote",
id: 'footnote-dialog',
body: {
type: 'textbox',
name: 'footnote',
multiline: true,
minWidth: 520,
minHeight: 100,
//style: 'direction: ltr; text-align: left'
},
onSubmit: function(e) {
e.preventDefault();
var footnote = e.data.footnote;
if (footnote.length){
var html = '<span><sup class="footnote-elem" data-toggle="tooltip" data-placement="top" title="'+footnote+'">[*]</sup></span>';
editor.undoManager.transact(function() {
tinyMCE.activeEditor.execCommand('mceInsertRawHTML', false, html);
});
editor.windowManager.close();
}
}
});
}
editor.addButton("footnotes", {
title : 'Insert a footnote',
image : tinyMCE.baseURL + '/plugins/footnotes/img/note_add.png',
onclick: showDialog
});
});
the plugin basically works:
the problem is that the following inserted text is inserted as <sup> too:
So the desired behaviour would be:
put the cursor immediately after the inserted html;
restore original formatting.
Any suggestion/help on how to achieve that?
Thanks
Im useing facybox 2.1.5 to show an iframe, and i need the url
be same as the url inside fancybox, which need to be dynamic.
For example, if i open www.wikipedia.com in fancybox my url should be
www.wikipedia.com, and if in wikipedia i will click some other link my url has to change properly without refreshing the page (www.wikipedia.com/something).
Update, and when i will close the fancybox my url will back to normal.
**Assume, in wikipedia the url and the content is changing witheout refreshing (ajax).
Here some code of mine:
$('.fancybox').fancybox
({
type: "iframe",
padding: 0,
fitToView: false,
autoSize: false,
'scrolling' : 'no',
wrapCSS: 'fancybox-custom',
closeClick: true,
openEffect: 'none',
helpers:
{
title: {
type: 'inside'
},
overlay:
{
css:
{
'background': 'rgba(238,238,238,0.85)'
}
}
},
beforeShow: function ()
{
this.width = '60%';
this.height = ($('.fancybox-iframe').contents().find('body').height()) + 500;
}
});
document.getElementById("FrameID").src
This function can be used to get the url out of an i-frame. you can update your url with value returned by this function.
you can use change of url returned by the function as a trigger
var _url
_url = document.getElementById("FrameID").src;
function do(){
if(_url != document.getElementById("FrameID").src){
//update url here
}
setTimeOut("do()",1000);
}
I have a ckeditor instance, to which I added a custom dialog box using:
CKEDITOR.dialog.add('quicklinkDialog', function(editor) {
return {
title: 'Quick Links',
minWidth: 400,
minHeight: 200,
contents: [
{
id: 'tab1',
label: 'Add a quick link',
elements: [
{
type: 'html',
html: '<p>This is some text and then: Click me!</p>'
}]
};
});
I want to add a "click" event listener on the link inside my dialog box. When that link is clicked, content will be inserted into my textrea (the dialog box will also be closed).
Anyone knows how I might do this? Thanks in advance!
Here you go:
{
type: 'html',
html: '<p>This is some text and then: Click me!</p>',
onLoad: function( a ) {
CKEDITOR.document.getById( this.domId ).on( 'click', function() {
var dialog = this.getDialog();
dialog.hide();
dialog._.editor.insertHtml( this.html );
}, this );
}
}
See the API to know more.