Get child element contents in an array from class name in javascript - javascript

I need to get all img src from the class "photo-grid-item".
<a href="/photo/CIJXEU9VRY" class="photo-grid-item">
<img src="someimage.jpg" width="420" height="280" alt="man woman">
</a>
<a href="/photo/125255" class="photo-grid-item">
<img src="another.jpg" width="420" height="280" alt="man woman">
</a>
I have tried
Array.from(document.querySelectorAll(".photo-grid-item")).filter(el=>el.nextElementSibling.src)
What I need is
[someimage.jpg,another.jpg]

const resultArray = [];
const photoGridItems = document.querySelectorAll('.photo-grid-item');
photoGridItems.forEach(photoGridItem => {
let photoGridItemImage = photoGridItem.querySelector('img');
resultArray.push(photoGridItemImage.src)
})
console.log(resultArray)
<a href="/photo/CIJXEU9VRY" class="photo-grid-item">
<img src="someimage.jpg" width="420" height="280" alt="man woman">
</a>
<a href="/photo/125255" class="photo-grid-item">
<img src="another.jpg" width="420" height="280" alt="man woman">
</a>

Related

How to add src into the iframe after clicking on the button using jQuery?

I want to add a link from data-embed into iframe as an src but it's not working. Please help me I'm new to jQuery. Here is my code;
function initPlaylist() {
const videoIframe = document.querySelector('#iframe-embed');
const videoItems = document.querySelectorAll('.vid-item');
videoIframe.src = window.atob(videoItems[0].getAttribute('data-embed'));
for (var i = 0; i < videoItems.length; i++) {
videoItems[i].addEventListener("click", function(event) {
videoIframe.src = window.atob(event.target.getAttribute('data-embed'));
$(this).addClass('selected').siblings().removeClass('selected');
});
$(videoItems).first().addClass('selected');
}
}(jQuery);
<div id="player-wrap">
<div class="responsive-vid">
<iframe allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" marginheight="0" marginwidth="0" scrolling="no" frameborder="0" height="350px" id="iframe-embed" width="100%" target="_blank"></iframe>
<div class="playlist-wrap">
<div class="video-list">
<a class="vid-item" data-embed="https://asianhdplay.net/streaming.php?id=MzU1ODc0&title=Miracle+of+Love+%282022%29+episode+17&typesub=SUB">Episode 01</a>
<a class="vid-item" data-embed="https://asianhdplay.net/streaming.php?id=MzU1ODc0&title=Miracle+of+Love+%282022%29+episode+17&typesub=SUB">Episode 02</a>
<a class="vid-item" data-embed="https://asianhdplay.net/streaming.php?id=MzU1ODc0&title=Miracle+of+Love+%282022%29+episode+17&typesub=SUB">Episode 03</a>
<a class="vid-item" data-embed="https://asianhdplay.net/streaming.php?id=MzU1ODc0&title=Miracle+of+Love+%282022%29+episode+17&typesub=SUB">Episode 04</a>
<a class="vid-item" data-embed="https://asianhdplay.net/streaming.php?id=MzU1ODc0&title5=Miracle+of+Love+%282022%29+episode+17&typesub=SUB">Episode 05</a>
<a class="vid-item" data-embed="https://asianhdplay.net/streaming.php?id=MzU1ODc0&title=Miracle+of+Love+%282022%29+episode+17&typesub=SUB">Episode 06</a>
</div>
</div>
</div>
enter image description here
you could do something like this
$(".vid-item").on('click', function() {
$("#iframe-embed").attr('src', $(this).attr('data-embed'));
//or
$("#iframe-embed").attr('src', $(this).data('embed'));
//or
$("#iframe-embed").prop('src', $(this).prop('data-embed'));
})

Why are my googleMaps not stacking like a gallery and lining up next to each other instead?

I want to create a gallery of googlemaps and use previous and next buttons to cycle through them.
However, instead of being in one after the other in a gallery they just appear next to each other in a row.
Html:
<div class="maps-gallery">
<iframe class ="maps-list active" src= [link] width="750" height="400" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
<iframe class ="maps-list" src= [link] width="750" height="400" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
<iframe class ="maps-list" src= [link] width="750" height="400" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
<div class="buttons">
<button disabled="" class="button prev">Prev</button>
<button class="button next">Next</button>
</div>
JavaScript:
const prevButton = document.querySelector('.prev')
const nextButton = document.querySelector('.next')
const mapsList = document.querySelectorAll('.maps-list')
let currentlySelected = 0;
prevButton.addEventListener('click', function() {
mapsList[currentlySelected].classList.remove("active");
currentlySelected--;
mapsList[currentlySelected].classList.add("active");
nextButton.disabled = false;
if (currentlySelected === 0){
prevButton.disabled=true
}
});
nextButton.addEventListener('click', function() {
mapsList[currentlySelected].classList.remove("active");
currentlySelected++;
mapsList[currentlySelected].classList.add('active')
prevButton.disabled = false;
if (mapsList.length === currentlySelected + 1) {
nextButton.disabled = true
}
});

sorting array of images by value in ascending order

cardShop is a div with children -> (images with different ID's and values)
every card value looks like this 2000,500 or this 1500,200
I want to sort the images by value in ascending order by the first number in the array.
The function is called by the blue button in the right corner.
Here is what I have done so far.
HTML DOC
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="script.js"></script>
<style>
#toSort{
background-color: #3b5998;
width:50px;
height:50px;
float:right;
}</style>
</head>
<body>
<div id = "cardShop" style="overflow:scroll">
<div id ="toSort" onclick="sorting()"></div>
<img id="card" height="400" width="250" src="./cardImages/blueEyes.jpg" value = 3000,2500>
<img id="card2" height="400" width="250" src="./cardImages/blue.jpg" value = 1400,1200>
<img id="card3" height="400" width="250" src="./cardImages/orange.jpg" value = 1200,700>
<img id="card4" height="400" width="250" src="./cardImages/blackDrag.jpg" value = 3200,2500>
<img id="card5" height="400" width="250" src="./cardImages/spider.jpg" value = 2500,2100>
<img id="card6" height="400" width="250" src="./cardImages/dark.jpg" value = 2500,2100>
<img id="card7" height="400" width="250" src="./cardImages/grill.jpg" value = 2000,1700>
<img id="card8" height="400" width="250" src="./cardImages/gaia.jpg" value = 2300,2100>
<img id="card9" height="400" width="250" src="./cardImages/redEyes.jpg" value = 2400,2000>
<img id="card10" height="400" width="250" src="./cardImages/flamee.jpg" value = 1800,1600>
<img id="card11" height="400" width="250" src="./cardImages/curse.jpg" value = 2800,2200>
<img id="card12" height="400" width="250" src="./cardImages/tripple.jpg" value = 4500,3800>
</div>
</body>
</html>
JavaScript file
function sorting() {
let deck = [].slice.call(document.getElementById("cardShop").children)
for (let i = 2; i < deck.length; i++) {
let elementValue = deck[i].getAttribute('value').split(",").map(Number);
}
}
const sorting = () => {
const images = document.getElementsByTagName('img');
const deck = [].slice.call(images);
const container = document.getElementById('cardShop');
const deckSorted = deck.sort((a, b) => {
const aToSort = a.getAttribute('value').split(',')[0];
const bToSort = b.getAttribute('value').split(',')[0];
return aToSort - bToSort;
});
for(let i = 0; i < deck.length; i++) {
deck[i].parentNode.removeChild(deck[i]);
container.append(deckSorted[i]);
}
}
<div id="cardShop" style="overflow:scroll">
<div id ="toSort" onclick="sorting()">Sort</div>
<img id="card" height="400" width="250" src="./cardImages/blueEyes.jpg" value = 3000,2500>
<img id="card2" height="400" width="250" src="./cardImages/blue.jpg" value = 1400,1200>
<img id="card3" height="400" width="250" src="./cardImages/orange.jpg" value = 1200,700>
<img id="card4" height="400" width="250" src="./cardImages/blackDrag.jpg" value = 3200,2500>
<img id="card5" height="400" width="250" src="./cardImages/spider.jpg" value = 2500,2100>
<img id="card6" height="400" width="250" src="./cardImages/dark.jpg" value = 2500,2100>
<img id="card7" height="400" width="250" src="./cardImages/grill.jpg" value = 2000,1700>
<img id="card8" height="400" width="250" src="./cardImages/gaia.jpg" value = 2300,2100>
<img id="card9" height="400" width="250" src="./cardImages/redEyes.jpg" value = 2400,2000>
<img id="card10" height="400" width="250" src="./cardImages/flamee.jpg" value = 1800,1600>
<img id="card11" height="400" width="250" src="./cardImages/curse.jpg" value = 2800,2200>
<img id="card12" height="400" width="250" src="./cardImages/tripple.jpg" value = 4500,3800>
</div>
You can do it using sort and after that just remove the old element and append the new element, like this.
You are on the right track,I finished the code for you.
The code pushes all the images to an array with json elements that contains the element and the value (the left one). It then sorts them in the right order, removes all the images and inserts them again in the correct order.
Working example:
https://playcode.io/537993
function sorting() {
let deck = [].slice.call(document.getElementById("cardShop").children)
let images = []
let button = document.getElementById('toSort');
for (let i = 1; i < deck.length; i++) {
let elementValue = deck[i].getAttribute('value').split(",").map(Number);
// add all values to a array with json info about the element
images.push({
'element': deck[i],
'value': elementValue[0]
});
}
// sort them on the value
images.sort((a, b) => {
return a.value - b.value;
})
// remove all elements in the div
document.getElementById('cardShop').innerHTML = '';
// add the button again
document.getElementById('cardShop').appendChild(button);
// Add the images again
images.forEach(image => {
document.getElementById('cardShop').appendChild(image.element)
})
}
const setup = () => {
const toSort = document.querySelector('#toSort');
toSort.addEventListener('click', sorting);
};
const sorting = () => {
let cardShop = document.querySelector('#cardShop');
let dek = [...cardShop.querySelectorAll('img')]
.sort((a,b) => {
let valuesA = a.getAttribute('value').split(',');
let valuesB = b.getAttribute('value').split(',');
let comparer = valuesA[0].localeCompare(valuesB[0]);
if(comparer === 0)
comparer = valuesA[1].localeCompare(valuesB[1]);
return comparer;
})
.map(node=>cardShop.appendChild(node));
};
//load
window.addEventListener('load', setup);
#toSort{
background-color: #3b5998;
width:50px;
height:50px;
float:right;
}
<!DOCTYPE html>
<html lang="en">
<body>
<div id = "cardShop" style="overflow:scroll">
<div id ="toSort"></div>
<img id="card" height="400" width="250" src="./cardImages/blueEyes.jpg" value="3000,2500">
<img id="card2" height="400" width="250" src="./cardImages/blue.jpg" value="1400,1200">
<img id="card3" height="400" width="250" src="./cardImages/orange.jpg" value="1200,700">
<img id="card4" height="400" width="250" src="./cardImages/blackDrag.jpg" value="3200,2500">
<img id="card5" height="400" width="250" src="./cardImages/spider.jpg" value="2500,2100">
<img id="card6" height="400" width="250" src="./cardImages/dark.jpg" value="2500,2100">
<img id="card7" height="400" width="250" src="./cardImages/grill.jpg" value="2000,1700">
<img id="card8" height="400" width="250" src="./cardImages/gaia.jpg" value="2300,2100">
<img id="card9" height="400" width="250" src="./cardImages/redEyes.jpg" value="2400,2000">
<img id="card10" height="400" width="250" src="./cardImages/flamee.jpg" value="1800,1600">
<img id="card11" height="400" width="250" src="./cardImages/curse.jpg" value="2800,2200">
<img id="card12" height="400" width="250" src="./cardImages/tripple.jpg" value="4500,3800">
</div>
</body>
</html>
Your HTML markup was broken. Make sure you refactor it to <img ... value="1200,2500" /> instead of <img ... value=1 200,2500 />, because no Javascript will be able to handle it.
function sorting () {
const imgWrapper = document.getElementById('cardShop')
const deck = [].slice.call(imgWrapper.getElementsByTagName('img'))
deck.sort((currentImage, nextImage) => {
const currentImageValue = parseInt(currentImage.getAttribute('value').split(',')[0])
const nextImageValue = parseInt(nextImage.getAttribute('value').split(',')[0])
return currentImageValue - nextImageValue
})
// at this point the array has been sorted, but not the actual HTML!
console.log(deck)
// optional - if you want to redraw them with the new order in the HTML
const oldImgHTMLCollection = [].slice.call(imgWrapper.getElementsByTagName('img'))
oldImgHTMLCollection.forEach(oldImg => imgWrapper.removeChild(oldImg))
deck.forEach(newImg => imgWrapper.appendChild(newImg))
}
sorting()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="script.js"></script>
<style>
</style>
</head>
<body>
<div id="cardShop" style="overflow:scroll">
<div id="toClose"></div>
<div id="toSort"></div>
<img id="card" height="400" width="250" src="./cardImages/blueEyes.jpg" value="3000,2500">
<img id="card2" height="400" width="250" src="./cardImages/blue.jpg" value="1400,1200">
<img id="card3" height="400" width="250" src="./cardImages/orange.jpg" value="1200,700">
<img id="card4" height="400" width="250" src="./cardImages/blackDrag.jpg" value="3200,2500">
<img id="card5" height="400" width="250" src="./cardImages/spider.jpg" value="2500,2100">
<img id="card6" height="400" width="250" src="./cardImages/dark.jpg" value="2500,2100">
<img id="card7" height="400" width="250" src="./cardImages/grill.jpg" value="2000,1700">
<img id="card8" height="400" width="250" src="./cardImages/gaia.jpg" value="2300,2100">
<img id="card9" height="400" width="250" src="./cardImages/redEyes.jpg" value="2400,2000">
<img id="card10" height="400" width="250" src="./cardImages/flamee.jpg" value="1800,1600">
<img id="card11" height="400" width="250" src="./cardImages/curse.jpg" value="2800,2200">
<img id="card12" height="400" width="250" src="./cardImages/tripple.jpg" value="4500,3800">
</div>
</body>
</html>

Show random content from array

I'm working on a web site that shows random articles in the footer.
Random articles should be 4 and these articles should not be duplicated.
How to make a loop through arrays to make it work.
Here is the code and fiddle for one article I made. Thanks!
FIDDLE: https://jsfiddle.net/3db8Leor/1/
HTML:
<section class="cities">
<a class="city" target="_blank">
<img src="" width="200">
<h2></h2>
</a>
<!--
<a class="city" target="_blank">
<img src="" width="200">
<h2></h2>
</a>
<a class="city" target="_blank">
<img src="" width="200">
<h2></h2>
</a>
<a class="city" target="_blank">
<img src="" width="200">
<h2></h2>
</a>
-->
</section>
JS:
const link = [
'https://www.croatiaweek.com',
'https://www.pinebeach.hr/',
'https://www.dnevnik.hr/',
'https://www.costacruises.com/',
'https://www.zadar.hr/',
'https://www.croatia.hr/'
];
const title = [
'Zagreb - Croatia',
'Pakostane - Croatia',
'Hvar - Croatia',
'Dubrovnik - Croatia',
'Zadar - Croatia',
'Brac - Croatia'
];
const image = [
'https://www.croatiaweek.com/wp-content/uploads/2015/02/KingTomislav.jpg',
'https://www.pinebeach.hr/photos/modul_2/18052017224635_pine-beach-pakostane-0020.jpg',
'https://image.dnevnik.hr/media/images/920x695/Jul2019/61719533.jpg',
'https://www.costacruises.com/content/dam/costa/inventory-assets/ports/DBV/24-DUBROVNIK_2880x1536.jpg.image.750.563.low.jpg',
'https://www.hdz-zadar.hr/public/img/home/3_mobile.png',
'https://s27135.pcdn.co/wp-content/uploads/2019/06/Brac-island-878x585.jpg.optimal.jpg'
];
const random = Math.floor(Math.random() * title.length);
const city = document.querySelector('.city');
city.href = link[random];
city.querySelector('h2').innerHTML = title[random];
city.querySelector('img').src = image[random];
You can first generate an array of unique random numbers, then in each loop you can use the index to set the images like the following way:
const link = [
'https://www.croatiaweek.com',
'https://www.pinebeach.hr/',
'https://www.dnevnik.hr/',
'https://www.costacruises.com/',
'https://www.zadar.hr/',
'https://www.croatia.hr/'
];
const title = [
'Zagreb - Croatia',
'Pakostane - Croatia',
'Hvar - Croatia',
'Dubrovnik - Croatia',
'Zadar - Croatia',
'Brac - Croatia'
];
const image = [
'https://www.croatiaweek.com/wp-content/uploads/2015/02/KingTomislav.jpg',
'https://www.pinebeach.hr/photos/modul_2/18052017224635_pine-beach-pakostane-0020.jpg',
'https://image.dnevnik.hr/media/images/920x695/Jul2019/61719533.jpg',
'https://www.costacruises.com/content/dam/costa/inventory-assets/ports/DBV/24-DUBROVNIK_2880x1536.jpg.image.750.563.low.jpg',
'https://www.hdz-zadar.hr/public/img/home/3_mobile.png',
'https://s27135.pcdn.co/wp-content/uploads/2019/06/Brac-island-878x585.jpg.optimal.jpg'
];
const city = document.querySelectorAll('.city');
var arr = [];
while(arr.length < city.length){
var r = Math.floor(Math.random() * title.length);
if(arr.indexOf(r) === -1) arr.push(r);
}
city.forEach(function(c, i){
c.href = link[arr[i]];
c.querySelector('h2').innerHTML = title[arr[i]];
c.querySelector('img').src = image[arr[i]];
});
<section class="cities">
<a class="city" target="_blank">
<img src="" width="200">
<h2></h2>
</a>
<a class="city" target="_blank">
<img src="" width="200">
<h2></h2>
</a>
<a class="city" target="_blank">
<img src="" width="200">
<h2></h2>
</a>
<a class="city" target="_blank">
<img src="" width="200">
<h2></h2>
</a>
</section>
Since this is a very simple use case where you only need 4 random indices, you can do something like this jsfiddle (updated yours):
https://jsfiddle.net/fceLu5mq/
Basically:
function pickFour(max) {
const indices = [];
while (indices.length < 4) {
const nextRand = Math.floor(Math.random()*max);
if (!indices.includes(nextRand)) {
indices.push(nextRand);
}
}
return indices;
}

Function not loading quickly enough

I have an each function that determines when a link is clicked within an ID. Once the click has happened, it takes the relevant attributes and associates them to the main image.
This functionality can also include a video, so if the html contains an id called #video it takes the video attribute and sticks it in the predefined <video>.
When you first initially load the everything and quickly click on the number 5, the overlay of the elevateZoom happens on top of video. Even thought i have a if statement that determines it.
What would be the best way to overcome this on when a user clicks it very quickly.
Trial it here: http://s.codepen.io/jagmitg/debug/jPXzzz?
Actual codepen: http://codepen.io/jagmitg/pen/jPXzzz
$('#product-gallery-super').children().click(function(e) {
e.preventDefault();
var prodImg = $(this).attr('data-image');
var imgSrc = $(this).children().attr('src')
var vidCheck = false;
var mainImg = $('.main-image');
if (imgSrc != 'http://yi.yoga/images/cs.jpg') {
$(this).addClass("active-thumbnail").siblings().removeClass("active-thumbnail");
if ($(this).attr('id') == 'video') {
$('.main-image').hide();
if (!$('.product-video').hasClass('product-video')) {
var videoLink = $(this).attr('href');
var videoImg = $(this).find('img').attr('src');
var video = '<div class="video-container"> <video class="flat-video product-video" bgcolor="#FFFFFF" id="mainVideo" poster="' + videoImg + '" autoplay autobuffer width="100px" height="100px"> <source src="' + videoLink + '"> <object type="application/x-shockwave-flash" data="http://vjs.zencdn.net/c/video-js.swf" width="100%" height="auto"> <param name="allowfullscreen" value="false"> <param name="allowscriptaccess" value="always"> <param name="flashvars" value="file=' + videoLink + '"> <!--[if IE]><param name="movie" value="http://vjs.zencdn.net/c/video-js.swf"><![endif]--> <img src="' + videoImg + '" width="100%" height="auto" alt="Video"></object> </video> <span class="playPause icon-play off"></span> <div class="controls-bar off"> <div class="duration"> <div class="duration-amount"></div> </div> </div> <div class="top-controls-bar off"> <div class="info"> </div> </div> </div>';
$('.container').prepend(video);
// START VIDEO FUNCTION videoInitate();
}
} else {
mainDestroy()
$('.video-container').remove();
$('.main-image').show();
$('.main-image').attr('src', prodImg);
$('.product-zoom').elevateZoom({
cursor: 'pointer',
zoomType: "window",
zoomWindowFadeIn: 500,
zoomWindowFadeOut: 750,
responsive: true,
borderSize: 1,
borderColour: '#DDDDDD',
lensBorder: 1,
lensSize: 200,
scrollZoom: false,
zoomWindowFadeOut: 1,
});
}
}
});
function mainDestroy() {
$('.zoomContainer').remove();
$('.product-zoom').removeData('elevateZoom');
$('.product-zoom').removeData('zoomImage');
}
.active-thumbnail {
display: inline-block;
border: 1px solid black;
}
#product-gallery-super img {
width: 61px;
height: 79px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<div class="container">
<img class="main-image image-resize product-zoom" src="http://placehold.it/300x400?text=1" data-zoom-image="http://placehold.it/1000x2000?text=1" onerror="comingSoonMain(this)">
<div id="product-gallery-super">
<a href="#" class="product-zoom-gallery active-thumbnail" data-image="http://placehold.it/300x400?text=1">
<img src="http://placehold.it/61x79?text=1">
</a>
<a href="#" class="product-zoom-gallery" data-image="http://placehold.it/300x400?text=2">
<img src="http://yi.yoga/images/cs.jpg">
</a>
<a href="#" class="product-zoom-gallery" data-image="http://placehold.it/300x400?text=3">
<img src="http://placehold.it/61x79?text=3">
</a>
<a href="#" class="product-zoom-gallery" data-image="http://placehold.it/300x400?text=4">
<img src="http://placehold.it/61x79?text=4">
</a>
<a href="http://simplypx.com/images/Prometheus.mp4" id="video" class="product-zoom-gallery" data-image="http://placehold.it/300x400?text=VID">
<img src="http://placehold.it/61x79?text=5">
</a>
<a href="#" class="product-zoom-gallery" data-image="http://placehold.it/300x400?text=6">
<img src="http://placehold.it/61x79?text=6">
</a>
</div>
</div>

Categories