We Keep Coding

How to display attached images(uploaded via lightning-formatted-rich-text) in a modal

im trying to display images that are uploaded into a modal shown below:
<template iterator:thefield={images}>
<template if:true={imagesAttached}>
<div class="slds-file slds-file_card slds-float_right" key={thefield.value.apiName} style="width: 15rem">
<div class="slds-grid slds-gutters">
<div class="slds-col slds-p-horizontal_medium">
<span>
<div class="slds-file slds-file_card slds-float_right" style="width: 15rem">
<figure>
<img src={images} alt="Description of the image" />
</figure>
</div>
</span>
</div>
</div>
</div>
</template>
</template>
I have a function that takes the image and put it in an array.
getImages(string) {
const imgRex = /<img .*?>/g // /<img [^>]*src=['"]([^'"]+)[^>]*>/gi
const images = [];
let img;
while ((img = imgRex.exec(string))) {
images.push(img);
if(images.length > 0){
this.imagesAttached = true;
}
}
return images;
}
I would appreciate the help.
Thank you.

How do I stop this JS 'show and hide' button from revealing the content at first?

Basically, I have 3 images and once the button is clicked it displays those images, however, when the page is loading up, the button is already toggled on and displays the images, once you click on it the images go. So the button works, but it starts off with displaying the contents which is not what I want.
var a;
function show_hide()
{
if(a==1)
{
document.getElementById("image").style.display="inline";
return a=0;
}
else
{
document.getElementById("image").style.display="none";
return a=1;
}
}
<div id="image">
<img class= "tree1" src="img/tree1.jpeg">
<img class= "tree2" src="img/tree2.jpeg">
<img class= "tree3" src="img/roots.jpeg">
</div>
<div>
<button onclick="show_hide()">Click to Reveal</button>
</div>
<script src="showhideelement.js"></script>

You can assign a = 1 and make your div to display none.
HTML:
<div id="image" style="display: none">
<img class= "tree1" src="img/tree1.jpeg">
<img class= "tree2" src="img/tree2.jpeg">
<img class= "tree3" src="img/roots.jpeg">
</div>
<div>
<button onclick="show_hide()">Click to Reveal</button>
</div>
JS:
var a = 1;
function show_hide()
{
if(a==1)
{
document.getElementById("image").style.display="inline";
return a=0;
}
else
{
document.getElementById("image").style.display="none";
return a=1;
}
}

You can use a class to define the style which you can toggle on clicking the button using DOMTokenList.toggle().
Also, I will suggest you to avoid inline event handler.
Demo:
document.querySelector('button').addEventListener('click', show_hide);
function show_hide()
{
document.getElementById("image").classList.toggle('showHide');
}
.showHide{
display: none;
}
<div id="image" class="showHide">
<img class= "tree1" src="img/tree1.jpeg">
<img class= "tree2" src="img/tree2.jpeg">
<img class= "tree3" src="img/roots.jpeg">
</div>
<div>
<button>Click to Reveal</button>
</div>
<script src="showhideelement.js"></script>

That's it just assign the value of 0 to the var before doing anything and call the function. It was that easy. I hope I solved your query you can run this code snippet to check if it works!
Thanks!
var a = 0;
show_hide()
function show_hide()
{
if(a==1)
{
document.getElementById("image").style.display="inline";
return a=0;
}
else
{
document.getElementById("image").style.display="none";
return a=1;
}
}
<div id="image">
<img class= "tree1" src="img/tree1.jpeg">
<img class= "tree2" src="img/tree2.jpeg">
<img class= "tree3" src="img/roots.jpeg">
</div>
<div>
<button onclick="show_hide()">Click to Reveal</button>
</div>
<script src="showhideelement.js"></script>

How can I reset my html image gallery to start with first image after leaving it?

I have a website with multiple image galleries on different parts of the website. When you click on the image of specific gallery it changes to next one of that gallery and so on.
What I am trying to achieve is to reset the previous gallery to image 1 when you start clicking on a different gallery. So when the user goes back to the previous gallery, it would start from the first image.
Code used for the galleries:
let projectIndexes = {
project1: 1,
project2: 1,
}
showDivs("project1", projectIndexes.project1);
showDivs("project2", projectIndexes.project2);
function plusDivs(project, n) {
showDivs(project, projectIndexes[project] += n);
}
function showDivs(project, index) {
let i;
let x = document.getElementById(project).getElementsByClassName("slidess");
if (index > x.length) { index = 1 }
if (index < 1) { index = x.length }
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[index - 1].style.display = "block";
projectIndexes[project] = index;
let elements = document.getElementById(project).querySelector('.imgslide').children;
let imgNames = [];
for (let i = 0; i < elements.length; i++) {
imgNames.push(elements[i].children[0].children[0].alt);
}
}
<div class="slide">
<div class="slide-content">
<div class="nextt" onclick="plusDivs('project1', 1)"></div>
</div>
<div class="image-container container prjct">
<div class="projects" id="project1">
<div class="imgslide noselect">
<div class="content-container slidess">
<div class="style-3 style-3-left">
<img class="imageName" alt="Img" src="">
</div>
<div class="style-3 style-3-middle">
<img class="imageName" alt="Img" src="">
</div>
<div class="style-3 style-3-right">
<img class="imageName" alt="Img" src="">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="slide-content">
<div class="nextt" onclick="plusDivs('project2', 1)"></div>
</div>
<div class="image-container container prjct">
<div class="projects" id="project2">
<div class="imgslide noselect">
<div class="content-container slidess">
<div class="style-3 style-3-left">
<img class="imageName" alt="Img" src="">
</div>
<div class="style-3 style-3-middle">
<img class="imageName" alt="Img" src="">
</div>
<div class="style-3 style-3-right">
<img class="imageName" alt="Img" src="">
</div>
</div>
<!-- <div class="img-name"></div> -->
</div>
</div>
</div>
</div>
I know a way to force show the first element, but it turns out it does that for all projects.
What I was not able to find is a way to recognise when clicking on a new project, that the previous and only previous project needs to reset to first image.
I have been struggling with this for a while now and cannot make it work, so any help would be highly appreciated. And if something is not clear, let me know and I will clarify things.

If I'm following you correctly, the following should do it.
function resetPriorGalleries(currentProject) {
var projectDivs = document.getElementsByClassName("projects");
for (let i = 0; i < projectDivs.length; i++) {
if (projectDivs[i].id === currentProject)
return;
showDivs(projectDivs[1].id, 1);
}
}
The best place to call it would probably be in the onclicks.
onclick="plusDivs('project2', 1); resetPriorGalleries('project2');"

Javascript function to rotate some div elements on page

I have some javascript function - shows me a popup with some texts. I try to rotate two "section" elements, but if I add to HTML one more section with class custom, the page shows only first element. Please, help me to add 1-2 more elements and to rotate it. The idea is to have 2 or more elements with class custom and to show it in random order, after last to stop. Thanks.
setInterval(function () {
$(".custom").stop().slideToggle('slow');
}, 2000);
$(".custom-close").click(function () {
$(".custom-social-proof").stop().slideToggle('slow');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="custom">
<div class="custom-notification">
<div class="custom-notification-container">
<div class="custom-notification-image-wrapper">
<img src="checkbox.png">
</div>
<div class="custom-notification-content-wrapper">
<p class="custom-notification-content">
Some Text
</p>
</div>
</div>
<div class="custom-close"></div>
</div>
</section>

Set section display none of page load instead of first section. Check below code of second section:
<section class="custom" style=" display:none">
<div class="custom-notification">
<div class="custom-notification-container">
<div class="custom-notification-image-wrapper">
<img src="checkbox.png">
</div>
<div class="custom-notification-content-wrapper">
<p class="custom-notification-content">
Mario<br>si kupi <b>2</b> matraka
<small>predi 1 chas</small>
</p>
</div>
</div>
<div class="custom-close"></div>
</div>
</section>
And you need to make modification in your jQuery code as below:
setInterval(function () {
var sectionShown = 0;
var sectionNotShown = 0;
$(".custom").each(function(i){
if ($(this).css("display") == "block") {
sectionShown = 1;
$(this).slideToggle('slow');
} else {
if (sectionShown == 1) {
$(this).slideToggle('slow');
sectionShown = 0;
sectionNotShown = 1;
}
}
});
if (sectionNotShown == 0) {
$(".custom:first").slideToggle('slow');
}
}, 2000);
Hope it helps you.

Jquery fade in, fade out some elements together

I need to fade out and fade in some child elements in <div> like in Toni Almeida'a answer:
Fade in and out image
<div class="display" id="slideshow">
<a class="slice" href="myUrl1">
<div class="caption">Some text1...</div>
<img src="AnyUrl1" width="360" height="300"/>
</a>
<a class="slice" href="myUrl2">
<div class="caption">Some text2...</div>
<img src="AnyUrl2" width="360" height="300"/>
</a>
<a class="slice" href="myUrl3">
<div class="caption">Some text3...</div>
<img src="AnyUrl3" width="360" height="300"/>
</a>
.......
</div>
How should I edit the code in that answer?

Here is my js code modified to work with your html:
var count = 1;
setInterval(function() {
count = ($("#slideshow").find(".slice:nth-child("+count+")").fadeOut().next().length == 0) ? 1 : count+1;
$("#slideshow").find(".slice:nth-child("+count+")").fadeIn();
}, 2000);
Fiddle: http://jsfiddle.net/HewAd/

var count = 1;
var $slideShow = $("#slideshow");
var $prevSlice;
var $nextSlice;
setInterval(function() {
$prevSlice = $slideShow.find(".slice:nth-child("+count+")");
count = ($prevSlice.next().length == 0) ? 1 : count+1;
$nextSlice = $slideShow.find(".slice:nth-child("+count+")");
$prevSlice.fadeOut();
$nextSlice.fadeIn();
}, 2000);
Here is a fiddle: http://jsfiddle.net/KA4Zq/308/
Is it correct?