Develop Reference

How can I fix this photo gallery?

I created or tried to make a Photo Gallery on one of my web pages. It worked perfectly at first, but when the "Show more images" button is clicked, it changes the logo and doesn't show the other added images. (See pictures below). How can I avoid the logo changing and show the rest of the photos?
I really will appreciate if somebody can help me to find the error. Thanks!
Here's the html code:
<h1 class="headings1">ABOUT US</h1>
<article>
<div id="leftarrow">
<p><</p>
</div>
<figure id="fig2">
<img class="about" width="360" height="202" />
</figure>
<figure id="fig3">
<img class="about" width="480" height="270" />
</figure>
<figure id="fig4">
<img class="about" width="360" height="202" />
</figure>
<div id="rightarrow">
<p>></p>
</div>
<div id="fiveButton">
<p>Show more images</p>
</div>
</article>
Here's javascript code:
"use strict"; // interpret document contents in JavaScript strict mode
/* global variables */
var photoOrder = [1,2,3,4,5];
var figureCount = 3;
/* add src values to img elements based on order specified on photoOrder array */
function populateFigures() {
var filename;
var currentFig;
if (figureCount === 3){
for (var i = 1; i < 4; i++) {
filename = "images/about_0" + photoOrder[i] + "sm.jpg";
currentFig = document.getElementsByClassName("about") [i - 1];
currentFig.src = filename;
}
} else {
for (var i = 0; i < 5; i++) {
filename = "image/about_0" + photoOrder[i] + "sm.jpg";
currentFig = document.getElementsByClassName("about")[1];
currentFig.src = filename;
}
}
}
/* shift all images one figure to the left, and change values in photoOrder array to match */
function rightArrow() {
for (var i = 0; i < 5; i++) {
if ((photoOrder[i] + 1) === 6) {
photoOrder[i] = 1;
} else {
photoOrder[i] += 1;
}
populateFigures();
}
}
/* shift all images one figure to the right, and change values in photoOrder array to match */
function leftArrow() {
for (var i = 0; i < 5; i++) {
if ((photoOrder[i] - 1) === 0) {
photoOrder[i] = 5;
} else {
photoOrder[i] -= 1;
}
populateFigures();
}
}
/* switch to 5-images */
function previewFive() {
//create figure and img elements for fifth image
var articleEl = document.getElementsByTagName("article")[0];
var lastFigure = document.createElement("figure");
lastFigure.id = "fig5";
lastFigure.style.zIndex = "5";
lastFigure.style.position = "absolute";
lastFigure.style.right = "45px"
lastFigure.style.top = "67px";
var lastImage = document.createElement("img");
lastImage.classList = "about";
lastImage.width = "240";
lastImage.height = "135"
lastFigure.appendChild(lastImage);
// articleEl.appendChild(lastFigure);
articleEl.insertBefore(lastFigure, document.getElementById("rightarrow"));
//clone figure element for fifth image and edit to be first image
var firstFigure = lastFigure.cloneNode(true);
firstFigure.id = "fig1";
firstFigure.style.right = "";
firstFigure.style.left = "45px";
// articleEl.appendChild(firstFigure);
articleEl.insertBefore(firstFigure, document.getElementById("fig2"));
//add appropiate src values to two img elements
document.getElementsByTagName("img")[0].src = "images/about_0" + photoOrder[0] + "sm.jpg";
document.getElementsByTagName("img")[4].src = "images/about_0" + photoOrder[4] + "sm.jpg";
figureCount = 5;
//change button to hide extra images
var numberButton = document.querySelector("#fiveButton p");
numberButton.innerHTML = "Show fewer images";
if (numberButton.addEventListener) {
numberButton.removeEventListener("click", previewFive, false);
numberButton.addEventListener("click", previewThree, false);
} else if (numberButton.attachEvent) {
numberButton.detachEvent("onclick", previewFive);
numberButton.attachEvent("onclick", previewThree);
}
}
/* switch to 3-image layout */
function previewThree() {
var articleEl = document.getElementsByTagName("article") [0];
var numberButton = document.querySelector("#fiveButton p");
articleEl.removeChild(document.getElementById("fig1"));
articleEl.removeChild(document.getElementById("fig5"));
figureCount = 3;
numberButton.innerHTML = "Show more images";
if (numberButton.addEventListener) {
numberButton.removeEventListener("click", previewThree, false);
numberButton.addEventListener("click", previewFive, false);
} else if (numberButton.attachEvent) {
numberButton.detachEvent("onclick", previewThree);
numberButton.attachEvent("onclick", previewFive);
}
}
/* Create event listener for left arrow, right arrow and center figure element */
function createEventListeners() {
var leftarrow = document.getElementById("leftarrow");
if (leftarrow.addEventListener) {
leftarrow.addEventListener("click", leftArrow, false);
} else if (leftarrow.attachEvent) {
leftarrow.attachEvent("onclick", leftArrow);
}
var rightarrow = document.getElementById("rightarrow");
if (rightarrow.addEventListener) {
rightarrow.addEventListener("click", rightArrow, false);
}else if (rightarrow.attachEvent) {
rightarrow.attachEvent("onclick", rightArrow);
}
var mainFig = document.getElementsByTagName("img")[1];
if (mainFig.addEventListener) {
mainFig.addEventListener("click", zoomFig, false);
} else if (mainFig.attachEvent) {
mainFig.attachEvent("onclick", zoomFig);
}
var showAllButton = document.querySelector("#fiveButton p");
if (showAllButton.addEventListener) {
showAllButton.addEventListener("click", previewFive, false);
}else if (showAllButton.attachEvent) {
showAllButton.attachEvent("onclick", previewFive);
}
}
/* open center figure in separate window */
function zoomFig() {
var propertyWidth = 960;
var propertyHeight = 600;
var winLeft = ((screen.width - propertyWidth) / 2);
var winTop = ((screen.height - propertyHeight) / 2);
var winOptions = "width = 960, height = 600";
winOptions += ",left=" + winLeft;
winOptions += ",top=" + winTop;
var zoomWindow = window.open("zoom.html", "zoomwin", winOptions);
zoomWindow.focus();
}
/* create event listeners and populate image elements */
function setUpPage() {
createEventListeners();
populateFigures();
}
/* run setUpPage() function when page finishes loading */
if (window.addEventListener) {
window.addEventListener("load", setUpPage, false);
} else if (window.attachEvent) {
window.attachEvent("onload", setUpPage);
}

I have included a tiny library with a constructor called ImgViewer. Admittedly, if you resize the screen vertically, it can be a slight issue, but it's all the time I'm willing to take right now. Hopefully you can learn something from this.
//<![CDATA[
/* js/external.js */
let doc, htm, bod, nav, M, I, mobile, S, Q, hC, aC, rC, tC, ImgViewer; // for use on other loads
addEventListener('load', ()=>{
doc = document; htm = doc.documentElement; bod = doc.body; nav = navigator; M = tag=>doc.createElement(tag); I = id=>doc.getElementById(id); mobile = /Mobi/i.test(nav.userAgent);
S = (selector, within)=>{
let w = within || doc;
return w.querySelector(selector);
}
Q = (selector, within)=>{
let w = within || doc;
return w.querySelectorAll(selector);
}
hC = (node, className)=>{
return node.classList.contains(className);
}
aC = (node, ...classNames)=>{
node.classList.add(...classNames);
return aC;
}
rC = (node, ...classNames)=>{
node.classList.remove(...classNames);
return rC;
}
tC = (node, className)=>{
node.classList.toggle(className);
return tC;
}
ImgViewer = function(imgArray, imgsWide = 3){
if(imgsWide % 2 === 0){
throw new Error('imgsWide must be odd number');
}
this.container = M('div'); this.leftArrow = M('div'); this.view = M('div');
this.rightArrow = M('div'); this.container.className = 'imgViewer';
this.view.className = 'view';
this.leftArrow.className = this.rightArrow.className = 'arrow';
this.leftArrow.textContent = '<'; this.rightArrow.textContent = '>';
this.container.appendChild(this.leftArrow); this.container.appendChild(this.view); this.container.appendChild(this.rightArrow);
const center = Math.floor(imgsWide/2), iA = [], imA = imgArray.slice();
this.size = ()=>{
const b = this.view.getBoundingClientRect(), w = b.width/imgsWide-40;
for(let i=0,l=iA.length; i<l; i++){
iA[i].width = i === center ? w+50 : w;
}
return this;
}
this.create = (where = bod)=>{ // default document.body
where.appendChild(this.container);
const v = this.view, b = v.getBoundingClientRect(), w = b.width/imgsWide-40;
for(let i=0,m,l=imgArray.length; i<l; i++){
m = M('img');
m.width = i === center ? w+50 : w;
m.src = imgArray[i]; iA.push(m); // cache all the images
if(i < imgsWide){
if(i === center){
// add a click event to center if you want - I did not
}
else if(i < center){
m.onclick = ()=>{
for(let n=i; n<center; n++){
this.rightArrow.onclick();
}
}
}
else{
m.onclick = ()=>{
for(let n=i; n<imgsWide; n++){
this.leftArrow.onclick();
}
}
}
v.appendChild(m);
}
}
const c = v.children;
const dispImgs = ()=>{
for(let n=0; n<imgsWide; n++){
c[n].src = imA[n];
}
}
this.leftArrow.onclick = ()=>{
imA.push(imA.shift()); dispImgs();
}
this.rightArrow.onclick = ()=>{
imA.unshift(imA.pop()); dispImgs();
}
onresize = this.size;
return this;
}
}
// tiny library above - magic below can be put on another page using a load Event except `}); // end load` line
const imgURLs = [
'https://images.freeimages.com/images/large-previews/afa/black-jaguar-1402097.jpg',
'https://images.freeimages.com/images/large-previews/7e9/ladybird-1367182.jpg',
'https://images.freeimages.com/images/large-previews/535/natural-wonders-1400924.jpg',
'https://images.freeimages.com/images/large-previews/035/young-golden-retriever-1404848.jpg',
'https://images.freeimages.com/images/large-previews/981/cow-1380252.jpg',
'https://images.freeimages.com/images/large-previews/9fc/yet-another-flower-1399208.jpg',
'https://images.freeimages.com/images/large-previews/72c/fox-1522156.jpg',
'https://images.freeimages.com/images/large-previews/e2a/boise-downtown-1387405.jpg',
'https://images.freeimages.com/images/large-previews/f37/cloudy-scotland-1392088.jpg'
];
const imgV = new ImgViewer(imgURLs);
imgV.create();
}); // end load
//]]>
/* css/external.css */
*{ /* size font individually to avoid font whitespace */
box-sizing:border-box; font-size:0; margin:0; padding:0; overflow:hidden;
}
html,body{
width:100%; height:100%;
} /* below is what you need to see - above is set for this example */
.imgViewer{
width:100%; height:100%;
}
.imgViewer,.imgViewer *{
display:flex; justify-content:center; align-items:center;
}
.imgViewer>.arrow{
cursor:pointer; width:32px; height:70px; background:#777; color:#fff; font:bold 14px san-serif;
}
.imgViewer>.view{
width:calc(100% - 32px); height:100%;
}
.imgViewer>.view>img{
cursor:pointer; margin:0 7px; box-shadow:1px 1px 2px;
}
.imgViewer>.view>img:first-child{
margin-left:0;
}
.imgViewer>.view>img:last-child{
margin-right:0;
}
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1, user-scalable=no' />
<title>ImgViewer</title>
<link type='text/css' rel='stylesheet' href='css/external.css' />
<script src='js/external.js'></script>
</head>
<body>
</body>
</html>
Of course, I didn't make the dummy window for zooming, but you can ask another question for that!

Can´t populate table with video frame

Whenever i insert a video it appears a black frame instead of a frame from the video.
The js function "handleFiles" validates if the file inserted is a video. Then creates a video element that after is loaded takes a snap from the video after 10s using canvas. Then with that snap attach the image to the table along with the name of the file
var Video = ['m4v', 'avi','mpg','mp4', 'webm', 'mov', 'mxf'];
var NameFile = [];
function handleFiles() {
"use strict";
var inputElement = document.getElementById("input");
var fileList = inputElement.files; /* now you can work with the file list */
for(var k = 0; k < fileList.length; k++){
NameFile.push(fileList[k].name);
}
for( var j=0; j<100; j++){
for(var i = 0; i < fileList.length; i++){
// VIDEOS
if(fileList[i].type === "video/"+Video[j]){
var video = document.createElement('video');
var timeupdate = function() {
if (snapImage()) {
video.removeEventListener('timeupdate', timeupdate);
video.pause();
}
};
video.addEventListener('loadeddata', function() {
if (snapImage()) {
video.removeEventListener('timeupdate', timeupdate);
}
});
var snapImage = function() {
var canvas = document.createElement('canvas');
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
var image = canvas.toDataURL();
var success = image.length > 100000;
if (success) {
var img = document.createElement('img');
img.src = image;
document.getElementsByTagName('div')[0].appendChild(img);
}
return success;
};
video.addEventListener('timeupdate', timeupdate);
video.preload = 'metadata';
video.src=(window.URL.createObjectURL(fileList[i]).replace('blob:',''));
// Load video in Safari / IE11
video.muted = true;
video.playsInline = true;
video.play();
// Table for Videos
for( var lV=0; lV<100; lV++ ){
// if for name
if(fileList[i].name===NameFile[lV]){
var Vx = document.createElement("Table");
Vx.setAttribute("id", "galeriaV" + (i));
document.body.appendChild(Vx);
// imagens of videos
var VImg = document.createElement("tr");
VImg.setAttribute("id", "VTr" +(i));
document.getElementById("galeriaV" +(i)).appendChild(VImg);
var ImgV = document.createElement("td");
var imagV =document.createElement("img");
imagV.src = snapImage;
imagV.height = 50;
imagV.with = 50;
imagV.setAttribute("id", "imageID" +(i));
imagV.setAttribute("className", "bordered");
imagV.setAttribute("src","http://placehold.it/200/200/pink/black");
imagV.setAttribute("onclick","imgClick(this)");
ImgV.appendChild(imagV);
document.getElementById("VTr" + (i)).appendChild(ImgV);
// files names
var yV = document.createElement("tr");
yV.setAttribute("id", "VNTr" + (i));
document.getElementById("galeriaV" +(i)).appendChild(yV);
var Vz = document.createElement("td");
var Vt = document.createTextNode(NameFile[lV]);
Vz.appendChild(Vt);
document.getElementById("VNTr" + (i)).appendChild(Vz);
}// fim if name
}
}
}
}
}
<!doctype html>
<html><head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script src="../JS/galeria.js"> </script>
<script src="../JS/XML.js"> </script>
<title>Preview images</title>
<style>
input{
display: inline-block;
float: left;
width:100%;
}
table{
margin-top: 10px;
border: 0px solid #ddd;
padding: 8px;
display: inline-block;
text-align: left;
}
table.tr{
width: 50px;
height: 50px;
}
img.bordered{
border: 3px solid green;
}
</style>
</head>
<body>
<h2>Upload images ...</h2>
<input type="file" id="input" multiple onchange="handleFiles(this.files)">
</body>
</html>
The snippet gives an error at the img Click function is not defined but thats not the problem

Dynamicaly change images at once Vanila javascript

On the background, I have four different images and I want those img dynamically change for example every two seconds. I manage to change one img, but how do I change all images at once?
Here is my code:
const im1 = document.getElementById("img-1");
const images = ["images/photo1.png","images/photo2.png","images/photo3.png", "images/photo4.png"];
let index = 0;
function changeImage()
{
im1.setAttribute("src", images[index]);
index++;
if(index >= images.length)
{
index=0;
}
}
setInterval(changeImage, 2000);
I know that I could do something like this: document.getElementbyTagName("img'), but what I should do next?
https://jsfiddle.net/ofqkmwsh/

You need only one img
const img = document.getElementById("img");
const images = [
"//placehold.it/100x100/0bf?text=1",
"//placehold.it/100x100/f0b?text=2",
"//placehold.it/100x100/fb0?text=3",
"//placehold.it/100x100/b0f?text=4",
];
let index = 0;
function changeImage() {
index = ++index % images.length; // Incr. and reset index to 0 if exceeds
img.setAttribute("src", images[index]); // set src attribute
}
setInterval(changeImage, 2000);
<img id="img" src="//placehold.it/100x100/0bf?text=1">
You could also exploit Chrome's ability to transition a background-image:
const img = document.getElementById("img");
const images = [
"//placehold.it/800x600/0bf?text=1",
"//placehold.it/800x600/f0b?text=2",
"//placehold.it/800x600/fb0?text=3",
"//placehold.it/800x600/b0f?text=4",
];
const n = images.length;
let c = 0;
images.forEach(src => new Image().src = src); // Preload images
const changeImage = () => img.style.backgroundImage = "url('"+ images[c++ % n] +"')";
changeImage(); // Init!
setInterval(changeImage, 2000);
#img {
height: 50vh;
background: red none 50% 50% / cover no-repeat;
transition: 0.8s;
}
<div id="img"></div>
If you have multiple galleries you could do something like:
const Gallery = (id, time) => {
const gal = document.getElementById(id);
const images = gal.getAttribute("data-images").split(",").map(img => img.trim());
const n = images.length;
let c = 0;
images.forEach(src => new Image().src = src); // Preload images
const changeImage = () => gal.style.backgroundImage = `url(${images[c++ % n]})`;
changeImage(); // Init!
setInterval(changeImage, time);
};
Gallery("Gallery-1", 2000);
Gallery("Gallery-2", 3000);
.Gallery {
float: left;
width: 25%;
height: 100px;
background: transparent none 50% 50% / cover no-repeat;
transition: 0.8s;
}
<div class="Gallery" id="Gallery-1" data-images="
//placehold.it/800x600/0bf?text=1,
//placehold.it/800x600/f0b?text=2,
//placehold.it/800x600/fb0?text=3,
//placehold.it/800x600/b0f?text=4
"></div>
<div class="Gallery" id="Gallery-2" data-images="
//placehold.it/800x600/83a?text=1,
//placehold.it/800x600/a38?text=2,
//placehold.it/800x600/3a8?text=3,
//placehold.it/800x600/38a?text=4
"></div>

I have made a Image Slider but want to add text to it each slide

I am learning javascript. I have made a image slider but want to add text to each slide I have 5 images just want to add the text to each slide and it be in the middle and centre from top to bottom. Thanks guys
var i = 0;
var images = [];
var time = 3250;
// Image List
images[0] = 'http://lorempixel.com/300/200';
images[1] = 'http://placehold.it/300x200';
images[2] = 'http://lorempixel.com/300/200';
images[3] = 'http://placehold.it/300x200';
images[4] = 'http://lorempixel.com/300/200';
// Change Image
function changeImg(){
document.slide.src = images[i];
if (i < images.length - 1) {
i++;
} else {
i = 0;
}
setTimeout("changeImg()", time);
}
window.onload = changeImg;
* {margin:0;padding:0;box-sizing:border-box}
#wrapper {
width: 800px;
height: 400px;
margin: 50px auto;
}
<h1>JS Slider </h1>
<div id="wrapper">
<img name="slide" alt="slide image">
</div>

In order to display unique text per picture, you first have to implement an object that holds these two values:
var images = [];
function appendImage(src, text) {
images.push({
src: src,
text: text
});
}
Then create your 5 images like so:
appendImage('1.jpg', 'Picture 1');
appendImage('2.jpg', 'Picture 2');
appendImage('3.jpg', 'Picture 3');
appendImage('4.jpg', 'Picture 4');
appendImage('5.jpg', 'Picture 5');
Just make sure you have an element that's propely placed (using CSS) to fill with text
<div id="wrapper">
<img name="slide" alt="slide image">
<span id="sliderText"></span>
</div>
The change to your changeImg function will be minor, you just need to consider the new data structure.
var sliderText = document.getElementById('sliderText');
function changeImg(){
document.slide.src = images[i].src;
sliderText.innerHTML = images[i].text;
if (i < images.length - 1) {
i++;
} else {
i = 0;
}
setTimeout("changeImg()", time);
}

You can use javascript objects:
var i = 0;
var images = [];
var time = 3250;
// Image List
images[0] = {
url: 'http://via.placeholder.com/120x120',
caption: '120x120'
};
images[1] = {
url: 'http://via.placeholder.com/130x130',
caption: '130x130'
};
images[2] = {
url: 'http://via.placeholder.com/140x140',
caption: '140x140'
};
images[3] = {
url: 'http://via.placeholder.com/150x150',
caption: '150x150'
};
images[4] = {
url: 'http://via.placeholder.com/160x160',
caption: '160x160'
};
// Change Image
function changeImg() {
document.slide.src = images[i].url;
caption.innerText = images[i].caption;
if (i < images.length - 1) {
i++;
} else {
i = 0;
}
setTimeout("changeImg()", time);
}
window.onload = changeImg;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#wrapper {
width: 800px;
height: 400px;
margin: 50px auto;
}
<h1>JS Slider </h1>
<div id="wrapper">
<img name="slide" alt="slide image">
<div id="caption">2134234</div>
</div>
jsfiddle

using javascript to randomise a image in background

I am trying to randomise a image in a background, I am having problems because there is content already in the div
this is what i got so far
<div class="welcome-inner">
<script type="text/javascript">
<!--
var imlocation = "welcome/";
var currentdate = 0;
var image_number = 0;
function ImageArray (n) {
this.length = n;
for (var i =1; i <= n; i++) {
this[i] = ' '
}
}
image = new ImageArray(3)
image[0] = 'background1.jpg'
image[1] = 'background2.jpg'
image[2] = 'background3.jpg'
var rand = 60/image.length
function randomimage() {
currentdate = new Date()
image_number = currentdate.getSeconds()
image_number = Math.floor(image_number/rand)
return(image[image_number])
}
document.write("<img src='" + imlocation + randomimage()+ "'>");
//-->
</script>
CONTENT
</div>
the div welcome-inner already has styling in the css
.row-welcome {
border-bottom: 0;
width: 100%;
margin: 0 auto;
overflow: auto;
margin-top: -20px;
background-position: 50% 50%;
background-size: cover;
border-bottom: 1px solid #1e346a;
}
welcome-inner did have a background image but I removed the line to try to get this to work
The problem I am having is that the images are showing up but pushing my content down.
how do I adapt this to make it work?

You're going to need to set the background-image style (if you're using jQuery this will be easier). So, instead of creating an tag which goes in the normal document flow, something more like this:
$("#welcome-inner").style("background-image", imlocation + randomimage());
And change "#welcome-inner" to whatever the selector is for the DOM element you want to set the background-image on.

I think your entire approach is incorrect. Try using .sort(), like:
var doc = document;
function E(e){
return doc.getElementById(e);
}
function range(least, greatest){
var r = [];
for(var i=0,n=least; n<=greatest; i++,n++){
r[i] = n;
}
return r;
}
var rng = range(1, 3);
rng.sort(function(){
return Math.round(Math.random())-0.5;
});
for(var i in rng){
var img = new Image();
img.src = 'welcome/background"+rng[i]+".jpg';
// If you add an id called pickAnId to your welcome-inner className div then
E('pickAnId').appendChild(img);
}