Javascript function not reachable after settimeout - javascript

I have designed following code snippet:
<div id="content">
<h3>Select Images Below</h3>
<ul id="imagegallery">
<li>
<a class='a' href="./img/team/t1.jpg" title="The crowd goes wild" onclick="">
<img src="./img/team/t1.jpg" height="50px" width="50px" alt="the band in concert" />
</a>
</li>
<li>
<a class='a' href="./img/team/t2.jpg" title="An atmospheric moment">
<img src="./img/team/t2.jpg" height="50px" width="50px" alt="the bassist" />
</a>
</li>
<li>
<a class='a' href="./img/team/t3.jpg" title="Rocking out">
<img id='image' src="./img/team/t3.jpg" height="50px" width="50px" alt="the guitarist" />
</a>
</li>
<li>
<a class='a'href="./img/team/t4.jpg" title="Encore! Encore!">
<img id='image' src="./img/team/t4.jpg" height="50px" width="50px" alt="the audience" />
</a>
</li>
</ul>
<div>
<img id='placeholder', src="./img/resources/neutral_1.jpg", height="450px" width="550px" alt="Image gooes here", style="margin-bottom: 50px;padding: 10px;">
</div>
<div id="loading">
<img src="img/loading.gif" alt="">
</div>
<div id="show">
<h1 id ='h'>It works</h1>
</div>
</div>
and the JS for this code is something like this
window.onload = function() {
var links = document.getElementsByClassName('a');
for (var i = 0; i < links.length; i++) {
links[i].addEventListener('click', function(e) {
// Hide results
document.getElementById('placeholder').style.display = 'none';
// Show loader
document.getElementById('loading').style.display = 'block';
setTimeout(showpic(this), 2000);
e.preventDefault();
});
}
function showPic(whichpic) {
document.getElementById('placeholder').style.display = 'block';
var source = whichpic.getAttribute('href');
var placeholder = document.getElementById('placeholder');
placeholder.setAttribute('src', source);
return false;
}
};
I am trying to show the clicked image in the placeholder below,reading the source from href of a tags and assigning it to src of placeholder, but the problem I am facing is that showpic is never called/reached. how should i modify my code to resolve this problem. I click the image, loader appears and then image loads in browser window

This is not correct
setTimeout(showpic(this), 2000);
You should pass a function to setTimeout but you are calling it and actually passing some result of one's execution. You should do like this, for example
setTimeout(() => showpic(this), 2000);
You have a typo. You declare your function as showPic but call it as showpic

Correct showpic(this) to () => showpic(this).Your call to the showPic function is misspelled. Also your showPicfunction does not need to be wrapped inside of your window.onload function. Your JS should look like this and it should work:
window.onload = function() {
var links = document.getElementsByClassName('a');
for (var i = 0; i < links.length; i++) {
links[i].addEventListener('click', function(e) {
// Hide results
document.getElementById('placeholder').style.display = 'none';
// Show loader
document.getElementById('loading').style.display = 'block';
setTimeout(() => showPic(this), 2000);
e.preventDefault();
});
}
}
function showPic(whichpic) {
document.getElementById('placeholder').style.display = 'block';
var source = whichpic.getAttribute('href');
var placeholder = document.getElementById('placeholder');
placeholder.setAttribute('src', source);
return false;
}

Related

Image gallery dosen't fuction properly on webpage

Brand new to web development.
I was following this tutorial: https://www.youtube.com/watch?v=cVyhH3t49fs
Having trouble getting the at the end of index.html to function properly, despite having copied it exactly (my 'images' folder is called 'imgs' instead). Specifically, nothing happens when I click on the numbered buttons to swap images in the gallery.
Project files: https://drive.google.com/drive/folders/1R32WhB-oWDybyNZ3NtAVRMp370QKXJiX?usp=sharing
<div class="container">
<div class="navbar">
<img src="./imgs/logo.png" class="logo" />
<nav>
<ul>
<li>Home</li>
<li>Office</li>
<li>Hotels</li>
<li>Contact Us</li>
</ul>
</nav>
<img src="./imgs/menu.png" class="menu-icon" />
</div>
<div class="row">
<div class="col">
<div class="text-box">
<h5>Our Products</h5>
<h1>
<b>Simplicity</b> <br />
is the <b>ultimate</b> sophistication
</h1>
</div>
<img src="./imgs/circle.png" class="small-icon1" />
<img src="./imgs/circle.png" class="small-icon2" />
<img src="./imgs/square.png" class="small-icon3" />
</div>
<div class="col" class="col-right">
<div class="gallery-box">
<img src="./imgs/pic2.jpg" id="gallery" />
<ul>
<li class="btn">01</li>
<li class="btn active">02</li>
<li class="btn">03</li>
<li class="btn">04</li>
</ul>
</div>
</div>
</div>
<img src="./imgs/circle.png" class="small-icon4" />
<img src="./imgs/square.png" class="small-icon5" />
</div>
<script>
var btn = document.getElementsByClassName('btn');
var gallery = document.getElementById('gallery');
var imgs = new Array(
'imgs/pic1.jpg',
'imgs/pic2.jpg',
'imgs/pic3.jpg',
'imgs/pic4.jpg',
);
for (let i = 0; i < btn.legnth; i++) {
btn[i].onclick = function () {
gallery.src = imgs[i];
let current = document.getElementsByClassName('active');
current[0].className = current[0].className.replace('active', '');
this.className += 'active';
};
}
</script>
Any help would be apprecaited. Thanks!
I was reading you code and find the mistake. You write 'length' wrong in the loop. Here how te right code looks like:
for (let i = 0; i < btn.length; i++) {
btn[i].onclick = function () {
gallery.src = imgs[i];
let current = document.getElementsByClassName('active');
current[0].className = current[0].className.replace('active', '');
this.className += 'active';
};
}

How get the original size images (height and width) from your href and put them on your attr. using jquery

hello friends i am trying to get the size (height and width) of an image from an hrf and put these values ​​in its attribute
This is driving me crazy
this is my html:
<figure>
<a href="image-large-1.jpg">
<img src="image-small-1.jpg"/>
</a>
</figure>
<figure>
<a href="image-large-2.jpg">
<img src="image-small-2.jpg"/>
</a>
</figure>
<figure>
<a href="image-large-3.jpg">
<img src="image-small-3.jpg"/>
</a>
</figure>
this is what I want :
<figure>
<a href="image-large-1.jpg" original-size="1000x800"> //the sizes are example
<img src="image-small-1.jpg"/>
</a>
</figure>
<figure>
<a href="image-large-2.jpg" original-size="1200x700"> //the sizes are example
<img src="image-small-2.jpg"/>
</a>
</figure>
<figure>
<a href="image-large-3.jpg" original-size="900x980"> //the sizes are example
<img src="image-small-3.jpg"/>
</a>
</figure>
the "original-size" attribute I want to get it from " a hrf "
I was trying with this code that I found here, I get the original size of the image-large from the href (in the console.log) but I cannot print them in the html
help me please
$(".containerGallery figure a").each(function() {
var imgSrc, imgW, imgH;
function myFunction(image){
var img = new Image();
img.src = image;
img.onload = function() {
return {
src:image,
width:this.width,
height:this.height};
}
return img;
}
var x = myFunction($(this).attr('href'));
x.addEventListener('load',function(){
imgSrc = x.src;
imgW = x.width;
imgH = x.height;
});
$(this).each(function() {
x.addEventListener('load',function(){
console.log(imgW+'x'+imgH);
$(this).attr('original-size', imgW+'x'+imgH);
});
});
});
The JavaScript code in the question is overly complex and redundant.
Here's some simplified code that accomplishes the same thing.
// get all <a> elements inside <figure> elements
const atags = Array.from(document.querySelectorAll('figure a'));
// iterate over every <a> tag
atags.forEach(atag => {
// create blank image element
var img = new Image();
// when the image loads, store its dimensions to the atag's
// `data-original-size` attribute
img.addEventListener('load', () => {
let imgW = img.width,
imgH = img.height;
atag.dataset.originalSize = `${imgW}x${imgH}`;
console.log('atag:', atag);
});
// load image from atag's href
img.src = atag.href;
});
<figure>
<a href="https://i.picsum.photos/id/1077/200/300.jpg">
<img src="https://via.placeholder.com/40" />
</a>
</figure>
<figure>
<a href="https://i.picsum.photos/id/913/200/200.jpg">
<img src="https://via.placeholder.com/50" />
</a>
</figure>
<figure>
<a href="https://i.picsum.photos/id/1058/100/100.jpg">
<img src="https://via.placeholder.com/60" />
</a>
</figure>
Here is script that does absolutely what you're looking for!
const getOriginalSize = (target, url) => {
const image = document.createElement("img");
image.src = url;
image.onload = function(){
target.setAttribute("original-size", `${image.naturalWidth}x${image.naturalHeight}`);
}
return image;
}
<figure>
<a href="https://images.sftcdn.net/images/t_app-cover-l,f_auto/p/befbcde0-9b36-11e6-95b9-00163ed833e7/260663710/the-test-fun-for-friends-screenshot.jpg">
<img src="https://images.sftcdn.net/images/t_app-cover-l,f_auto/p/befbcde0-9b36-11e6-95b9-00163ed833e7/260663710/the-test-fun-for-friends-screenshot.jpg"/>
</a>
</figure>
<figure>
<a href="https://www.velior.ru/wp-content/uploads/2009/05/Test-Computer-Key-by-Stuart-Miles.jpg">
<img src="https://www.velior.ru/wp-content/uploads/2009/05/Test-Computer-Key-by-Stuart-Miles.jpg"/>
</a>
</figure>
<script>
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll("figure").forEach( (figure) => {
figure.querySelectorAll("a[href]").forEach( function(targetAhref) {
getOriginalSize(targetAhref, targetAhref.href);
console.warn("image loaded and size registred!");
} );
} );
} );
</script>

Using Intersection Observer for lazyloading on cloned elements

I have a modified Bootstrap 4 carousel that has multiple items and scrolls one-by-one using this JavaScript:
$('.carousel[data-type="multi"] .carousel-item').each(function() {
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i = 0; i < 2; i++) {
next = next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
This creates a clone of each carousel-item with multiple carousel-columns, like this:
<div class="carousel-item active">
<div class="carousel-col">
<img src="" class="lazy" /> <!-- This image loads -->
</div>
<div class="carousel-col">
<img src="" class="lazy" />
</div>
<div class="carousel-col">
<img src="" class="lazy" />
</div>
<div class="carousel-col">
<img src="" class="lazy" />
</div>
</div>
<div class="carousel-item">
<div class="carousel-col">
<img src="" class="lazy" /> <!-- This image loads -->
</div>
<div class="carousel-col">
<img src="" class="lazy" />
</div>
<div class="carousel-col">
<img src="" class="lazy" />
</div>
<div class="carousel-col">
<img src="" class="lazy" />
</div>
</div>
I'm trying to implement lazy-loading with the Intersection Observer API, however inside the carousel it only works on the image in the first carousel-col in each carousel-item. I'm guessing this is due to the cloning but I'm not sure how to remedy the conflict. The API doesn't see to recognize that the cloned images exist.
Does anyone have any insight as to how I might go about fixing this?
Here's the JavaScript I'm using for lazyloading:
document.addEventListener("DOMContentLoaded", function() {
var lazyloadImages;
if ("IntersectionObserver" in window) {
lazyloadImages = document.querySelectorAll(".lazy");
var imageObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
var image = entry.target;
image.src = image.dataset.src;
image.classList.remove("lazy");
imageObserver.unobserve(image);
}
});
});
lazyloadImages.forEach(function(image) {
imageObserver.observe(image);
});
} else {
var lazyloadThrottleTimeout;
lazyloadImages = document.querySelectorAll(".lazy");
function lazyload () {
if(lazyloadThrottleTimeout) {
clearTimeout(lazyloadThrottleTimeout);
}
lazyloadThrottleTimeout = setTimeout(function() {
var scrollTop = window.pageYOffset;
lazyloadImages.forEach(function(img) {
if(img.offsetTop < (window.innerHeight + scrollTop)) {
img.src = img.dataset.src;
img.classList.remove('lazy');
}
});
if(lazyloadImages.length == 0) {
document.removeEventListener("scroll", lazyload);
window.removeEventListener("resize", lazyload);
window.removeEventListener("orientationChange", lazyload);
}
}, 20);
}
document.addEventListener("scroll", lazyload);
window.addEventListener("resize", lazyload);
window.addEventListener("orientationChange", lazyload);
}
});

A better way to do this with ReactJS?

Well.. I'm new in ReactJS, I'm AngularJS developer.
I have a problem... I need click on link and render a with a youtube iframe video.
I did, but...
Below the code:
<div class="news-box -hero">
<a href="#" class="news-cover -play -video">
<img src="images/news4.jpg" alt="" class="cover">
<div class="video-box" video-id="uoNPBcEBmFg"></div>
</a>
<a href="#" class="news-info" style="border-color: #174489">
<h3>Title</h3>
<p>Date and Hours</p>
</a>
</div>
I need that when click on '.-video' shows youtube iframe inside '.video-box'.
Will have many '.-video'.
I did so:
/**
* Video
*/
var VideoBox = React.createClass({
render: function () {
return (
<iframe width="70%" height="100%" src={'https://www.youtube.com/embed/' + this.props.videoId + '?rel=0&autoplay=1'} frameBorder="0" allowFullScreen></iframe>
);
}
});
/**
* When click on '-video'
*/
var videos = document.querySelectorAll('.-video');
for (var i = 0, t = videos.length; i < t; i++) {
var video = videos[i];
video.addEventListener('click', function(e) {
e.preventDefault();
var videoBox = video.querySelector('.video-box'),
id = videoBox.getAttribute('video-id');
React.render(
<VideoBox videoId={id} />,
videoBox
);
videoBox.style.display = 'block';
});
}
Yes, it works! There is a better way to do this?
Thanks!

Jquery fade in, fade out some elements together

I need to fade out and fade in some child elements in <div> like in Toni Almeida'a answer:
Fade in and out image
<div class="display" id="slideshow">
<a class="slice" href="myUrl1">
<div class="caption">Some text1...</div>
<img src="AnyUrl1" width="360" height="300"/>
</a>
<a class="slice" href="myUrl2">
<div class="caption">Some text2...</div>
<img src="AnyUrl2" width="360" height="300"/>
</a>
<a class="slice" href="myUrl3">
<div class="caption">Some text3...</div>
<img src="AnyUrl3" width="360" height="300"/>
</a>
.......
</div>
How should I edit the code in that answer?
Here is my js code modified to work with your html:
var count = 1;
setInterval(function() {
count = ($("#slideshow").find(".slice:nth-child("+count+")").fadeOut().next().length == 0) ? 1 : count+1;
$("#slideshow").find(".slice:nth-child("+count+")").fadeIn();
}, 2000);
Fiddle: http://jsfiddle.net/HewAd/
var count = 1;
var $slideShow = $("#slideshow");
var $prevSlice;
var $nextSlice;
setInterval(function() {
$prevSlice = $slideShow.find(".slice:nth-child("+count+")");
count = ($prevSlice.next().length == 0) ? 1 : count+1;
$nextSlice = $slideShow.find(".slice:nth-child("+count+")");
$prevSlice.fadeOut();
$nextSlice.fadeIn();
}, 2000);
Here is a fiddle: http://jsfiddle.net/KA4Zq/308/
Is it correct?

Categories