I can't get my Magnific Popup working with index option. My goal is to make the gallery open on index of clicked image. In my HTML I have this for each image:
<div class="open_gallery_index" data-id=5><img ... ></div>
then my JS looks like this:
$(function(){
$('.open_gallery_index').click(function(){
var i = Number($(this).data("id"));
$.magnificPopup.open({
items: g_items,
gallery: {
enabled: true
},
type: 'image'
},i);
});
})
But when clicking the image I get an error
Uncaught TypeError: Cannot read property 'parsed' of undefined
Though if I set the variable i manually to let's say 5, everything works fine, so the problem must be in this
var i = Number($(this).data("id"));
but I have tried everything with no success, thanks for any help.
Update your data-id attribute like this.
<div class="open_gallery_index" data-id="5"><img ... ></div>
I think $.magnificPopup.open requires an src property. Not really sure what g_items is in your code, but try something like this:
$.magnificPopup.open({
items: {
src: '.open_gallery_index',
type: 'image'
}
gallery: {
enabled: true
},
},i);
$.magnificPopup.open({
items: g_items,
gallery: {
enabled: true
},
type: 'image'
},i);
i--;
i++;
it worked with me this way and I don't know why
Related
I am using below code to create a ckeditor plugin to upload images. While i am trying to create a ckeditor dialog, I am getting below errors. Below piece of code i took from the below link.
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.definition.button.html
In chrome :
Uncaught TypeError: Cannot read property '_' of undefined
In firefox :
b.getContentElement(...) is undefined
Any help will be greateful.
{
type : 'file',
id : 'upload',
label : 'Select file from your computer',
size : 38
},
{
type : 'fileButton',
id : 'fileId',
label : 'Upload file',
'for' : [ 'tab1', 'upload' ],
filebrowser : {
onSelect : function( fileUrl, data ) {
alert( 'Successfully uploaded: ' + fileUrl );
}
}
},
I think that what you have there, is not "code" as it. Is just the object definition you must do to initialize a button in a dialog, as the docs you pasted say:
This class is not really part of the API. It just illustrates the
properties that developers can use to define and create buttons.
Once the dialog is opened, the created element becomes a
CKEDITOR.ui.dialog.button object and can be accessed with
CKEDITOR.dialog#getContentElement. For a complete example of dialog
definition, please check CKEDITOR.dialog.add.
Then, if we check that: http://docs.ckeditor.com/#!/api/CKEDITOR.dialog.definition
We will find this code:
CKEDITOR.dialog.add( 'testOnly', function( editor ) {
return {
title: 'Test Dialog',
resizable: CKEDITOR.DIALOG_RESIZE_BOTH,
minWidth: 500,
minHeight: 400,
contents: [
{
id: 'tab1',
label: 'First Tab',
title: 'First Tab Title',
accessKey: 'Q',
elements: [
{
type: 'text',
label: 'Test Text 1',
id: 'testText1',
'default': 'hello world!'
}
]
}
]
};
} );
Then it seems you need to call the method CKEDITOR.dialog.add with the object you prepared. (anyway, I din´t checked all the data and the formats you have in your object) this example should work.
Anyway, you should check this part of the same documentation and be sure on which one is the dialog/plugin you need.
Hope it may help to you.
Okay so i have the following highChart tag:
<highchart id="chart1" config="chartConfig" ></highchart>
Now in my system i have several tabs. it happens to be that the high chart is not under the first tab.
Now when i press the tab that contains the chart, the chart looks abit odd:
(You can't tell from this picture but it is only using like 30% of the total width)
But change the browser size and then changing it back to normal the chart places it self correctly inside the element (this also happens if i just open the console while i am inside the tab):
I am guessing that it has something to do with the width of the element once it has been created (maybe because it is within another tab) but i am unsure how to fix this.
I attempted to put a style on the element containg the highchart so that it would look something like this: <highchart id="chart1" config="chartConfig style="width: 100%"></highchart>
However this resulted in the chart running out of the frame.
My chart config
$scope.chartConfig = {
};
$scope.$watchGroup(['login_data'], function(newValues, oldValues) {
// newValues[0] --> $scope.line
// newValues[1] --> $scope.bar
if(newValues !== oldValues) {
$scope.chartConfig = {
options: {
chart: {
type: 'areaspline'
}
},
series: [{
data: $scope.login_data,
type: 'line',
name: 'Aktivitet'
}],
xAxis: {
categories: $scope.login_ticks
},
title: {
text: ''
},
loading: false
}
}
});
Can you try one of the following in your controller? (or perhaps both!)
$timeout(function() {
$scope.chartConfig.redraw();
});
$timeout(function() {
$scope.chartConfig.setSize();
});
Calling the reflow method solved my similar issue on showing chart in a modal. Hope this will help others :D
Add this to your controller after $scope.chartConfig:
$scope.reflow = function () {
$scope.$broadcast('highchartsng.reflow');
};
I am trying to develop a wordpress plugin and all other thing went good. but i am stuck here at the moment. i am trying to get selected value from the tinymce listbox but it returns something like [object Object] rather than value. can any one tell me why this happening and give me a solution. i am very thankful if anyone can give me a solution for this issue.
(function() {
tinymce.PluginManager.add('AP_tc_button', function( editor, url ) {
editor.addButton( 'AP_tc_button', {
text: 'My test button',
icon: 'wp_code',
onclick: function() {
editor.windowManager.open({
title: 'Select Your AD',
body: [
{
type: 'listbox',
name: 'level',
label: 'Header level',
values: [{text: 'x', value: 'x'}]
}],
onsubmit: function(v) {
alert(v);
//editor.insertContent(toString(e.value()));
}
});
}
});
});
})();
Well i found the solution i will add it here for your reference.
we have to get data from the object so i used object.data.listbox_name
onsubmit: function(v) {
alert(v.data.level)
So how can I add stuff to carousell in sencha touch 2.x?
var c = Ext.create('Ext.Carousel', {
fullscreen: true,
defaults: {
styleHtmlContent: true
},
items: [
{
html : 'Item 1'
}]
});
If I want to, for example, push a form f to the carousell how can I do that?
I have already tried c.push(f) and c.add(f) but I can't see my form being added there.
The proper way of adding stuff into a container like Ext.Carousel is using the add() function. You can also define your carousel like this, if you want to just add all your stuff to it in runtime:
var c = Ext.create('Ext.Carousel', {
fullscreen: true,
defaults: {
styleHtmlContent: true
}
});
Now you can use the c.add(f) function. Also to remove the object f from the carousel or other container c use c.remove(f)
I know the lightbox gallery you can scroll left and right and view picture after picture but is this possible with the ajax popup? I don't believe you can assign a delegate to allow this functionality.
Examples here.
Yep, it's possible with ajax too, you can even mix ajax with another content type.
<button class="link">Click me</button>
<script>
$('.link').magnificPopup({
items: [
{
src: 'ajax-file.html'
},
{
src: 'ajax-file-2.html'
},
{
src: 'http://farm9.staticflickr.com/8379/8588290361_ecf8c27021_b.jpg',
type: 'image'
}
],
type: 'ajax',
gallery: {
enabled: true
}
});
</script>