I would like to control each image I have in my const imgURLArray, if possible via class or id.
If this is only possible via JS, could someone help me or teach me how to do it?
I have created a CodePen to see the infinite gallery in action.
const imgURLArray = [
"url(img1)",
"url(img2)",
"url(img3)",
"url(img4)",
];
Try editing your createImageGrid function to this:
function createImageGrid() {
for(let y = 0; y < rowNum; y++) {
let row = document.createElement("div");
row.className = rowClass;
for(let x = 0; x < imgNum; x++) {
let image = document.createElement("div");
image.className = imageClass;
// This gives it id
image.id = `image${y}-${x}`
row.appendChild(image);
}
document.querySelector(containerSelector).appendChild(row);
// Add the images to our representation
imgRep.push(gsap.utils.toArray(row.querySelectorAll(imageSelector)));
}
rows = document.querySelectorAll(rowSelector),
imgMidIndex = Math.floor(imgNum / 2),
rowMidIndex = Math.floor(rowNum / 2);
}
With that your images will have id of image${ITS_ROW}-${ITS_COLUMN} and you will be able to pinpoint the exact image this way.
Edit
(Based on comment.)
Just replace your function createImageGrid() {} with this one and it will give your images property id that is = image${y}-${x}.
Output shown here:
Related
I want to show 4 random names, but only the last one is displayed on the site. If I use console.log I do see all 4 names.
Does someone know how to fix it?
let playerName = ["Phineas", "Ferb", "Spongebob", "Patrick", "Octo", "Sandy", "Krabs"];
let pCreate = document.createElement('p');
let playerSetup = document.getElementById('playerSetup');
for (let i = 0; i < 4; i++){
let x = Math.random()*playerName.length;
pCreate.innerHTML = playerName[Math.floor(x)];
playerSetup.appendChild(pCreate);
}
<div id="playerSetup"></div>
TY :)
You have to create a new <p> for each one of your players ! Otherwise you're just replacing it
Just move line 2 in the for loop
let playerName = ["Phineas", "Ferb", "Spongebob", "Patrick", "Octo", "Sandy", "Krabs"];
let playerSetup = document.getElementById('playerSetup');
for (let i = 0; i < 4; i++) {
let x = Math.random() * playerName.length;
let pCreate = document.createElement('p');
pCreate.innerHTML = playerName[Math.floor(x)];
playerSetup.appendChild(pCreate);
}
<div id="playerSetup"></div>
You can click "Run code snippet" to see the code in action
I have this project in paperjs:
var url = "http://www.clker.com/cliparts/q/I/s/P/E/3/yellow-umbrella-md.png";
raster = new Raster(url);
raster.rotate(10);
raster.scale(0.4);
var url2 = "https://images.vexels.com/media/users/3/145373/isolated/preview/98721f602aa3fadb040e0a161ab3f966-waterdrop-vislumbrante-vis-o-ilustra--o-by-vexels.png";
secondRaster = new Raster(url);
secondRaster.scale(0.9);
var count = 150;
var symbol = new Symbol(raster);
var secondSymbol = new Symbol(secondRaster);
for (var i = 0; i < count; i++) {
// The center position is a random point in the view:
var center = Point.random() * view.size;
var placedSymbol = symbol.place(center);
placedSymbol.scale(i / count);
}
function onFrame(event) {
// Run through the active layer's children list and change
// the position of the placed symbols:
for (var i = 0; i < count; i++) {
var item = project.activeLayer.children[i];
// Move the item 1/20th of its width to the right. This way
// larger circles move faster than smaller circles:
item.position.y += item.bounds.width / 80;
// If the item has left the view on the right, move it back
// to the left:
if (item.bounds.bottom > view.size.width) {
item.position.y = -item.bounds.width;
}
}
}
The first raster has a symbol works good, but the second can't make it work... I read about to add more than one symbol to project.activeLayer.children but don't work. Even if I do a group of an array with both symbols also don't show up.
I read in a post that symbols can't be added as a group. Being that be true, it should be ok to be added even though isolated...
Anybody had done something similar?
Thank you
There are some mistakes in your code:
The most important one, that make you think that the second raster doesn't work, is that you are creating the second raster with the variable url instead of url2. So both rasters use the same image as source...
You need to place the second symbol like you do with the first one otherwise it will never get rendered.
When iterating through active layer children, make sure to iterate over all children by using project.activeLayer.children.length (as you are placing count * 2 symbols).
When checking for bottom reaching items, use height instead of width.
Here is a sketch demonstrating the solution.
var COUNT = 10;
var raster = new Raster('http://www.clker.com/cliparts/q/I/s/P/E/3/yellow-umbrella-md.png');
raster.rotate(10);
raster.scale(0.4);
var secondRaster = new Raster('https://images.vexels.com/media/users/3/145373/isolated/preview/98721f602aa3fadb040e0a161ab3f966-waterdrop-vislumbrante-vis-o-ilustra--o-by-vexels.png');
secondRaster.scale(0.15);
var symbol = new Symbol(raster);
var secondSymbol = new Symbol(secondRaster);
for (var i = 1; i <= COUNT; i++) {
// first symbol
symbol.place(Point.random() * view.size).scale(i / COUNT);
// second symbol
secondSymbol.place(Point.random() * view.size).scale(i / COUNT);
}
function onFrame(event) {
for (var i = 0; i < project.activeLayer.children.length; i++) {
var item = project.activeLayer.children[i];
item.position.y += item.bounds.height / 80;
if (item.bounds.bottom > view.size.height) {
item.position.y = -item.bounds.height;
}
}
}
I'm trying to randomize a gallery of images. The HTML contains only the images, the idea is to then get the array, shuffle it and add them to divs acting as thumbnails. I took the shuffling code from here (the Durstenfeld version): How to randomize (shuffle) a JavaScript array?
My code:
var pics = document.getElementsByTagName("img");
//the Durstenfeld shuffle
for (m = pics.length - 1; m > 0; m--) {
var k = Math.floor(Math.random() * (m + 1));
var temp = pics[m];
pics[m] = pics[k];
pics[k] = temp;
}
//giving ID to each image and adding them to a thumbnail div
for (e = 0; e < pics.length; e++) {
pics[e].id = e;
var photo = document.getElementById(e);
var parent_section = photo.parentNode;
var new_div = document.createElement("div");
new_div.classList.add("thumbnail");
new_div.appendChild(photo);
parent_section.appendChild(new_div);
}
The thing is, this works perfectly fine in IE, but in all of the other browsers I tried, the images are simply placed in the default order (the order in which they are written in the HTML). The shuffling itself should be correct so I'm sure there's something wrong with my implementation of it, but I can't figure it out.
Your Array isnt an Array. Do this:
var pics = Array.from(document.getElementsByTagName("img"));
So I wrote this javascript to double the images size of all images within all divs of a particular class. Here's what I came up with it.
var lmnts = document.getElementsByTagName('*'), i;
for (i in lmnts) {
if((' ' + lmnts[i].className + ' ').indexOf(' ' + 'ClassName' + ' ') > -1) {
var images = document.lmnts[i].getElementsByTagName('img');
for(var j=0; j<images.length; j++)
{
images[j].height *= 2;
images[j].width *= 2;
}
}
}
However I can't get it to work :(
EDIT: It's a user script. So it doesn't work means, it didn't do what it was supposed to do.
There are no errors in js console.
On debugging, i find that it enters the first loop just once and then fails after the line
var images = document.lmnts[i].getElementsByTagName('img');
EDIT2: It's a userscript to double the image size of all images of class fileThumb in 4chan.org boards.
A major problem would be the var images = document.lmnts[i].getElementsByTagName('img'); line.
the lmnts is a variable and not a property of the document.
It should read var images = lmnts[i].getElementsByTagName('img');
Also, instead of manually looping over all the elements in the DOM and manually testing if the className contains the class you want you could use the document.getElementsByClassName('ClassName') or the more modern document.querySelectorAll('.ClassName'). Using the second method you could also select all images in one go with document.querySelectorAll('.ClassName img').
So all your code could be simplified to
var images = document.querySelectorAll('.ClassName img');
for (var j = 0; j < images.length; j++){
images[j].height *= 2;
images[j].width *= 2;
}
Update (based on comment)
The images on 4chan have a style attribute applied to them that sets the dimensions while the images[j].height sets the attribute height of the image. Unfortunately the style attribute takes precentence and show the values set from the script are not in effect.
You should alter the style attribute like this
var images = document.querySelectorAll('.fileThumb img');
for (var j = 0; j < images.length; j++){
var image = images[j],
initialWidth = parseInt(image.style.width, 10),
initialHeight = parseInt(image.style.height, 10);
image.style.width = (initialWidth * 2) + 'px';
image.style.height= (initialHeight * 2) + 'px';
}
I am trying to iterate over the list and create the rectangle boxes, and on click of each user should be redirected to specific page, though struggling to understand the click handler. Please help me to refine below code, so that it redirects to corresponding url instead of the last one. (I think its my lack of knowledge in JS itself.)
var items = [{'url': 'http://google.com'}, {'url': 'http://stackoverflow.com'}];
var bh = 120;
var bw = 120;
var br = 8;
var start_x = 100;
var start_y = 80;
r = Raphael("holder", 840, 780)
for (var i = 0; i < items.length; i++){
group = r.set()
group.push(r.rect(start_x, start_y, bh, bw, br));
start_x = start_x+200;
group[0].node.onclick = function(){
alert(items[i].url);
};
}
jsFiddle Demo
Above code is kind of version what I am working on and it renders multiple rects on SVG, the problem I am running into is on click of the rect, it returns the last one only.
Thanks.
The problem is that there's one variable called i, and after the loop is over its value is items.length. You need to remember the correct value for each node. Try this:
for (var i = 0; i < items.length; i++){
...
var rect = r.rect(start_x, start_y, bh, bw, br);
rect.node.setAttribute('data-index', i);
group.push(rect);
...
rect.node.onclick = function(event) {
alert(items[event.target.getAttribute('data-index')].url);
};
}