I am attempting to get all of the images with classname of tile into an array called tiles. I've tried a few things but it keeps giving me 0 length arrays/nodelists.
What am I doing wrong?
for(var i =0; i<document.images.length; i++){
var thumb = document.images[i]
if(thumb.className == "tile" && thumb.parentNode.tagName == "A")
tiles.push(thumb);
}
I have also tried
var allInputs = document.getElementsByTagName("img");
for(var i =0; i<allInputs.length; i++){
if(allInputs[i].className == "tile" tiles.push(allInputs[i]);
}
EDIT: Per request, here is all of the HTML code.
<body>
<form id="ct" action="">
<div id="head">
<img src="kgtitle.jpg" alt="Kiddergarden" />
</div>
<div id="menu">
<img src="kgmenu.jpg" alt="" />
</div>
<div id="title">
<img src="ctitle.jpg" alt="Matching Game" />
</div>
<div id="board">
<img src="tile.jpg" class="tile" alt="" />
<img src="tile.jpg" class="tile" alt="" />
<img src="tile.jpg" class="tile" alt="" />
<img src="tile.jpg" class="tile" alt="" />
<br />
<img src="tile.jpg" class="tile" alt="" />
<img src="tile.jpg" class="tile" alt="" />
<img src="tile.jpg" class="tile" alt="" />
<img src="tile.jpg" class="tile" alt="" />
<br />
<img src="tile.jpg" class="tile" alt="" />
<img src="tile.jpg" class="tile" alt="" />
<img src="tile.jpg" class="tile" alt="" />
<img src="tile.jpg" class="tile" alt="" />
<br />
<img src="tile.jpg" class="tile" alt="" />
<img src="tile.jpg" class="tile" alt="" />
<img src="tile.jpg" class="tile" alt="" />
<img src="tile.jpg" class="tile" alt="" />
</div>
<div id="main">
<p>Play the Concentration game! Click the tiles on the left and
match pairs of identical images.
<br /><br />
Click the <b>Reload Tiles</b>
button below to randomize the position of the tiles and play
again.
<br /><br />
Click the <b>Show Tiles</b> button to view the
solution.
</p>
</div>
<div id="controls">
<p>
<input type="button" value="Reload Tiles" id="reload" />
<input type="button" value="Show Tiles" id="showAll" />
</p>
</div>
<address>
Kiddergarden ·
A safe site on the Web for kids and families
</address>
This is the entirety of my javascript code
function addEvent(object, evName, fnName, cap) {
if (object.attachEvent)
object.attachEvent("on" + evName, fnName);
else if (object.addEventListener)
object.addEventListener(evName, fnName, cap);
}
function randomSort(arr) {
arr.sort(function () {
return 0.5 - Math.random();
});
}
function setOpacity(object, value) {
// Apply the opacity value for IE and non-IE browsers
object.style.filter = "alpha(opacity = " + value + ")";
object.style.opacity = value/100;
}
var flipCount = 0;
var firstFlip;
var secondFlip;
addEvent(window, "load", setupTiles(),false);
function setupTiles() {
var tiles = new Array();
alert(document.getElementsByTagName('img').length);
for(var i =0; i<document.getElementsByTagName("img").length; i++){
var thumb = document.getElementsByTagName("img");
thumb = thumb[i];
if(thumb.className == "tile" && thumb.parentNode.tagName == "A")
tiles.push(thumb);
}
var tileImages = new Array(tiles.length);
for(var j = 0; i < tileImages.length/2; j++){
tileImages[j] = new Image("tileimage"+j+".jpg");
}
for(var k = tileImages.length/2; i<tileImages.length;k++){
tileImages[k] = new Image("tileimage"+(i-tileImages.length)+".jpg");
}
randomSort(tileImages);
for(var l =0; i<tiles.length;l++){
tiles[l].image = tileImages[l];
tiles[l].onclick = flipTile;
}
/*document.getElementById("showAll").onclick = function () {
for(var i =0; i<tiles.length;i++){
tiles[i].src = tiles[i].image.src;
}
}
document.getElementById("reload").onclick = function () {
location.reload();
}*/
}
function flipTable(){
if(flipCount == 0){
this.src = this.image.src;
firstFlip = this;
flipCount++;
}
else if(flipCount == 1){
this.src = this.image.src;
secondFlip = this;
flipCount++;
checkTiles();
}
return false;
}
function checkTiles() {
if(firstFlip.image.src != secondFlip.image.src){
flipBack();
}
else{
flipCount=0;
firstFlip.opacity = 0.70;
firstFlip.style.filter = "alpha(opacity= 70)";
firstFlip.onclick = function () {
return false;
}
secondFlip.opacity = 0.70;
secondFlip.style.filter = "alpha(opacity= 70)";
secondFlip.onclick = function () {
return false;
}
}
}
function flipBack() {
firstFlip.src = "tile.jpg";
secondFlip.src = "tile.jpg";
flipCount = 0;
}
your script is fine, I just tested it. it probably returns 0 because you add the script to the top of you file, just make sure you add in the end:
<html>
<body>
<div id="board">
<img src="tile.jpg" class="tile" alt="" />
<img src="tile.jpg" class="tile" alt="" />
<img src="tile.jpg" class="tile" alt="" />
<img src="tile.jpg" class="tile" alt="" />
</div>
</body>
<script>
var tiles = [];
for(var i =0; i<document.images.length; i++){
var thumb = document.images[i]
if(thumb.className == "tile" && thumb.parentNode.tagName == "A")
tiles.push(thumb);
}
alert(tiles.length)
</script>
</html>
At least is the only cause I could find to return 0. Please let me know if it solved your issue.
If you ar importing the script from a different file, just add the import on the end, like this:
<html>
<body>
<div id="board">
<img src="tile.jpg" class="tile" alt="" />
<img src="tile.jpg" class="tile" alt="" />
<img src="tile.jpg" class="tile" alt="" />
<img src="tile.jpg" class="tile" alt="" />
</div>
</body>
<script src="myscript.js"></script>
</html>
a third option is to add your code in a function on document ready listener:
document.addEventListener("DOMContentLoaded", function(event) {
var tiles = [];
for(var i =0; i<document.images.length; i++){
var thumb = document.images[i]
if(thumb.className == "tile" && thumb.parentNode.tagName == "A")
tiles.push(thumb);
}
alert(tiles.length)
});
Related
I am trying to apply this function to multiple projects and I want to not repeat it. How can I do it in Vanilla JS? See the code below.
let slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
let i;
let x = document.getElementsByClassName("slides");
if (n > x.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = x.length
}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex - 1].style.display = "block";
document.getElementsByClassName("pagination")[0].innerText = slideIndex + ' / ' + x.length;
}
<div class="project1">
<div class="pagination"></div>
<div class="imgslide noselect">
<div class="prev" onclick="plusDivs(-1)"></div>
<div class="next" onclick="plusDivs(1)"></div>
<img class="slides" src="img/project-1/Scan-4.jpg">
<!-- <img class="slides" src="img/Scan-8.jpg"> -->
<img class="slides" src="img/project-1/Scan-24.jpg">
<img class="slides" src="img/project-1/Scan-35.jpg">
<img class="slides" src="img/project-1/Scan-39.jpg">
<img class="slides" src="img/project-1/Scan-40.jpg">
</div>
</div>
<div class="project2">
<div class="pagination"></div>
<div class="imgslide noselect">
<div class="prev" onclick="plusDivs(-1)"></div>
<div class="next" onclick="plusDivs(1)"></div>
<img class="slides" src="img/project-1/Scan-41.jpg">
<!-- <img class="slides" src="img/Scan-8.jpg"> -->
<img class="slides" src="img/project-1/Scan-22.jpg">
<img class="slides" src="img/project-1/Scan-33.jpg">
<img class="slides" src="img/project-1/Scan-38.jpg">
<img class="slides" src="img/project-1/Scan-49.jpg">
</div>
</div>
Divs with class project1 and project2 should be separated and the function simply changes image once clicked. I want to apply the same function for multiple projects without re-writing it every time.
Instead of getting all the slides document.getElementsByClassName("slides") you should get the slides of the appropriate project document.getElementById("projectN").getElementsByClassName("slides"). You'll have to change both functions to accept another parameter for specifying the project.
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("slides");
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";
document.getElementById(project).getElementsByClassName("pagination")[0].innerText = index + ' / ' + x.length;
projectIndexes[project] = index;
}
.slides {
display: none;
}
<div id="project1">
<div class="pagination"></div>
<div class="imgslide noselect">
<button class="prev" onclick="plusDivs('project1', -1)">Previous</button>
<button class="next" onclick="plusDivs('project1', 1)">Next</button>
<img class="slides" src="img/project-1/Scan-4.jpg" alt="project1 slide1">
<img class="slides" src="img/project-1/Scan-24.jpg" alt="project1 slide2">
<img class="slides" src="img/project-1/Scan-35.jpg" alt="project1 slide3">
<img class="slides" src="img/project-1/Scan-39.jpg" alt="project1 slide4">
<img class="slides" src="img/project-1/Scan-40.jpg" alt="project1 slide5">
</div>
</div>
<br />
<div id="project2">
<div class="pagination"></div>
<div class="imgslide noselect">
<button class="prev" onclick="plusDivs('project2', -1)">Previous</button>
<button class="next" onclick="plusDivs('project2', 1)">Next</button>
<img class="slides" src="img/project-1/Scan-41.jpg" alt="project2 slide1">
<img class="slides" src="img/project-1/Scan-22.jpg" alt="project2 slide2">
<img class="slides" src="img/project-1/Scan-33.jpg" alt="project2 slide3">
<img class="slides" src="img/project-1/Scan-38.jpg" alt="project2 slide4">
<img class="slides" src="img/project-1/Scan-49.jpg" alt="project2 slide5">
</div>
</div>
I see you have a good answer but I am adding this as an alternative.
I would suggest using a class for a more generic selector to the parent then use that. Note I also added the option here to set a predefined displayed image by using the data-slide-index attribute, then set that to the value of the currently selected image. If that were saved to a cookie for example, you could restore from that also.
You could remove the project1 and project2 classes if you wanted to.
I also used data-direction so that I could remove the click handler from the markup and not really care which button was clicked.
a bit cleaner markup without the event, making it more generic there without the group name need
restore the last viewed/first to view (with cookie addition or from back-end)
used a hidden class and toggled that for the show/hide
used a 0 based internally numbers as arrays are 0 based and makes coding simpler to maintain but added 1 for the display for normal people.
importantly, NO use of global variables
(function setup() {
// add event listener to buttons
let els = document.getElementsByClassName("project-container");
for (let i = 0; i < els.length; i++) {
let prevnext = els[i].getElementsByClassName("prevnext");
for (let p = 0; p < prevnext.length; p++) {
prevnext[p].addEventListener("click", plusMinusDivs, false);
}
//hide/show for each group, avoid this call by adding classes to markup
showImage(els[i]);
}
})();
function plusMinusDivs() {
let parent = this.closest(".project-container");
let slider = this.closest(".imgslide");
let slideIndex = slider.dataset.slideIndex * 1;
let nd = this.dataset.direction * 1;//*1 to avoid parse
slideIndex = slideIndex += nd;
let slides = parent.querySelectorAll(".slides");
if (slideIndex >= slides.length) {
slideIndex = 0;
}
if (slideIndex < 0) {
slideIndex = slides.length - 1;
}
slider.dataset.slideIndex = slideIndex + "";
showImage(parent);
}
function showImage(parent) {
let slides = parent.querySelectorAll(".slides");
let len = slides.length;
for (let s = 0; s < len; s++) {
slides[s].classList.toggle("hidden", true);
}
let slider = parent.querySelector(".imgslide");
let slideIndex = slider.dataset.slideIndex * 1;//*1 to avoid parse
slides[slideIndex].classList.toggle("hidden", false);
let pageText = (slideIndex + 1) + ' / ' + len;
parent.querySelector(".pagination").innerText = pageText;
}
.hidden {
display: none;
}
.prevnext {
background-color: #AAEEDD;
}
<div class="project-container project1">
<div class="pagination"> </div>
<div class="imgslide noselect" data-slide-index="0">
<button class="prevnext prev" data-direction="-1"><<</button>
<button class="prevnext next" data-direction="1">>></button>
<img class="slides" src="img/project-1/Scan-4.jpg" alt="4" />
<img class="slides" src="img/project-1/Scan-24.jpg" alt="24" />
<img class="slides" src="img/project-1/Scan-35.jpg" alt="35" />
<img class="slides" src="img/project-1/Scan-39.jpg" alt="39" />
<img class="slides" src="img/project-1/Scan-40.jpg" alt="40" />
</div>
</div>
<div class="project-container project2">
<div class="pagination"> </div>
<div class="imgslide noselect" data-slide-index="3">
<button class="prevnext prev" data-direction="-1"><<</button>
<button class="prevnext next" data-direction="1">>></button>
<img class="slides" src="img/project-1/Scan-41.jpg" alt="2-41" />
<img class="slides" src="img/project-1/Scan-22.jpg" alt="2-42" />
<img class="slides" src="img/project-1/Scan-33.jpg" alt="2-33" />
<img class="slides" src="img/project-1/Scan-38.jpg" alt="2-38" />
<img class="slides" src="img/project-1/Scan-49.jpg" alt="2-49" />
</div>
</div>
I've been trying since yesterday to do something a bit tricky (I guess).
I'm trying to do exactly what happens here: https://tympanus.net/Development/AnimatedResponsiveImageGrid/index2.html but this script is 8 years old and can't work with newer jQuery, anyway I wanted to redo it by myself.
What I need (well, what the marketing want me to do):
Having a 6 images grid which randomly crossfade to another image, but one by one. They should never repeat themselves.
So far I've done this, but all the crossfade are made 6 by 6. I want to do it, one by one, in a random order.
HTML
<div class="img-bank">
<img style="display:none" src="https://picsum.photos/210?image=0" />
<img style="display:none" src="https://picsum.photos/210?image=11" />
<img style="display:none" src="https://picsum.photos/210?image=21" />
<img style="display:none" src="https://picsum.photos/210?image=31" />
<img style="display:none" src="https://picsum.photos/210?image=41" />
<img style="display:none" src="https://picsum.photos/210?image=51" />
<img style="display:none" src="https://picsum.photos/210?image=61" />
<img style="display:none" src="https://picsum.photos/210?image=71" />
<img style="display:none" src="https://picsum.photos/210?image=81" />
<img style="display:none" src="https://picsum.photos/210?image=91" />
<img style="display:none" src="https://picsum.photos/210?image=101" />
<img style="display:none" src="https://picsum.photos/210?image=111" />
<img style="display:none" src="https://picsum.photos/210?image=121" />
<img style="display:none" src="https://picsum.photos/210?image=131" />
<img style="display:none" src="https://picsum.photos/210?image=141" />
<img style="display:none" src="https://picsum.photos/210?image=151" />
<img style="display:none" src="https://picsum.photos/210?image=161" />
<img style="display:none" src="https://picsum.photos/210?image=171" />
<img style="display:none" src="https://picsum.photos/210?image=181" />
<img style="display:none" src="https://picsum.photos/210?image=191" />
</div>
<div class="container galery">
<div class="row">
<div class="col-4">
<img class="img-fluid" src="https://placekitten.com/210/210?image=1" />
<img style="display:none;" class="img-fluid" src="" />
</div>
<div class="col-4">
<img class="img-fluid" src="https://placekitten.com/210/210?image=2" />
<img style="display:none;" class="img-fluid" src="" />
</div>
<div class="col-4">
<img class="img-fluid" src="https://placekitten.com/210/210?image=3" />
<img style="display:none;" class="img-fluid" src="" />
</div>
<div class="col-4">
<img class="img-fluid" src="https://placekitten.com/210/210?image=4" />
<img style="display:none;" class="img-fluid" src="" />
</div>
<div class="col-4">
<img class="img-fluid" src="https://placekitten.com/210/210?image=5" />
<img style="display:none;" class="img-fluid" src="" />
</div>
<div class="col-4">
<img class="img-fluid" src="https://placekitten.com/210/210?image=6" />
<img style="display:none;" class="img-fluid" src="" />
</div>
</div>
</div>
JS
$( document ).ready(function() {
var ids = [];
function initArray() {
$(".img-bank img").each(function() {
ids.push($(this).attr("src"));
})
}
function randomArray() {
// copie du tableau d'ids car il va etre modifié
var tempIds = ids.slice();
// init du tableau de resultat
var myIds = [];
for (var i = 0; i < 6; i++) {
// Recupere un int random
var randomId = (Math.floor(Math.random() * tempIds.length) + 1);
// Recupere la valeur random
var myId = tempIds[randomId - 1];
// Ajout de la valeur random au tableau de resultat
myIds.push(myId);
// Recupere l'index de la valeur random pour la suppression
var pos = tempIds.indexOf(myId);
// Suppression de la valeur choisie pour eviter de retomber dessus
tempIds.splice(pos, 1);
}
return myIds;
}
initArray();
function changeSrc() {
var result = randomArray();
$(".galery img:hidden").each(function(index) {
$(this).attr("src", result[index]);
});
$(".galery img").fadeToggle(1500);
}
setInterval(function() {
changeSrc();
}, 2000);
});
LESS
.galery {
margin-top: 30px;
.row > div {
position:relative;
height: 240px;
width: 240px;
img {
position: absolute;
top: 0;
left: 15;
}
}
}
https://jsfiddle.net/N_3G/ju0comn2/
Can someone help me with this please?
You can select a cell col-4 at random, then apply the logic to only the 2x img in that cell.
Without changing too much of your existing code, change to:
var cells = $(".galery .col-4");
var randomId = (Math.floor(Math.random() * cells.length));
var cell = cells.eq(randomId);
cell.find("img:hidden").each(function(index) {
$(this).attr("src", result[index]);
});
cell.find("img").fadeToggle(1500);
Updated fiddle: https://jsfiddle.net/ju0comn2/1/
Due to the nature of Math.random() you will notice it runs the same images in the same order - seed the random. You'll also get the same image replacing with the same image.
For a rudimentary fix for duplicated images, check if any of the visible images have the same src as the new src:
var result = randomArray();
var cells = $(".galery .col-4");
var randomId = (Math.floor(Math.random() * cells.length));
var newsrc = result[0];
if ($(".galery img[src='" + newsrc + "']:visible").length > 0) {
changeSrc();
}
else {
var cell = cells.eq(randomId);
cell.find("img:hidden").each(function(index) {
$(this).attr("src", result[index]);
});
cell.find("img").fadeToggle(1500);
}
This could be handled with a while loop to keep getting randomIds, but as long as you have more images than panels, the recursive call is unlikely to stack overflow.
Updated fiddle: https://jsfiddle.net/ju0comn2/2/
I have a page with several divs, containing image with link, which I want to become from unclickable to clickable based on the date.
For example - I have 5 divs for 5 days (01.03.2016, 02.03.2016, 03.03.2016, 04.03.2016, 05.03.2016). Inside these divs I have image with link.
on 01.03.2016 - only div 1 to be clickable, all others not
on 02.03.2016 - only div1 and div2 to be clickable, all other not
and etc...
on 05.03.2016 - all five divs to be clickable
Thank you in advance
var divs = document.getElementsByClassName("date");
for (i = 0 ; i < divs.length ; i++) {
divs[i].style.pointerEvents = 'none';
}
for (i = 0 ; i < divs.length ; i++) {
var divDate = divs[i].id.split('.');
var date = new Date(divDate[2], divDate[1] - 1, divDate[0]);
if (date <= new Date()) {
divs[i].style.pointerEvents = 'auto';
}
}
<div class="date" id="01.03.2016">01.03.2016 <img src="images/image1.jpg" alt="Google Image" width="138" height="138" class="img_rounded" /></div>
<div class="date" id="02.03.2016">02.03.2016 <img src="images/image1.jpg" alt="Google Image" width="138" height="138" class="img_rounded" /></div>
<div class="date" id="03.03.2016">03.03.2016 <img src="images/image1.jpg" alt="Google Image" width="138" height="138" class="img_rounded" /></div>
<div class="date" id="04.03.2016">04.03.2016 <img src="images/image1.jpg" alt="Google Image" width="138" height="138" class="img_rounded" /></div>
<div class="date" id="09.03.2016">09.03.2016 <img src="images/image1.jpg" alt="Google Image" width="138" height="138" class="img_rounded" /></div>
I would use date comparison. Perhaps something like that:
HTML
<div class="date">01.03.2016</div>
<div class="date">02.03.2016</div>
<div class="date">03.03.2016</div>
<div class="date">04.03.2016</div>
<div class="date">05.03.2016</div>
JavaScript:
var elms = document.getElementsByClassName("date");
for (var i = 0 ; i < elms.length ; i++)
{
var el = elms[i];
var dmy = el.innerHTML.split('.');
var date = new Date(dmy[2], dmy[1] - 1, dmy[0]);
if (date <= new Date()) {
el.style.backgroundColor = "yellow";
el.onclick = function () {
alert("you clicked on " + this.innerHTML)
};
}
}
DEMO
Here's a JSFiddle
HTML
<div class="date" id="First">01.03.2016</div>
<div class="date all" id="Second">02.03.2016</div>
<div class="date all three two" id="Third">03.03.2016</div>
<div class="date all three two one" id="Fourth">04.03.2016</div>
<div class="date all three two one zero" id="Fifth">05.03.2016</div>
In JQuery Disable the click
$("#First").click(function(){
$(".all ").off('click');
}
$("#Second").click(function(){
$(".three ")off('click');
}
$("#Third").click(function(){
$(".two")off('click');
}
$("#Fourth").click(function(){
$(".one").off('click');
}
$("#Fifth").click(function(){
$(".zero")off('click');
}
OR In JQuery Disable the div
$("#First").click(function(){
$(".date").removeAttr('disabled','disabled');
$(".all ").attr('disabled','disabled');
}
$("#Second").click(function(){
$(".date").removeAttr('disabled','disabled');
$(".three ").attr('disabled','disabled');
}
$("#Third").click(function(){
$(".date").removeAttr('disabled','disabled');
$(".two").attr('disabled','disabled');
}
$("#Fourth").click(function(){
$(".date").removeAttr('disabled','disabled');
$(".one").attr('disabled','disabled');
}
$("#Fifth").click(function(){
$(".date").removeAttr('disabled','disabled');
$(".zero").attr('disabled','disabled');
}
I have this 3x3 img gallery. I need all of them to change every certain time with JS.
So far I managed to do this to one of the images. I don't know how to target them all.
<script>
var images = ["http://lorempixel.com/250/200/", "http://lorempixel.com/250/150/"];
var i = 0;
var renew = setInterval(function(){
if(images.length == i){
i = 0;
}
else {
document.getElementByClassName('galleryItem').src = images[i];
i++;
}
},1000);
</script>
<div class="galleryWrapper">
<div class="galleryItem item1">
<img id="image1" src="http://lorempixel.com/250/200/" alt="picture1">
</div>
<div class="galleryItem item2">
<img id="image2" src="http://lorempixel.com/250/200/" alt="picture2">
</div>
<div class="galleryItem item3">
<img id="image3" src="http://lorempixel.com/250/200/" alt="picture3">
</div>
<div class="galleryItem item4">
<img id="image4" src="http://lorempixel.com/250/200/" alt="picture4">
</div>
<div class="galleryItem item5">
<img id="image5" src="http://lorempixel.com/250/200/" alt="picture5">
</div>
<div class="galleryItem item6">
<img id="image6" src="http://lorempixel.com/250/200/" alt="picture6">
</div>
<div class="galleryItem item7">
<img id="image7" src="http://lorempixel.com/250/200/" alt="picture7">
</div>
<div class="galleryItem item8">
<img id="image8" src="http://lorempixel.com/250/200/" alt="picture8">
</div>
<div class="galleryItem item9">
<img id="image9" src="http://lorempixel.com/250/200/" alt="picture9">
</div>
</div>
I don't know JS at all so don't be too harsh.
Thanks in advance.
Remove the onload from your body element (Using DOMContentLoaded event instead it is less intrusive).
var imageList = ["http://lorempixel.com/250/200/", "http://lorempixel.com/250/150/"],
imageListCounter = 0,
imageEls;
function swapImages() {
var i = 0, len = imageEls.length;
for (i = 0; i < len; i++) {
imageEls[i].src = imageList[imageListCounter];
}
imageListCounter++;
if (imageListCounter > imageList.length - 1) {
imageListCounter = 0;
}
}
document.addEventListener('DOMContentLoaded', function(event) {
imageEls = document.querySelectorAll('.galleryItem img');
setInterval(swapImages, 1000);
});
What we are doing here is:
on document ready store all the image elements in imageEls
then start a timer, calling swapImages every 1 second
swapImages iterates over images and changes the .src to what is in the next one in imageList
when the imageListCounter reaches the end of imageList it resets to 0
So the complete html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Gallery</title>
<link rel="stylesheet" href="style.css">
<script>
var imageList = ["http://lorempixel.com/250/200/", "http://lorempixel.com/250/150/"],
imageListCounter = 0,
imageEls;
function swapImages() {
var i = 0, len = imageEls.length;
for (i = 0; i < len; i++) {
imageEls[i].src = imageList[imageListCounter];
}
imageListCounter++;
if (imageListCounter > imageList.length - 1) {
imageListCounter = 0;
}
}
document.addEventListener('DOMContentLoaded', function(event) {
imageEls = document.querySelectorAll('.galleryItem img');
setInterval(swapImages, 1000);
});
</script>
</head>
<body>
<div class="galleryWrapper">
<div class="galleryItem item1">
<img src="http://lorempixel.com/250/200/" alt="picture1">
</div>
<div class="galleryItem item2">
<img src="http://lorempixel.com/250/200/" alt="picture2">
</div>
<div class="galleryItem item3">
<img src="http://lorempixel.com/250/200/" alt="picture3">
</div>
<div class="galleryItem item4">
<img src="http://lorempixel.com/250/200/" alt="picture4">
</div>
<div class="galleryItem item5">
<img src="http://lorempixel.com/250/200/" alt="picture5">
</div>
<div class="galleryItem item6">
<img src="http://lorempixel.com/250/200/" alt="picture6">
</div>
<div class="galleryItem item7">
<img src="http://lorempixel.com/250/200/" alt="picture7">
</div>
<div class="galleryItem item8">
<img src="http://lorempixel.com/250/200/" alt="picture8">
</div>
<div class="galleryItem item9">
<img src="http://lorempixel.com/250/200/" alt="picture9">
</div>
</div>
</body>
</html>
Where you set the image name to image1, you can just change to 'image'+i+''
document.getElementById('image'+i+'').src = images[i];
for (var e = 1; e < 10; e++)
{
var ImgID = 'image' + e;
document.getElementById(ImgID).src = images[i];
}
If you were using jquery you could just do a foreach on all the img elements. but the above will work. if you have 9 images with the ID of image1, image2, image3... you get the idea.
write this code in your else block
var imgs = document.getElementsByTagName('img');
for(j=0;j<imgs.length;j++){
imgs[j].src = images[i];
}
i++;
instead of this
document.getElementByClassName('gallery').src = images[i];
i++;
Give all your images a class attribute with the same value.
assuming you use the value "imagetags", replace your document.getElementById() line with the following:
var elements = document.GetElementsByClassName("imagetags");
for (var elem in elements){
elements[elem].src = images[i];
}
I have this HTML:
<div class="page-loading-wrapper">
<div style="width: 168px" class="slide-content">
<div class="loading-panel" style="background-color: #dddddd; height: 120px; position: relative">
<div class="loading-text"><span class="loading-number">0</span>%</div>
<div class="loading-load">LOADING</div>
</div>
<img src="images/shkeer-loading.png" width="168" height="91" alt="" />
</div>
<div class="loading-bottom-line"></div>
</div>
<div id="maximage">
<div>
<img src="images/bg/bg.jpg" width="1580" height="889" alt="" />
</div>
<div>
<img src="images/bg/bg2.jpg" width="1352" height="748" alt="" />
</div>
<div>
<img src="images/bg/bg3.jpg" width="1285" height="803" alt="" />
</div>
<div>
<img src="images/bg/bg4.jpg" width="1290" height="807" alt="" />
</div>
<div>
<img src="images/bg/bg5.jpg" width="1295" height="921" alt="" />
</div>
<div>
<img src="images/bg/bg6.jpg" width="1280" height="750" alt="" />
</div>
<div>
<img src="images/bg/bg7.jpg" width="1280" height="750" alt="" />
</div>
</div>
and this Javascript code:
$('#maximage').maximage({
onImagesLoaded: function() {
$(".page-loading-wrapper").slideUp("slow");
},
cycleOptions: {
fx:'scrollHorz',
autostopCount: 1,
autostop: 1
}
});
and this code for loading:
function changeLoading() {
var height = parseInt($(".loading-panel").height()) + 5;
$(".loading-panel").css("height", height + "px");
if ( height == 325) {
clearInterval(t);
var t2 = setInterval(changeNum, 110);
}
}
function changeNum() {
var n = parseInt($(".loading-number").html()) + 1;
$(".loading-number").html(n);
if ( n == 100) {
clearInterval(t2);
}
}
var t = setInterval(changeLoading, 10);
I'm using MaxCycle (Fullscreen Slideshow for use with jQuery Cycle Plugin)
and I'm trying to display loading bar while loading all images because they're very big about 150kb for each image.
Demo
My loading bar is not fully functional as you can see. it just count until MaxCycle is loaded
onImagesLoaded: function() {
$(".page-loading-wrapper").slideUp("slow");
}
So how I can make this loading works 100% specially the percent number, to check each image is loaded or not?
Thank you very much.