We Keep Coding

Change image src with event on an other element jquery

I generate procedurally a div containing an image and an input file in an HTML file.
The ID of all the element change by 1 each time. Here is the sample of the div that is repeated with K as the number that is incremented each time I generate this div, so every item has a different ID.
<div>
<img id="frame-add-K" src="" class="img-fluid" />
</div>
<label style="border: 2px solid black" for="img-input-K" class="btn">Select Image</label>
<input type="file" name="image_content_K" id="img-input-K" style="display:none; visibility:hidden;" accept="image/*" />
The div containing the image is supposed to work as a preview. So when the user input his image, I want to change the img source to the newly updated image.
I have tried something like this using jquery:
$(document).ready(function() {
$("input[id^=img-input-]").on("input", function() {
var id_input = $(this).attr('id').substring('img-input-'.length); //get me only the number at the end
$("#frame-add-" + id_input).attr("src", event.target.files[0]);
});
});
But id_input is always egual 1, so the change only affect my first div and change always the first image source. Moreover "event.target.files[0]" doesn't work there.
I ideally would like to make a generic function using jquery that would get the K of the element changed et update the image src associated with this K but I am open to any suggestion solving my issue.

Rather than use any ids, you can select the image which is the child of the div element two before the input.
const theImg = $(this).prev().prev().find("img");

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.

Issue with handling a form using javascript

We have a website hosted at hubspot, we use their native WYSIWYG to design layouts then style them with css and js.
On the homepage http://www.lspatents.com/ it used to have a form under the "Get started here" title, it had around 10 questions, and used javascript to split them to steps so they can fit in the same area on the currently shown blank box.
It was working just fine till two days ago the form disappeared and left it with a blank area as you can see now, and as far as i know no one has touched this code recently.
Here is the js code that was used to manipulate the form
// Hero Form
$(window).load(function() {
// disable autocomplete to fix bug
$('.hero-form form').attr("autocomplete", "off");
$('.hero-form .hs-richtext').each(function() {
$(this).nextUntil('.hs-richtext').wrapAll('<div class="step" />');
});
// Hide Loading icon
$('.hero-form form').css('background', 'none');
$('.hero-form form .step:nth-of-type(2)').show();
// First Step to Second Step
$('.step').find('.hs-richtext').change(function() {
$('.step:nth-of-type(2)').hide().next().next().fadeIn();
});
// Second Step to Third Step
$('.step').find('.hs-input').change(function() {
var names = {};
$(':radio').each(function() {
names[$(this).attr('name')] = true;
});
var count = 0;
$.each(names, function() {
count++;
});
if ($(':radio:checked').length === count) {
$('.step:nth-of-type(4)').hide().next().next().fadeIn();
}
});
});
As far as i was able to tell, the developer used css to hide the whole form area with display:none; and used the js above to split the questions to steps and show a certain number in each step.
You can see the code being called in the footer so there is no problem with the link to the .js file, also if you inspect the element and disable the display:none; that's declared for any of the divs within the hero-form all questions get displayed, so there is no problem with the form either, so why has it stopped working?
Would appreciate any help,

This line will no longer work with your mark-up...
$('.hero-form form .step:nth-of-type(2)').show();
There are a number of additional divs that wrap your mark-up, placed there by react, React has placed a series of div inside your form which are being hidden by your existing CSS (which I assume used to just be a series of STEP's)
The CSS that hides the nodes is :
.hero-form form>div, .hero-form form>.step {
display: none;
}
The nodes that are being hidden with display:none
<div data-reactid=".0.0:$1">
<div class="hs-richtext" data-reactid=".0.0:$1.0">
<hr>
</div>
<div class="step">
<div class="hs_patent field hs-form-field" data-reactid=".0.0:$1.$patent">
<label placeholder="Enter your Do you have a patent?" for="patent-9fc8dd30-a174-43bd-be4a-34bd3a00437e_2496" data-reactid=".0.0:$1.$patent.0">
<span data-reactid=".0.0:$1.$patent.0.0">Do you have a patent?</span>
<span class="hs-form-required" data-reactid=".0.0:$1.$patent.0.1">*</span>
</label>
<div class="hs-field-desc" style="display:none;" data-reactid=".0.0:$1.$patent.1">
</div>
</div>
Your JQuery will add display:block to the DIV with the class 'step' bit wont alter the parent DIV (inserted by React) which still prevents your node from being shown.
You need to alter you JQuery to call show() on the parent() that contains the "step" div you wish to show.

Please check your browser console ans see you have problem loading this form:
https://forms.hubspot.com/embed/v3/form/457238/9fc8dd30-a174-43bd-be4a-34bd3a00437e
and this is the error:
net::ERR_NAME_RESOLUTION_FAILED
It's better you change your DNS to something like 8.8.8.8 and see if the problem still exists or not.

Hide/show 2 div based on jpg button selection

I have a div with text and a separate div with a jpg image on a webpage.
There are 6 (jpg) buttons in different areas on the webpage.
When I select btn1.jpg, I would like text1.html and image1.jpg to load into the 2 div's.
When I select btn2.jpg, I would like text2.html and image2.jpg to replace the content of the div.
When I select btn3.jpg, I would like to have text3.html and image3.jpg load into the div's.
and so forth...
When one initially lands on the page, I would like to have the text and image associated with btn1.jpg loaded in the divs by default.

I've created this jsFiddle http://jsfiddle.net/davew9999/gFHnh/ that should do what you want. I've just done 2 buttons with 2 sets of text and images but you can just add more html buttons, the JavaScript will deal with as many buttons as you like.
Note that no text loads as text1.html and text2.html doesn't exist for me but should work for you. Also I've used some example images from the web just to show it works.
HTML
<button id="button1" class="textImageChanger" data-image="http://www.transformerhair.com/wp-content/uploads/2010/11/test.jpg" data-html="text1.html">Button1</button>
<button class="textImageChanger" data-image="http://upload.wikimedia.org/wikipedia/commons/9/95/KWF_Test.png" data-html="text2.html">Button2</button>
<div id="textDiv"></div>
<div id="imageDiv"><img src=""/></div>
JavaScript
function LoadText(link) {
$("#textDiv").load(link);
}
function LoadImage(image) {
$("#imageDiv img").attr("src", image);
}
$(document).ready(function() {
LoadText("text1.html");
LoadImage($("#button1").data("image"));
$(".textImageChanger").click(function() {
LoadText($(this).data("html"));
LoadImage($(this).data("image"));
});
});
​

Text captions on multiple Images with jQuery

I'm new to jQuery so please be patient. I want to create a text caption that slides down on an image when you hover over a link on the page. I can do this when there's just one image with one caption but I have several images with different captions on one page.
I would like to create one function that can handle all of these in seperate instances and not create a function for each image/textcaption. The reason being is that the images and text is dynamic and changing in quantity overtime.
Please see an example of the code below, the .portText is a class of about 7 instances, when I hover over .moreInfo the text for every image slides down. I understand why this is happening, and I think I need to use ($this) somehow, but I also think i need to connect the picture to the text differently that it's done here. Hope this makes sense. Can anyone help? Cheers!
$(function() {
$('.moreInfo').hover(
function() {
$('.portText').slideDown('slow');
},
function() {
$('.portText').slideUp('slow');
}
)
});

You can refer to the element that was hovered over using $(this).
The way I usually do this is to make portText a child of the moreInfo div:
<div class="moreInfo">
<div class="portText">
....
</div>
</div>
Then instead of just $('.portText') you can do $('.portText', this) (i.e. all portTexts that are children of the hovered element).
Edit: Another way to do it would be to use the data attribute and give each portText an ID:
<div class="moreInfo" data-id="1">....</div>
<div class="portText" id="portText-1">...</div>
Then for Javascript:
$('.moreInfo').hover(
function() {
var myId= "#portText-" + $(this).data('id');
$(myId).slideDown('slow');
},
function() {
var myId= "#portText-" + $(this).data('id');
$(myId).slideUp('slow');
}
);