We Keep Coding

How to append a dynamic element to an image opened in lightgallery.js

I have a page that show lots of photos which can be opened with lightgallery.js
I've already made some custom HTML caption which works fine. But now I want to add a label to the image itself. How can I do that?
I will show an example of what my photos page looks like:
When you open an image this is what it looks like:
The left part is a custom HTML caption which I linked with this attribute: data-sub-html.
Example code of my looped code:
$photomasonry .= '
<div class="tile scale-anm noselect">
<a href="https://studio.website.nl/'.$getphotos['preview'].'" data-sub-html="#caption'.$imgcount.'" class="item masonrytile" data-src="https://studio.website.nl/'.$getphotos['preview'].'">
<img src="https://studio.website.nl/'.$getphotos['preview'].'"/>
<span class="idlabel">'.$getphotos['id'].'</span>
<span class="sizelabel">'.$size.'</span>
</a>
</div>';
$photomasonry .= '
<div id="caption'.$imgcount.'" style="display:none">
<img src="https://studio.website.nl/images/logo.png">
<h4 class="subhtmlh4">Maak iets moois met deze foto</h4>
<div class="gallerypopupbtns">
<button class="btnstyle purplebtn" type="button" name="button">Maak iets moois</button>
</div>
</div>';
$imgcount++;
But now I want this purple size icon (L, XL, XX) as a label on the image when lightgallery is opened. How can I do this? The html of the lightgallery is only generated after the page is loaded.
I want to add an element inside this part:
<div class="lg-img-wrap">
<img class="lg-object lg-image" src="https://studio.website.nl/images/photos/previews/preview-bb58317c8d05e29b32963e7a295a5b9f.jpg">
</div>
But not just that, the content is dynamic, so display the correct size for the correct image. I already created this for the photo overview page but not when clicking a photo.

According to the lightgallery docs, you can use the event lgAfterOpen to execute code once the gallery is opened. However, lightgallery makes this slightly difficult as you can't access the image clicked on from this event, but you can access it from the event lgBeforeOpen. With this in mind, I'd accomplish this by doing two things.
Firstly, add the size as a data attribute of each image:
<img src="https://studio.website.nl/'.$getphotos['preview'].'" data-size="'.$size.'"/>
Secondly, add the following functions when initialising lightgallery:
// example gallery definition
const lg = document.getElementById('custom-events-demo');
// add the following functions
lg.addEventListener('lgBeforeOpen', (event) => {
//add datasize property to target so it can be accessed in the afterOpen function
event.target.dataset.size = event.explicitOriginalTarget.dataset.size;
});
lg.addEventListener('lgAfterOpen', (event) => {
// get size from data attribute
var size = event.target.dataset.size;
// get the .lg-img-wrap div to append size to
var imgWrap = document.querySelector(".lg-container.lg-show .lg-img-wrap");
// create and append span
var sizeSpan = document.createElement("span");
sizeSpan.classList.add("sizelabel");
sizeSpan.innerHTML = size;
imgWrap.appendChild(sizeSpan);
});
//initialise lightgallery
lightGallery(lg);
You may be using a different version of lightgallery, but when I tested this the .lg-img-wrap element was a picture element not a div, so I replaced the last line of the event listener function with the following to get the size to show:
imgWrap.parentElement.appendChild(sizeSpan);
You might need a bit of extra CSS to position the size span as you wish, but just to get it to show all you need is:
.sizelabel {
position: relative;
}
Note: I don't think this will work if you navigate to a different image from within lightgallery as it won't update the size, and in fact the size might just get removed. To fix this you'd probably need to do something using the lgAfterSlide event and the index of the image, but from your screenshot it looks like you don't expect the user to scroll through images within lightgallery anyway so this may not be an issue.

Expand current Javascript text box content change

At the moment I have a javascript/jquery snippet that changes text in a text box depending on which icon/image is currently hovered over. It currently uses the ID tag name as the display string. How can I get it to display some other text (based on same image hover) - i.e. instead of using the ID string like "idOne" I can use another string like "This is the text to be displayed" for that particular ID element (.attr('id'))
As you can gather I'm pretty new to this! Will appreciate any guidance.
Thanks
jQuery(document).ready(function($) {
var text=$('#explain-text').text();
$('#idOne,#idTwo,#OidThree,#idFour,#idFive').hover(function() {
$('#explain-text').text($(this).attr('id'));
},function(){
$('#explain-text').text(text);
});
});

You can add other attribute in your img tag like this:
<img id="one" src="images.png" alt="Smiley face" info="This is the text to be displayed" >
And then, in your JS file, get its value as below:
$('#explain-text').val($(this).attr("info"));

Advanced Captions with bxslider

This question has already been asked, but has no answer - I believe because not enough information was provided.
I am using the bxslider as my template. See here:
http://bxslider.com/examples/image-slideshow-captions
I can create a very simply caption using the "title" attribute, but I want to be able to create subtitles (with different attributes like smaller text) and I want to turn this into a link. I've tried implementing a div within the container, and perhaps obviously, I can't get that to sync with the slider without implementing it with jquery. I've also tried editing the CSS to no avail.
How can I add a caption that more than just an image title? Like a div overlaying the picture?

You don't even need to use the captions option provided by bxslider.
Add the captions as part of the li tag that forms your slide. That's what the captions:true option does anyways, i.e appends the div with bx-caption class to your slide.
For eg:
<li>
<img src="http://bxslider.com/images/730_200/hill_trees.jpg" />
<div class="caption1">
<span>Image 1</span>
<div class="caption2"><a id="img1a" href="#">Visit Australia</a></div>
</div>
</li>
This way using css, you can play around with the font sizes too.
Here's the the fiddle http://jsfiddle.net/s2L9P/

I think I solved your problem, but I can't test it because your fiddle doesn't work as you created it.
Change the code from Appends image captions to the DOM with this:
/**
* Appends image captions to the DOM
* NETCreator enhancement (http://www.netcreator.ro)
*/
var appendCaptions = function(){
// cycle through each child
slider.children.each(function(index){
// get the image title attribute
var title = $(this).find('img:first').attr('title');
var nc_subtitle = $(this).find('img:first').attr('nc-subtitle');
// append the caption
if (title != undefined && ('' + title).length && nc_subtitle != undefined && ('' + nc_subtitle).length) {
$(this).append('<div class="bx-caption"><span class="title">' + title + '</span><br/><span class="nc_subtitle">' + nc_subtitle + '</span></div>');
}
});
}
Now you can add subtitles to your caption titles:
<a href ="page.php">
<img src="http://calindragan.files.wordpress.com/2011/01/winter.jpg" title="title 1 here" nc-subtitle="The second title"/>
</a>
You can style the subtitle as you want to, using the CSS class nc_subtitle.
Hope it helps!
EDIT
Change the entire JavaScript shared by you in fiddle with this:
http://pastebin.com/0fvUezg1
And the HTML with this:
http://pastebin.com/T038drDV
It works.

Is it possible to add html inside a title attribute?

Is there a way to put actual html code inside a title attribute on a table row element? My goal is to pop-up not only text but some info-graphics along with it, so a mouseover event thats not a modal would be great. Am I going in the wrong direction?
This table is already using jquery datatables but I don't believe it can do that sort of event.
<tr title='This activity will be open to registration on April 31st' >
.....
</tr>

Nope. You'd need to create your own title substitute with JavaScript.

No.
HTML can't be placed in an attribute.
If the goal is to have a pop-up with rich content, then you need to handle this via javascript. In addition, from an accessibility standpoint, you likely don't want to put that amount of content into the title attribute anyways, so going the JS route is going to solve a few problems for you. Google 'JS Tooltip' for dozens of options.

Native tooltips do not use HTML. jQuery UI tooltips would be very useful here.
Demo: http://jqueryui.com/tooltip/
EDIT: You would need to use the content option to use markup instead of the title attribute.
$(".text")
.tooltip({ content: '<b style="color: red">Tooltip</b> <i>text</i>' });
Here's a Fiddle demonstrating this: http://jsfiddle.net/acbabis/64Q2m/

You can use jquery ui tooltip plugin for showing custom title

There is no direct way to render HTML code written inside a tooltip. However, if you are using jQueryUI (or, if you can) then the code below will show the HTML effect (render) and not the HTML code in the tooltip.
Requirements: jQuery, jQueryUI.js, jQueryUI.css
HTML Code:
<tr data-title='This activity will be open to registration on <b>April 31st</b>'>.....</tr>
JavaScript:
$(function() {
$( document ).tooltip({
items: '[title], [data-title]',
track:true,
content: function(){
var element = $( this );
if ( element.is( "[title]" ) ) {
return element.attr( "title" );
}
if ( element.is( "[data-title]" ) ) {
return element.attr( "data-title" );
}
}
});
});

Instead of focusing on the title attribute, enclose a popup message with tags inside the target <td></td> (table data element). Then put a class in that td to control the div with CSS, hiding it first, then making its contents visible when the mouse hovers over the specific table data element. Something like this:
<tr><td class="info-tooltip">This activity will be open to registration on April 31st <div>[ *the contents you would want to popup here* ]</div></td></tr>
Your CSS then might be something like:
td.info-tooltip div {
display:none;
}
td.info-tooltip:hover {
position:relative;
cursor:pointer;
}
td.info-tooltip:hover div {
position:absolute; /* this will let you align the popup with flexibility */
top: 0px; /* change this depending on how far from the top you want it to align */
left: 0px; /* change this depending on how far from the left you want it align */
display:block;
width: 500px; /* give this your own width */
}

Using Bootstrap Tooltips one can do the following
<span title="Some <b>bold words</b>" data-toggle='tooltip' data-html='true'>this has an html supported tooltip</span>
for me it happens automatically but you might need to trigger it with javascript.
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
docs

I think a good option is to put that content inside a data attribute, something like this:
<div data-tooltip="Some information I want to show">
Actual content
</div>
And then, write a simple jQuery plugin that shows that content inside an element upon hover over.

Changing IMG SRC with Javascript

I'm new at javascript and while there are many more complex solutions, I don't understand them and hope I don't have to at this point.
I have a main picture...
<img src="main-picture.jpg" name="Mainpic" id="image">
...and I want to be able to change this picture when I click on one of two thumbnails.
<img src="replacement1.jpg" name="pic1">
<img src="replacement2.jpg" name="pic2">
My javascript code I thought would be super easy. I'm currently using...
function FirstPic(){
document.Mainpic.src = document.pic1.src
return
}
function SecPic(){
document.Mainpic.src = document.pic2.src
return
}
Now the variable is changing however it's not staying changed. When the thumbnail is clicked on, the replacement picture flashes on the screen and then it returns to the original main-picture.jpg.
How do I make the change permanent until a different thumbnail is clicked?
Thanks!

I think it's flipping back because your page is reloading.
You need to return false from your onclick= if you don't want the href= value to activate after your onclick.
Also, you can set href="#" just in case. # goes nowhere (doesn't ever reload the page)

I think your page is refreshing by your click, change your links as :
<img src="replacement1.jpg" name="pic1">
<img src="replacement2.jpg" name="pic2">

Why not do something like this (haven't checked the syntax completly, so it could be faulty.
function FirstPic()
{
var pic1 = document.getElementById("pic1");
if (pic1 == typeof('undefined')) return;
pic1.src = "newpicname.jpg";
}
Make sure you give the tags an ID attribute called pic1 and pic2 (instead of a name attribute) and give the image itself an 'onclick' attribute...
<img onclick='FirstPic()' id='pic1' src='image1.jpg' />