We Keep Coding

JavaScript - img caption to appear/disappear onclick event

I need to have image caption to appear on 1 mouse click and disappear on next click by using JS. I can't figure out why the image caption is not appearing when I click on the image with onclick event and function use on external JS. Sorry if I make any mistake on question as this is my first post on the forum.
HTML
<div id="section1" >
<h1>Pictures from my vacation</h1>`enter code here`
<figure style="float: left;" >
<img src="Photos/p1.jpg" title="Beach" value="hide/show" onclick="showOrHide()">
<figcaption id="showthis" style="visibility: hidden;">Waterton Beach</figcaption>
</figure>
<p>Beautiful and Sunny day at Wateron last year. Taking Ferry to explore around the late and natural beauty surrounded there. It was a beatiful day and beach and small town with full of visitors. Hope to back to this beautiful small town on summer break.
</p>
</div>
JS
function showOrHide() {
if (show=="false") {
document.getElementById("showthis").style.visibility="visible";
show="true";
}
else {
//show is true
document.getElementById("showthis").style.visibility="hidden";
show="false";
}
}

A few things to get you on your way:
I wouldn't use onxyz-attribute-style event handlers. They can only call global functions, passing parameters to them is difficult because of handling text inside JavaScript code inside an HTML attribute, and various other things. I'd use modern event handling like addEventListener.
But if you did want to use an onclick attribute for this, I'd use onclick="showOrHide(this)" (this will refer to the image that this click was on) and then accept an img parameter in the function, rather than using an id to do the lookup.
Boolean values like true and false don't go in quotes.
You don't seem to have declared your show variable anywhere.
I'd use a class rather than directly modifying the style of the element.
So with all that in mind:
"use strict";
document.addEventListener("click", event => {
const img = event.target.closest(".toggle-image");
if (img && img.nextElementSibling.tagName === "FIGCAPTION") {
img.nextElementSibling.classList.toggle("hidden");
}
});
.hidden {
visibility: hidden;
}
<div id="section1">
<h1>Pictures from my vacation</h1>`enter code here`
<figure style="float: left;">
<img src="Photos/p1.jpg" class="toggle-image" title="Beach" value="hide/show">
<figcaption class="hidden">Waterton Beach</figcaption>
</figure>
<p>Beautiful and Sunny day at Wateron last year. Taking Ferry to explore around the late and natural beauty surrounded there. It was a beatiful day and beach and small town with full of visitors. Hope to back to this beautiful small town on summer break.
</p>
</div>
That code uses event delegation by hooking click on the document as a whole and then, when the click occurs, seeing if the click was on an .image-toggle element (or passed through when bubbling). If it did, it looks at the next element after the img to see if it's a figcaption and, if so, toggles a hidden class in the element's class list element to show/hide the caption.
(Those links are to MDN, which is an excellent resource for web programming information.)

I've changed some things.
The html code:
<div id="section1" >
<h1>Pictures from my vacation</h1>`enter code here`
<figure style="float: left;" >
<img id="myImage" src="https://logowik.com/content/uploads/images/526_liverpoolfc.jpg" title="Beach">
<figcaption id="showthis" style="visibility: hidden;">Waterton Beach</figcaption>
</figure>
<p>Beautiful and Sunny day at Wateron last year. Taking Ferry to explore around the late and natural beauty surrounded there. It was a beatiful day and beach and small town with full of visitors. Hope to back to this beautiful small town on summer break.
</p>
I removed the inline onclick property, because it's better to add event listener in the JS like in the code below.
With JS then we add the click listener and we check for the visibility value and we either show or hide it.
The JS code:
const myImage = document.getElementById("myImage")
const caption = document.getElementById("showthis")
myImage.addEventListener("click", () => {
if(caption.style.visibility == "visible") {
caption.style.visibility = "hidden"
} else {
caption.style.visibility = "visible"
}
})
This is doing the toggle functionality. If you want the caption to be over the image, this is a matter of CSS.

Instead of adding a click event to image. Try with adding an event listener to the image.
HTML
<div id="section1">
<h1>Pictures from my vacation</h1>
`enter code here`
<figure style="float: left;">
<img
src="https://images.unsplash.com/photo-1644550805208-54b031553153?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1228&q=80"
title="Beach"
value="hide/show"
class="beach-img"
/>
<figcaption id="showthis" style="visibility: hidden;">
Waterton Beach
</figcaption>
</figure>
<p>
Beautiful and Sunny day at Wateron last year. Taking Ferry to explore
around the late and natural beauty surrounded there. It was a beatiful
day and beach and small town with full of visitors. Hope to back to this
beautiful small town on summer break.
</p>
</div>
JS
let show = false;
const beachImg = document.querySelector(".beach-img")
beachImg.addEventListener("click", function () {
if (show === false) {
console.log("showing");
document.getElementById("showthis").style.visibility = "visible";
show = true;
} else {
//show is true
console.log("hiding");
document.getElementById("showthis").style.visibility = "hidden";
show = false;
}
});
Here's the working example.

If displaying/hiding the caption is only your goal, then try this code. This should work.
<div id="section1" >
<h1>Pictures from my vacation</h1>
<figure style="float: left;" >
<img src="https://picsum.photos/200/300" title="Beach" onclick="showOrHide()">
<figcaption id="showthis" style="visibility: hidden;">Waterton Beach</figcaption>
</figure>
<p>Beautiful and Sunny day at Wateron last year. Taking Ferry to explore around the late and natural beauty surrounded there. It was a beatiful day and beach and small town with full of visitors. Hope to back to this beautiful small town on summer break.
</p>
</div>
Javascript function should be like this.
function showOrHide() {
const visibility = document.getElementById("showthis").style.visibility;
if (visibility == "hidden") {
document.getElementById("showthis").style.visibility = "visible";
} else {
document.getElementById("showthis").style.visibility = "hidden";
}
}
In case you want this javascript function to take care multiple images, you can modify the function like this. and in html on img tag pass the event into function showOrHide(event)
function showOrHide(e) {
const img = e.target;
const figcaption = img.nextElementSibling;
const visibility = figcaption.style.visibility;
if (visibility == "hidden") {
figcaption.style.visibility = "visible";
} else {
figcaption.style.visibility = "hidden";
}
}

If/Else statement not working - only one image button works

I am trying to make it so that I can move between two popup images. Either image pops up correctly.
How can I have both the first and second part of the if/else statement to work (how can the right arrow work in both images)?
Prior research I have conducted includes google searches. Most of the following code has been obtained directly from or help by videos on youtube.
$(function() {
"use strict";
$('.postOneImageOne, .postTwoImageOne, .postTwoImageTwo').click(function () {
var $src=$(this).attr('src');
$('.show').fadeIn();
$('.img-show img').attr('src', $src);
});
$('span').click(function () {
$('.show').fadeOut();
});
$('.next').on('click', function() {
// This loops through each img tag
$('img').each(function(){
// Now you can use $(this) to look at each img tag's class
if ($(this).hasClass('postTwoImageOne')) {
console.log('if works');
var $src2 = $('.postTwoImageTwo').attr('src');
$('.img-show img').attr("src", $src2);
} else if ($(this).hasClass('postTwoImageTwo')) {
console.log('else works');
var $src3 = $('.postTwoImageOne').attr('src');
$('.img-show img').attr('src', $src3);
}
});
});
});
$posts.=
"<div class='container'>
<div class='form'>
<img class='profilePicture' src='P2Includes/monkey2.jpg' alt='profilePicture' >
<h1>$title</h1>
<h2>$$price</h2>
<h3>$user_uid</h3>
<h4>$date</h4>
<textarea readonly rows='9' cols='62'>$content</textarea>
<div class='postImageContainer'>
<img class='postTwoImageOne active' src='P2Includes/purplespace.jpg'
alt='postPicture'>
<img class='postTwoImageTwo' src='P2Includes/puppy.png' alt='postPicture'>
</div>
</div>
</div>
<div class='show'>
<div class='overlay'></div>
<div class='img-show'>
<span>+</span>
<div class='previous' id='previous'>V</div>
<div class='next' id='next'>V</div>
<img src=''>
</div>
</div>";
When I try to move to the next image from the first image by clicking the right arrow, I get "if works else works" seven times in the console and the arrow doesn't work. But when I try to click the next right/next arrow in the second image then I get "if works else works" seven times in the console and the arrow does work. Below the JavaScript I am echoing out $posts in a while loop.

load gif until page is fully load

I want to display a gif image until the website is completely loaded.
Once I click button (onclick=window.open) a new page opened but is blank and the gif is only appearing once the website is loaded.
I want once clicking the button a new page opened and showing immediately the gif and disappear once the page is loaded
Can anyone help me, what I’m doing wrong or what is missing to load the gif when the page is loading? Here is my code, thank you so much
land.php file:
<button type="button"
onClick="window.open('./gremo.cfm ',
toolbar=no,
menubar=no,
scrolling=yes,
scrollbars=yes
')">
</button>
gremo.php file:
<head>
<script type="text/javascript">
function showHide(elementid){
if (document.getElementById(elementid).style.display == 'none'){
document.getElementById(elementid).style.display = '';
} else {
document.getElementById(elementid).style.display = 'none';
}
}
window.onload = function () { reSizeTextarea(); showHide('loadingd'); }
</script>
</head>
<body>
<div id="loadingd" align="center">
<br/><br/><br/><img src="./loading.gif">
</div>
</body>

Note that when you are running locally, resources are loading fast.. very fast
Don't forget to use your developer tools and configure network throttling (to simulate a slower connection). That should simulate a "real" scenario and let you test your code better
Here is a screenshot from chrome... enjoy!

When you have a lot of content, it will take time to load. The image will show and than hide when the onload event happens. Now run it again, the content is cached and loading will take no time at all.
So load time depends on what there is to load/render, how it is loaded, and if it is cached or not.
window.onload = function () {
document.getElementById("loading").remove()
document.querySelector(".content").removeAttribute("hidden")
}
[hidden] {
display: none
}
#loading {
width: 300px;
}
<img id="loading" src="https://media.giphy.com/media/3o7bu8sRnYpTOG1p8k/source.gif" />
<div class="content" hidden>
<img src="http://placekitten.com/200/200" />
<img src="http://placekitten.com/100/100" />
<img src="http://placekitten.com/300/300" />
<img src="http://placekitten.com/400/400" />
<img src="http://placekitten.com/500/500" />
</div>
In your example, you have nothing that takes time to load other than the loading image. So as soon as your image is loaded, the window.onload is triggered. That is why it flashes.
If you want the image to show, you can add some logic saying if I have not been here for X seconds, than wait....
var startTime = new Date()
window.onload = function () {
var loadTime = new Date()
var diff = loadTime - startTime;
if (diff > 5000) {
toggleLoad()
} else {
window.setTimeout(toggleLoad, 5000 - diff)
}
}
function toggleLoad () {
document.getElementById("loading").remove()
document.querySelector(".content").removeAttribute("hidden")
}
[hidden] {
display: none
}
#loading {
width: 300px;
}
<img id="loading" src="https://media.giphy.com/media/3o7bu8sRnYpTOG1p8k/source.gif" />
<div class="content" hidden>
<img src="http://placekitten.com/200/200" />
<img src="http://placekitten.com/100/100" />
<img src="http://placekitten.com/300/300" />
<img src="http://placekitten.com/400/400" />
<img src="http://placekitten.com/500/500" />
</div>
To ensure the loading gif loads fast, on the parent page, you probably want to preload it
var img = new Image()
img.src = "your.gif"

Javascript Image Source Changer

I'm trying to make a simple page that lets me input a name and a photo pops up figured javascript would accomplish that but i'm a javascript newbie and need some help :( here is my code:
<img id="myImg"
src="https:placeholderlink"
width='500'
alt='Not Loaded' onmouseOver="this.width=550" onmouseOut="this.width=500" />
CBName: <input type="text" id="CBName" name="CBNameBox">
<button onclick="myFunction()">Submit</button>
<script>
function CBNameChanger() {
var Source = document.getElementById("CBName").value;
var itemName;
{
document.write(itemName);
}
function myFunction() {
document.getElementById("myImg").src = "https:placeholderlink" + itemName ;
}
}
</script>
as you see i need to code the take my input and add it to the end of the img url
i was trying to make my image enlarge when you hover the mouse over also that works when an img is present but i cant get an image to load and dont know what im doing wrong lol this is hack an slash code i pieced together from google searches
any help at all would be appreciated!

You almost got it, only you had to do is to join both functions and remove the weird document.write between braces.
function CBNameChanger() {
var Source = document.getElementById("CBName").value;
document.getElementById("myImg").src = "http://lorempixel.com/" + Source;
}
#myImg {
width: 50px;
height: 50px;
}
<img id="myImg" src="http://lorempixel.com/" width='500' alt="Not Loaded" onmouseOver="this.width=550" onmouseOut="this.width=500" />
<br> CBName: <input type="text" id="CBName" name="CBNameBox" value="50/50/">
<button onclick="CBNameChanger()">Submit</button>

Slider - How would you make a simple slider?

EDIT: I WANT MY SLIDER TO BE EASY TO YOU AND ONCE A LINK IS CLICKED THE IMAGE THAT CORRELATES WITH LINK SHOWS.
I'm looking to make a really simple "slider" that if you click a link, the img shows that correlates with it. I've been trying to find something for a bit now and things are either too flash or don't suit my needs. This came close: http://jsfiddle.net/bretmorris/ULNa2/7/
I would something a little simpler that can be applied easily to multiple images for different divs.
This is what my code looks like with just a plain img tag to it:
<div id="adobe_content" class="hdiv"><button class="x">X</button>
<img src="images/adobefront.png"><br>
<img src="images/adobeinside.png"><br>
<img src="images/adobeback.png"><br>
<h5>Adobe Brochure</h5>
<p>
I wanted to make something functional and out the box that Adobe might consider giving out. It's clean like their work and sparks interest in opening the brochure with the cut out in the center. The front flap is able to slide into a slot on the right side for a neat logo. They're now more interested in their cloud, but the information is inside is still relevant!
</p>
<b>Programs used: Adobe Illustrator, InDesign and Photoshop.</b>
</div>
The code doesn't work for me because, well I partially don't understand it, and I'm not sure how to make it suit my needs (especially if I got up to multiple images) like correlating with an image.

Perhaps understanding what is going on would maybe get you on the right track, so here is an explanation:
$('a.prev').click(function() {
prevSlide($(this).parents('.slideshow').find('.slides'));
});
//clicking image goes to next slide
$('a.next, .slideshow img').click(function() {
nextSlide($(this).parents('.slideshow').find('.slides'));
});
This part is relatively straightforward, when you click on the previous or next links, call the prevSlide or nextSlide function, passing the collection of slides as an argument.
//initialize show
iniShow();
function iniShow() {
//show first image
$('.slideshow').each(function() {
$(this).find('img:first').fadeIn(500);
})
}
Initialize the slideshow by finding each slideshow on the page and fading in the first image. $(this) refers to the <div class="slideshow"> parent, find all child image tags and take the first, fade that element in (and do it in 500 milliseconds).
function prevSlide($slides) {
$slides.find('img:last').prependTo($slides);
showSlide($slides);
}
function nextSlide($slides) {
$slides.find('img:first').appendTo($slides);
showSlide($slides);
}
The prevSlide and nextSlide functions both rearrange the order of images, this line in particular:
$slides.find('img:first').appendTo($slides);
Is moving the first image to the end of the images, so:
<img src="http://placekitten.com/300/500" width="300" height="500" />
<img src="http://placekitten.com/200/400" width="200" height="400" />
<img src="http://placekitten.com/400/400" width="500" height="400" />
becomes:
<img src="http://placekitten.com/200/400" width="200" height="400" />
<img src="http://placekitten.com/400/400" width="500" height="400" />
<img src="http://placekitten.com/300/500" width="300" height="500" />
$slides.find('img:last').prependTo($slides); does the inverse and moves the last image to the beginning.
function showSlide($slides) {
//hide (reset) all slides
$slides.find('img').hide();
//fade in next slide
$slides.find('img:first').fadeIn(500);
}
Finally, showSlide accepts the collection of images, hides all of them and then fades in the first image (since the collection is reordered each time, the first is a different image).
Now, if you want a link for each image that will display a corresponding image, you could do something as simple as:
<a class="image" data-src="http://placekitten.com/300/500">Kitten 1</a>
<a class="image" data-src="http://placekitten.com/200/400">Kitten 2</a>
<a class="image" data-src="http://placekitten.com/400/500">Kitten 3</a>
<div id="image-container">
<img src="http://placekitten.com/300/500" />
</div>
and something like the following:
$('.image').on('click', function() {
var imageSrc = $(this).data('src');
$('#image-container img').prop('src', imageSrc);
});
Which will update the child image tag of <div id="image-container"> with the data-src attribute value in the clicked link.
http://jsfiddle.net/9sxt6n0t/
Hope this helps.

just a quick function to slide
function slideIt(images , prev , next){
$('.slideshow img:nth-child(1)').show();
var imagesLength = $(images).length;
var i = 1;
$(prev).click(function() {
$(images).hide();
if(i !== 1){
$(images + ':nth-child('+ (i - 1) +')').show();
i--;
}else{
$(images +':nth-child('+imagesLength +')').show();
i = imagesLength;
}
});
//clicking image goes to next slide
$(''+next+','+images+'').on('click',function() {
$(images).hide();
if(i !== imagesLength){
$(images + ':nth-child('+ (i + 1) +')').show();
i++;
}else{
$(images + ':nth-child(1)').show();
i = 1;
}
});
}
and use like that slideIt(Images , prevArrow , nextArrow)
slideIt('.slideshow img','a.prev' , 'a.next');
DEMO HERE