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">
Related
How can I make a selection with images and have the image get selected too
<v2-select :options="books" label="url">
<template #option="{url}">
<img :src="url">
</template>
</v2-select>
books: [
{
url: 'https://codeclimate.com/github/sagalbot/vue-select'
}
],
I need the title to be the clicked image
in doc i find https://vue-select.org/api/slots.html#selected-option
But I don't know how to put it together.
i have a vue app with ant-design-vue table in it as a content. but the sorter icon is not showing up while i have import the icon correctly and working correctly when just display the icon. when i'm inspect the element, the icon is actually there but not displayed like in the picture above.
i have also tried by overwrite the css:
.ant-table-column-sorter-up .off .anticon .anticon-caret-up {
font-size: 300px; //to see if there any change clearly
color: pink
}
but there is nothing change on the template.
this is where i'm setting up the sorter on the ant design table:
{
title: 'NAME',
dataIndex: 'name',
key: 'name',
sorter: (a, b) => a.name.localeCompare(b.name),
sortDirections: ['ascend', 'descend'],
scopedSlots: {
customRender: 'name',
},
width: 250,
},
it's shows there is no <svg> data in <i> like another ant-design icon. the <i> is empty. that means it's not affected by css. it's may affected by the ant-design-table.
and the function is working perfectly, just the icon is not showing up. is there anyway that i can do so that the sorter icon can showing up?
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
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