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
Related
I'm using Magnific pop up to display a lightbox gallery and I'm trying to customize the title apparence when the pop up show the image.
I can change the general look of the title with css, changing color, size,... but I can't have just some words bolder, having two lines of text with br,... even if I change the title source with titlesrc.
I've seen in the exemples of the documentation that you can have a "subtitle" by setting it directly inside the js but it will be the same for every images or I have around 50 images with a different title for each one:
$(document).ready(function() {
$('.popup-gallery').magnificPopup({
delegate: 'a',
type: 'image',
tLoading: 'Loading image #%curr%...',
mainClass: 'mfp-img-mobile',
gallery: {
enabled: true,
navigateByImgClick: true,
preload: [0,1] // Will preload 0 - before current, and 1 after the current image
},
image: {
tError: 'The image #%curr% could not be loaded.',
titleSrc: function(item) {
return item.el.attr('title') + '<small>by Marsel Van Oosten</small>';
}
}
});
});
With the default options, you can set in title attribute also some HTML. So you can change these few words with CSS. For example:
<img src="thumb.jpg" width="100" height="100">
I try to implement FancyBox 3 in a carousel from the plugin slider revolution. The next code works well with FancyBox 2 but with fancyBox 3 the arrows not work. I want o know if someone has the solution.
Link: https://www.themepunch.com/faq/using-fancybox-with-slider-revolution/
Code that works well in FancyBox2 but not shows the arrows in fancyBox3
/* change revapi1 to whatever API name is being used for your slider */
var api = revapi1;
/* no need to edit below unless you want to change the default FancyBox settings */
api.on('revolution.slide.onloaded', function() {
jQuery(this).find('.fancybox').each(function() {
var $this = jQuery(this);
if(!$this.is('a')) $this = $this.removeClass('fancybox').find('a');
$this.addClass('fancybox').attr('rel', 'gallery').fancybox({
/* begin FancyBox options */
width: 'auto',
height: 'auto',
autoSize: true,
aspectRatio: true,
fitToView: true,
autoCenter: true,
scrolling: 'no',
onClosed: function() {api.revresume()}
}).on('click', function() {api.revpause()});
});
});
fancyBox v3 uses data-fancybox attribute for grouping instead of rel.
So, replace
.attr('rel', 'gallery')
with
.attr('data-fancybox', 'gallery')
Simple demo - https://codepen.io/anon/pen/JyYryd?editors=1010
btw, v3 does not have these options you are using and afterClose callback is used instead of onClosed
I am trying to include a caption on the actual webpage under the image while using the magnificence popup gallery. Using a div and class caption or carousel-caption, I am unable to do so without the images in the gallery stacking vertically one by one. How can I do this?
<a href="img/base/ggg.PNG" title="HELLO" class="chicken">
<img src="img/base/pop.PNG" alt="remember your alt tag" />
</a>
$(document).ready(function() {
$('.chicken').magnificPopup({
type: 'image',
gallery:{enabled:true}
// other options here
// end each line (except the last) with a comma
});
});
js fiddle: https://jsfiddle.net/sb4btox7/
Since I don't yet have enough reputation points to comment, I'm commenting here, in addition to providing a solution.
Comment: JSFiddle isn't working with your http:// images because JSFiddle is trying to serve them from https://
Solution:
You are halfway there. There are 2 parts to making the captions work.
You correctly have put the link in the anchor tag and not the
image tag
You must specify your title source in your
initialization script like this.
$(document).ready(function() {
$('.chicken').magnificPopup({
type: 'image',
gallery:{enabled:true},
type: 'image',
image: {
titleSrc: 'title'
// this tells the script which attribute has your caption
}
});
});
The script then automatically writes your caption to its div labeled class="mfp-title"
BONUS Solution: I needed my lightbox image to open in a new window for users on their phones to zoom in, so I added this after the first titleSrc declaration:
titleSrc: 'title',
titleSrc: function(item) {
return '' + item.el.attr('title') + '';
}
This information is in the documentation: http://dimsemenov.com/plugins/magnific-popup/documentation.html in the "Image Type" section
I tried to use the selected answer, but even using the documentation, the examples wouldn't work for me. What I ended up using was:
$('.elements').magnificPopup({
type: 'image',
gallery: {
enabled: true
},
image: {
titleSrc: function(item) {
return item.el.find('img').attr('title');
}
}
});
This probably has something to do with the version I was using, but it wasn't clear what version the documentation was for. Hopefully this is useful to someone.
I'm using TinyMCE 4. Unfortunately the "backcolor" control seems to only allow changes to text, not a whole paragraph. Even when I select a paragraph in the status bar of TinyMCE and apply a background color, it's only applied to the inner span, not the paragraph itself. I would need to set the background color for the complete content, not only parts of it. This should be applied to the HTML output, something like
<div style="background-color: #f00">[complete editor content]</div>
Thanks for any help.
You can use this code to access the tinymce's body to set background color:
tinymce.activeEditor.getBody().style.backgroundColor = '#<yourcolor>';
Disadvantage: Setting the background color that way will not change/affect the html content inside the editor. So you have to treat/update/store that value in a separate way.
You can also add a button on initialising tinymce:
tinymce.init({
...
setup: function (editor) {
editor.addButton('mybutton', {
text: 'Set bgColor',
icon: false,
onclick: function () {
editor.getBody().style.backgroundColor = '#E5FFCC';
}
});
...
});
You have to reach the editable content body in the dynamically generated iframe. The iframe is generated after the initialization of the editor.
If your textarea id is foo, the id of the iframe is foo_ifr.
You may also open the editor with firebug or developer tools and use dom explorer, you may see the inner dynamically generated components.
use:
var iframe = document.getElementsByTagName("iframe")[0];
// or
var iframe = document.getElementsById("foo_ifr");
// check if iframe.contentDocument is cross-browser, i tested with IE 11.
var innerBody = iframe.contentDocument.getElementsByClassName("mceContentBody")[0];
innerBody.style.backgroundColor="red";
To get the custom styling that you want, you have to create new custom style formats when the editor is being initialized. This gives you the ability to define css styling to the element. For example
HTML
<form>
<textarea></textarea>
</form>
JS
tinymce.init({
selector: 'textarea',
//merge with default formats
style_formats_merge: true,
//set up custom style formats
style_formats: [
{title: 'Red Background', block: 'p', styles: {
'background-color': '#ff0000',
'color':'white',
'padding': '7px'}
},
{title: 'Blue Background', block: 'p', styles: {
'background-color': '#0000ff',
'color':'white',
'padding': '7px'}
}
]
});
This merges two new custom formats with the default formats. See this DEMO
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.