With this code below I can not get, below the image popup, the title !
I do not know what i'm doing wrong !!!
If I remove 'titleSrc : 'data-title'' everything works fine ;))
window.google.maps.event.addListener(infobox, "domready", function () {
$('.pop').on('click', function () {
$.magnificPopup.open({
items : {
src : $(this).data('lg'),
},
type : 'image',
image : {
titleSrc : 'data-title' // My data-title in the A HREF
}
});
});
});
Thanks for your help
UPDATED
window.google.maps.event.addListener(infobox, "domready", function () {
$('.pop').on('click', function () {
$.magnificPopup.open({
items : {
src : $(this).data('lg')
},
type : 'image',
image : {
titleSrc : $(this).data('title')
}
});
});
});
Even if I put titleSrc : 'TEST'
Related
How can I show these thumbnails by default?
Live code example here
I am using Fancybox api for open lightbox by click.
$.fancybox.defaults.buttons = ["zoom", "thumbs", "close" ];
$('.fancybox-btn').click(function () {
$.fancybox.open([
{
src : 'http://placehold.it/300x200?text=1',
opts : {
thumb : 'http://placehold.it/300x200?text=1'
}
},
{
src : 'http://placehold.it/300x200?text=2',
opts : {
thumb : 'http://placehold.it/300x200?text=2'
}
}
]);
});
Add thumbs : { autoStart : true, }, option to second argument of $.fancybox.open:
{
loop : false,
thumbs : {
autoStart : true,
},
}
For some reason, the blur event doesn't get fired when the below floating panel loses focus. However, when I listen to the 'el' of the panel for the blur event, it gets registered as shown in the listeners config. What I want to do is hide the panel when the blur event occurs. How do I get access to the parent panel ?
Ext.define('NoteKeeper.view.tabs.AttachmentPanel',{
extend : 'Ext.panel.Panel',
alias : 'widget.attachmentPanel',
itemId : 'attachmentPanel',
floating : true,
focusable : true,
width : 200,
height : 150,
layout : {
type : 'vbox'
},
items : [
{
xtype : 'grid',
store : null,
columns : [
{
text : 'File Name',
dataIndex : 'fileName'
},
{
dataIndex : 'remove'
}
]
},
{
xtype : 'button',
text : '+'
}
],
listeners : {
el: {
blur: {
fn: function()
{
console.log( this );
//how do I access the 'attachmentPanel' from here
//so I can hide it ?
}
}
}
},
noteId : null,
initComponent : function()
{
this.callParent(arguments);
}
});
Please note that there can be multiple instances of these 'attachmentPanel's.
The following appears to work fine:
listeners : {
el: {
blur: {
fn: function()
{
console.log(this);
var elId = this.id;
var attachmentPanels = Ext.ComponentQuery.query('#attachmentPanel');
Ext.Array.forEach( attachmentPanels, function(cmp){
if(cmp.id == elId)
{
cmp.hide();
return false;
}
});
}
}
}
Please let me know if there is better/more efficient solution. Thanks!
There is a reference from the element to the owning component, in form of the component property, so from the scope of the element, you can access the panel like so:
var attachmentPanel = this.component;
I am able to access the onclick properties function for the printButton property at the end of the block. Although I am unable to initiate the onclick functions under the exportButton property.I have the following code.
B.exporting = {
type : "image/png",
url : "http://export.highcharts.com/",
width : 800,
enableImages : false,
buttons : {
exportButton : {
symbol : "exportIcon",
x : -10,
symbolFill : "#A8BF77",
hoverSymbolFill : "#768F3E",
_titleKey : "exportButtonTitle",
menuItems : [{
textKey : "downloadPNG",
onclick : function() {
this.exportChart()
}
}, {
textKey : "downloadJPEG",
**onclick : function() {
this.exportChart({
type : "image/jpeg"
})**
}
}, {
textKey : "downloadPDF",
onclick : function() {
this.exportChart({
type : "application/pdf"
})
}
}, {
textKey : "downloadSVG",
onclick : function() {
this.exportChart({
type : "image/svg+xml"
})
}
}
}]
},
printButton : {
symbol : "printIcon",
x : -36,
symbolFill : "#B5C9DF",
hoverSymbolFill : "#779ABF",
_titleKey : "printButtonTitle",
onclick : function() {
this.print()
}
}
}
};
I am binding keyboard controls to the click events using the jquery plugin this is what I used to print. This Works!:
Mousetrap.bind('ctrl+s', function(e) { B.exporting.buttons.printButton.onclick(this.print());
});
This code is what I tried to access an individual onclick function under the exportButton property in the json above
Mousetrap.bind('*', function(e) {B.exporting.buttons.exportButton.menuItems[0].onclick;});
The result i get is the value but i want to run the function as the onclick property does.Does anyone know how to run a function under a json property?I Appreciate any help here thanks folks.
Mousetrap.bind('click', B.exporting.buttons.exportButton.menuItems[0].onclick);
Your ctrl-s binding also looks wrong, it should be:
Mousetrap.bind('ctrl+s', B.exporting.buttons.printButton.onclick);
The printButton.onclick function doesn't take an argument. Your binding calls this.print before calling the printButton.onclick function, and then the printButton.onclick function
does it again.
I have created an Object.. please tell me If I'm doing it right:
{"images": {
image1 : {
"small_image" : "images/1.png",
"large_image" : "images/big/1.png"
},
image2 : {
"small_image" : "images/2.png",
"large_image" : "images/big/2.png"
},
image3 : {
"small_image" : "images/3.png",
"large_image" : "images/big/3.png"
},
}
Now, I saved it with the name images.json
How will I call it on my HTML file using jQuery?..
I want to test it on a console first..
I use this code and it does'nt display anthing on console..
$.getJSON("js/images.json", function(data){
$.each(data, function (index, value) {
console.log("asdfasdf " +value);
});
});
You need to modify your object Literal to make it a JSON String. It should look more like this:
{"images": {
"image1" : {
"small_image" : "images/1.png",
"large_image" : "images/big/1.png"
},
"image2" : {
"small_image" : "images/2.png",
"large_image" : "images/big/2.png"
},
"image3" : {
"small_image" : "images/3.png",
"large_image" : "images/big/3.png"
}
}}
That along with the javascript you already have should work, assuming your webserver is setup to properly serve .json files.
Hi i have created the following ckeditor plugin to insert a youtube video:
(function() {
CKEDITOR.plugins.add('youtube', {
requires : ['iframedialog'],
init : function(editor) {
var iframeWindow = null;
CKEDITOR.dialog.add('youtube_dialog', function() {
return {
title : 'YouTube Movie Properties',
minWidth : 550,
minHeight : 200,
contents : [{
id : 'iframe',
label : 'Insert YouTube Movie',
expand : true,
elements : [{
type : 'iframe',
src : me.path + 'dialogs/youtube.html',
width : '100%',
height : '100%',
onContentLoad : function() {
iframeWindow = document.getElementById(this._.frameId).contentWindow;
}
}]
}],
onOk : function() {
this._.editor.insertHtml('<cke:youtube url="' + iframeWindow.document.getElementById('url').value + '">YouTube Video Place Marker</cke:youtube>');
}
};
});
editor.addCommand('youtube', new CKEDITOR.dialogCommand('youtube_dialog'));
editor.ui.addButton('YouTube', {
label : 'Insert YouTube Movie',
command : 'youtube',
icon : this.path + 'images/icon.gif'
});
}
});
})();
This was working fine but i recently moved my ckeditor files to a CDN. Now when i click the "OK" button i get a permission error. I was looking at the source of the existing plugins to get an idea of how they work but whatever i have tried doesn't seem to work. To get something basic working I tried changing my okOk event to:
onOk : function() {
var hr = new CKEDITOR.dom.element('hr', editor.document );
editor.insertElement(hr);
}
But this gave me a null reference exception.
I'd really appreciate it if someone could show me what i am doing wrong. Thanks
Problem fixed! The solution is to change:
CKEDITOR.dialog.add('youtube_dialog', function()
to:
CKEDITOR.dialog.add('youtube_dialog', function(editor)
and change:
this._.editor
to:
editor
Hope this helps.