How can I add fancybox with the button helper and thumbnail helper?
And is it possible for the buttons(button helper) to be put under the image so that I can watch and select which I want to see?
the buttons
$(document).ready(function() {
$(".fancybox-button").fancybox({
prevEffect : 'none',
nextEffect : 'none',
closeBtn : false,
helpers : {
title : { type : 'inside' },
buttons : {}
}
});
});
and the thumbnail code
$(document).ready(function() {
$(".fancybox-thumb").fancybox({
prevEffect : 'none',
nextEffect : 'none',
helpers : {
title : {
type: 'outside'
},
overlay : {
opacity : 0.8,
css : {
'background-color' : '#000'
}
},
thumbs : {
width : 50,
height : 50
}
}
});
});
I am a bit new with JavaScript I couldn't get it to work.
What I am trying to do is mix them together and put the buttons on the bottom
P.S. Can I also uses fancybox thumbnail helper to work with Youtube videos?
You also have to load the jquery.fancybox-buttons and jquery.fancybox-thumbs js and css files apart from the fancybox regular js and css files. They are under the subdirectory "helpers" of the zip file.
Related
In order to define custom StyleSet in CKEditor with styles from an external stylesheet, configured the following settings:
config.extraPlugins = 'stylesheetparser';
config.contentsCss = '/css/externalStyleSheet.css';
config.stylesSet = [ { name : window.parent.getResource('editor.style.normal'), element : 'span', attributes: { 'class': 'formatnormal' } }, { name : window.parent.getResource('editor.style.small'), element : 'span', attributes: { 'class': 'formatsmall' } }, { name : window.parent.getResource('editor.style.large'), element : 'span', attributes: { 'class': 'formatlarge' } }, { name : window.parent.getResource('editor.style.bold'), element : 'span', attributes: { 'class': 'formatbold' } }, { name : window.parent.getResource('editor.style.smallBold'), element : 'span', attributes: { 'class': 'formatsmallbold' } }, { name : window.parent.getResource('editor.style.largeBold'), element : 'span', attributes: { 'class': 'formatlargebold' } }, { name : window.parent.getResource('editor.style.red'), element : 'span', attributes: { 'class': 'formatred' } }, { name : window.parent.getResource('editor.style.code'), element : 'span', attributes: { 'class': 'formatcode' } }, ];
config.fullPage = true;
config.resize_enabled = false;
config.removePlugins = 'resize,autogrow,elementspath';
Expected result
The styleset should show the list of custom styles.
Once a text is selected, and a style is selected from the drop-down, the style should get applied.
Actual result
The styleset is showing the list of custom styles with the styles applied to the labels themselves.
But, when a text is selected inside the editor (which is in an iframe) and a style is selected from the drop-down, the style is applied to the "span" tag but the corresponding CSS is not present in context of the iframe.
Other details
When config.fullPage = false, then there is no issue, probably because the editor is not in a different iframe and the CSS is available to it. The issue is with config.fullPage = true, which is required in our case in order to have a vertical scrollbar.
Browser: Chrome Version 66.0.3359.181
OS: Windows 10
CKEditor version: 4.9.2
Installed CKEditor plugins: none, other than the configuration mentioned above.
That is documented behavior:
contentsCss : String | Array
The CSS file(s) to be used to apply style to editor content. It should reflect the CSS used in the target pages where the content is to be displayed.
Note: This configuration value is ignored by inline editor as it uses the styles >that come directly from the page that CKEditor is rendered on. It is also ignored in the full page mode in which the developer has full control over the page HTML code.
Read more in the documentation and see the SDK sample.
https://docs.ckeditor.com/ckeditor4/latest/api/CKEDITOR_config.html#cfg-contentsCss
You could load the css in the webpage using ckeditor on, similar to https://jsfiddle.net/z23qxw1y/
CKEDITOR.stylesSet.add('my_styles', [
// Block-level styles.
{
name: 'Blue Title',
element: 'h2',
styles: {
color: 'Blue'
}
},
]);
CKEDITOR.config.stylesSet = 'my_styles';
I am trying to get a gallery up and running just with css bacground images put in iframes in fancybox.
Thats what I use:
$(".smallimg").click(
function(){
var baseimg = $(this).css('background-image');
var baseimg2 = baseimg.replace('url("','');
var bgimg = baseimg2.replace('")','');
$.fancybox({
helpers : {
overlay : true
},
width: '815px',
height: '550px',
type: 'iframe',
href: bgimg,
fitToView: false, //
scrolling: 'no',
iframe: {
preload: false
}
});
}
);
And I have several divs holding images as background images witht the class .smallimg applied.
For clicking image by image my code works quite good but I would like to have it in gallery style... is that possible?
Need to mention that the names of the images are NOT enumerated like 1.jpg 2.jpg ...
Rgds
Mirko
My Fancybox is working so far, except for the close button which doesn't appear.
This is my Javascript:
$(".fancybox").fancybox();
$('.single').fancybox({
openEffect : 'elastic',
closeEffect : 'none',
helpers : {
title : {
type : 'outside' } }
});
});
I've tried working with the modal thingy but I don't know where I should put it, as I am new to Javascript.
I have created a menu with extjs where you click on it and can see menu items dropping down. The first item is open. This button is supposed to open a file from file-dialog. But the only way I can open the file dialog I found is to place the file dialog field in the menu by only showing the button.
Now I need help to make this button look like just regular menu item:
var item = Ext.create('Ext.form.field.File', {
buttonOnly: true,
buttonText: 'Open',
hideLabel: true,
// maybe to add some css class here
listeners: {
'change': function(fb, v){
Ext.Msg.alert('Status', item.getValue());
}
}
});
var mainmenu = Ext.create('Ext.menu.Menu', {
width: 200,
margin: '0 0 10 0',
items: [item]
});
You can add the attribute buttonConfig to the Ext.form.field.File item and then use the standard attributes to a button. For example, this might work:
var item = Ext.create('Ext.form.field.File', {
buttonOnly: true,
buttonText: 'Open',
hideLabel: true,
buttonConfig: {
style: {
background: "#f1f1f1",
border: 0
}
},
listeners: {
'change': function(fb, v){
Ext.Msg.alert('Status', item.getValue());
}
}
});
Try changing putting a cls instead of a style attribute in the buttonConfig to use a CSS class instead of inline CSS.
Trying to figure out how to reinitialize Easy FancyBox when new content is loaded in with infinite scroll. I tried $.fancybox.init(), but this doesn't seem to be enough. In the head section the script that calls easy fancybox is:
jQuery(document).ready(function($){
var fb_timeout = null;
var fb_opts = { 'overlayShow' : true, 'centerOnScroll' : true, 'showCloseButton' : true, 'showNavArrows' : true, 'onCleanup' : function() { if(fb_timeout) { window.clearTimeout(fb_timeout); fb_timeout = null; } } };
/* IMG */
var fb_IMG_select = 'a[href$=".jpg"]:not(.nofancybox),a[href$=".JPG"]:not(.nofancybox),a[href$=".gif"]:not(.nofancybox),a[href$=".GIF"]:not(.nofancybox),a[href$=".png"]:not(.nofancybox),a[href$=".PNG"]:not(.nofancybox)';
$(fb_IMG_select).addClass('fancybox').attr('rel', 'gallery');
$('a.fancybox, area.fancybox').fancybox( $.extend({}, fb_opts, { 'transitionIn' : 'elastic', 'easingIn' : 'easeOutBack', 'transitionOut' : 'elastic', 'easingOut' : 'easeInBack', 'opacity' : false, 'titleShow' : true, 'titlePosition' : 'over', 'titleFromAlt' : true }) );
/* Auto-click */
$('#fancybox-auto').trigger('click');
});
/* ]]> */
Any Ideas how I can reinitialize something like this, bound specifically to new content loaded into #content div.post? Thank you for any help.
Check this thread, it may help (EasyFancybox uses fancybox v1.3.4)
Update: I just recalled that the thread of reference (above) will work for single new added elements, but not for galleries. If you have a set of galleries (using the rel attribute) then you may prefer to upgrade to jQuery 1.7+ (if not yet) and use jQuery on() instead of delegate(), that will allow you to initialize your existing and dynamically added elements.
I made an example page here that shows how to use jQuery on() to solve the issue of dynamically added elements and fancybox (v1.3.x), if you want to have a look.
Based on the example page, I guess in your specific case, you may try tweaking your code this way:
jQuery(document).ready(function($){
var fb_timeout = null;
var fb_opts = { 'overlayShow' : true, 'centerOnScroll' : true, 'showCloseButton' : true, 'showNavArrows' : true, 'onCleanup' : function() { if(fb_timeout) { window.clearTimeout(fb_timeout); fb_timeout = null; } } };
/* IMG */
$("#content div.post").on("focusin", function(){
var fb_IMG_select = 'a[href$=".jpg"]:not(.nofancybox),a[href$=".JPG"]:not(.nofancybox),a[href$=".gif"]:not(.nofancybox),a[href$=".GIF"]:not(.nofancybox),a[href$=".png"]:not(.nofancybox),a[href$=".PNG"]:not(.nofancybox)';
$(fb_IMG_select).addClass('fancybox').attr({'rel': 'gallery', 'tabindex': '1'});
$('a.fancybox, area.fancybox').fancybox( $.extend({}, fb_opts, {
'transitionIn' : 'elastic',
'easingIn' : 'easeOutBack',
'transitionOut' : 'elastic',
'easingOut' : 'easeInBack',
'opacity' : false,
'titleShow' : true,
'titlePosition' : 'over',
'titleFromAlt' : true
}) );
/* Auto-click */
$('#fancybox-auto').trigger('click');
}); // on
}); // ready
Of course, jQuery 1.7+ is required.