I am creating a web portfolio and I am using different photos/images for a responsive web page. But I am receiving the same error and I can not find the solution
.The reason I am using two different sets of images is that I am having vanilla javascript code for carousels but I am open to a different solution.
I named images so they could be added thru the for loop for example the first image is called img1.jpg, the second is named img2.jpg, etc.
function changeSource() {
const Images = document.querySelectorAll('.slides img');
for (let i = 1; i < Images.length; i++) {
Images[i].src = "../Assets/square/img" + i + ".jpg";
}
}
error message: 1 GET localhost:82/Assets/square/img6.jpg 404 (Not Found)
Here is the HTML markup
<images>
<section class="slides">
<img src="Assets/home/img4.jpg" id="lastclone">
<img src="Assets/home/img1.jpg">
<img src="Assets/home/img2.jpg">
<img src="Assets/home/img3.jpg">
<img src="Assets/home/img4.jpg">
<img src="Assets/home/img5.jpg">
<img src="Assets/home/img1.jpg" id="firstclone">
<img src="Assets/home/img2.jpg">
</section>
</images>
<script src="js/load.js"></script>
<script src="js/script.js"></script>
<script src="js/resize.js"></script>
Related
I am unable to get my images to lazy load with JavaScript. For some reason, the images just do not show up at all when I change the html from src to data-src. Then when I use an intersectionObserver to lazy load images, I can't get any images to show up on the page. Attached is my html, css and JS code;
html:
<div class="photo__container photo__container--one">
<img
data-src="portrait/1-vertical.jpeg"
alt=""
class="fade-in-img img-vertical-lazy"
/>
<img
data-src="portrait/2-vertical.jpeg"
alt=""
class="fade-in-img img-vertical-lazy"
/>
<img
data-src="portrait/3-vertical.jpeg"
alt=""
class="fade-in-img img-vertical-lazy"
/>
</div>
CSS:
.img-vertical-lazy {
height: 70rem;
width: auto;
}
JS:
const lazyImages = document.querySelectorAll('.img-vertical-lazy');
const appearLazy = {
threshold: 0.1
};
const lazyLoading = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (!entry.isIntersecting) return;
entry.target.src = entry.target.getAttribute('data-src');
lazyLoading.unobserve(entry.target);
});
}, appearLazy);
lazyImages.forEach(image => lazyLoading.observe(image));
There are several ways to do that but it depends on your purpose of using lazy loading. In most cases, it is for SEO (i.e. for fast page loading).
If you are lazy loading images only for a fast page speed score then you can add this code to your page.
Here is a working example:
An image will be loaded when you scroll inside div.
<html>
<body>
<div id="mydiv" style="width:500px;height:300px;overflow:scroll;">
<h1>Images are not technically inserted into a web page; images are linked to web pages. The tag creates a holding space for the referenced</h1>
<div class="photo">
<img data-src="https://images.freeimages.com/images/small-previews/648/bs-04-1255720.jpg"/>
</div>
<h2>Images are not technically inserted into a web page; images are linked to web pages. The tag creates a holding space for the referenced image.Images are not technically inserted into a web page; images are linked to web pages. The tag creates a holding space for the referenced image.</h2>
</div>
<script>
var sw = 0;
document.getElementById('mydiv').onscroll=function(){
if(sw==0){
sw=1;
const lazyImages = document.querySelectorAll('img');
for (let i = 0; i < lazyImages.length; i++) {
lazyImages[i].src = lazyImages[i].getAttribute('data-src');
}
}
}
</script>
</body>
</html>
Tip: use window.onscroll to apply effect on whole webpage
I have a div called masterdiv, inside this div there are 3 other div div1, div2, and div3,
This is the html for these html:
<div id="masterdiv" class="masterdivclass">
<div id="div1"><img class="div1class" src="image1.jpg" id="div1id" /></div>
<div id="div2"><img class="div2class" src="image2.jpg" id="div2id" /></div>
<div id="div3"><img class="div3class" src="image3.jpg" id="div3id" /></div>
</div>
I also have another div:
<div id=”reload”><img src="reload.png" width="200" height="70" onclick=loadDIV();></div>
What I’m trying to do is to reload the masterdiv div whenever the reload div is clicked on. Hiding and then showing the div isn’t enough as I need the content to be reloaded when the refresh div is clicked on. I don’t want to reload the entire page, just the masterdiv which contains the 3 other div. But I’m not certain this is possible.
I’m trying to do it with this Javascript function:
<script type="text/javascript">
function loadDiv(){
$("<div id="masterdiv" class="masterdivclass">
<div id="div1"><img class="div1class" src="image1.jpg" id="div1id" /></div>
<div id="div2"><img class="div2class" src="image2.jpg" id="div2id" /></div>
<div id="div3"><img class="div3class" src="image3.jpg" id="div3id" /></div>
</div>").appendTo("body");
}
</script>
This isn’t working, I think maybe I'm going about this in the wrong way? Maybe I’m missing something very simple here? I’d really appreciate any help with this, thank you in advance!
UPDATE
After reconsidering my project's requirements, I need to change part of my question, I now need to randomise the images displayed in the divs, and have a new random image load every time the reload div is clicked on. I also need to remove each class that’s currently in each of the three divs and then reattach the same classes to the divs (if I don’t remove and reattach the classes then the divs just display the plain images without any class/effect applied to them, it seems like I need to reload the class every time I load an image into a div in order for the class/effect to be applied successfully).
I have 5 images, and I’m using each div’s id tag to attach a random image to each div.
First I’m assigning the 5 different images to 5 different ids:
<script>
document.getElementById('sample1').src="images/00001.jpg";
document.getElementById('sample2').src="images/00002.jpg";
document.getElementById('sample3').src="images/00003.jpg";
document.getElementById('sample4').src="images/00004.jpg";
document.getElementById('sample5').src="images/00005.jpg";
</script>
And then I’m trying to use the following Javascript to load a randomised id (and its assigned image) to each of the 3 divs when the reload div is clicked:
<script>
$(function() {
$('#reload').on('click',function(){
$("#masterdiv").find("div[id^='div']").each(function(index){
//First, remove and reattach classes “div1class”, “div2class” and “div3class”
//from “easyDIV”, “mediumDIV” and “hardDIV” respectively:
$(“#easyDIV”).removeClass('div1class');
$(“#easyDIV”).addClass('div1class');
$(“#mediumDIV”).removeClass('div2class');
$(“#mediumDIV”).addClass('div2class');
$(“#hardDIV”).removeClass('div3class');
$(“#hardDIV”).addClass('div3class');
//Get a random number between 1 and 5, then attach it to “sample”,
//so that the result will be either “sample1”, “sample2”, “sample3”, “sample4” or “sample5”,
//call this variable “variablesample”:
var num = Math.floor(Math.random() * 5 + 1);
variablesample = "sample" +num;
//Attach this randomised id to all three divs using “variablesample”:
jQuery(this).prev("easyDIV").attr("id",variablesample);
jQuery(this).prev("mediumDIV").attr("id",variablesample);
jQuery(this).prev("hardDIV").attr("id",variablesample);
});
var p = $("#masterdiv").parent();
var el = $("#masterdiv").detach();
p.append(el);
});
});
</script>
I’m trying to make it so that all 3 divs will show the same randomised picture (that’s why they’re all sharing the variable “variablesample”), and each div will reload its own class/effect (div1class, div2class and div3class) but it’s not working. I’m not sure if it’s correct to use jQuery inside a Javascript function, or if my syntax for updating the ids of the divs is incorrect.
Perhaps my logic to solving this problem is all wrong? I’d really appreciate any more help with this problem. Thanks again in advance!
Original question was edited many times, so here is the correct answer for the latest edit. Answer to the question; "How to use random image, but same image on all 3, and 3 class on/off switching":
$(function() {
var imageArray = [
'https://via.placeholder.com/40x40',
'https://via.placeholder.com/80x40',
'https://via.placeholder.com/120x40',
'https://via.placeholder.com/160x40',
'https://via.placeholder.com/200x40'];
reloadImages(imageArray);
$('#reload').on('click',function(){
$( "#masterdiv img[id^='div']" ).each(function(index){
$(this).removeClass("div"+(index+1)+"class");
$(this).fadeOut( "slow", function() {
if(index==0) {
reloadImages(imageArray);
}
$(this).addClass("div"+(index+1)+"class");
$(this).fadeIn();
});
});
});
});
function shuffleArray(array) {
for (var i = array.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = array[i];
array[i] = array[j];
array[j] = temp;
}
return array;
}
function reloadImages(array){
shuffleArray(array);
for(var i=0;i<3;i++){
// places the first image into all divs, change 0 to i if you want different images in each div
document.getElementById('div'+(i+1)+'id').src=array[0];
}
}
.div1class {
border:2px dashed #0F0;
}
.div2class {
border:2px dashed yellow;
}
.div3class {
border:2px dashed red;
}
#reload {
background-color:blue;
color:white;
width:100px;
height:30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='reload'>Click here</div>
<div id="masterdiv" class="masterdivclass">
<div id="div1">
<img src="https://via.placeholder.com/20x40" class="div1class" id="div1id" />
</div>
<div id="div2">
<img src="https://via.placeholder.com/20x40" class="div2class" id="div2id" />
</div>
<div id="div3">
<img src="https://via.placeholder.com/20x40" class="div3class" id="div3id" />
</div>
</div>
Line breaks and un-escaped quotes are why the functions is not working.
function loadDiv(){
$('#masterdiv').remove();
$("<div id='masterdiv' class='masterdivclass'><div id='div1'><img class='div1class' src='image1.jpg' id='div1id' /></div><div id='div2'><img class='div2class' src='image2.jpg' id='div2id' /></div><div id='div3'><img class='div3class' src='image3.jpg' id='div3id' /></div></div>").appendTo("body");
}
try:
function loadDiv(){
$("#masterdiv").load(location.href + " #masterdiv");
}
Here's the code pen demo:
http://codepen.io/anon/pen/xwgRWm
If content of container is not being changed dynamically then there is no point reloading it. appendTo wiil append DOM in existing DOM structure, you will need html() here which will replace the content inside container. Also note you had typo here onclick=loadDiv();
HTML:
<div id="masterdiv" class="masterdivclass">
<div id="div1"><img class="div1class" src="image1.jpg" id="div1id"/></div>
<div id="div2"><img class="div2class" src="image2.jpg" id="div2id"/></div>
<div id="div3"><img class="div3class" src="image3.jpg" id="div3id"/></div>
</div>
<div id="reload"><img src="reload.png" width="200" height="70" onclick=loadDiv();></div>
JS:
function loadDiv() {
$("#masterdiv").html('<div id="div1"><img class="div1class" src="image1.jpg" id="div1id" /></div>\
<div id="div2"><img class="div2class" src="image2.jpg" id="div2id" /></div>\
<div id="div3"><img class="div3class" src="image3.jpg" id="div3id" /></div>');
}
EDIT: I WANT MY SLIDER TO BE EASY TO YOU AND ONCE A LINK IS CLICKED THE IMAGE THAT CORRELATES WITH LINK SHOWS.
I'm looking to make a really simple "slider" that if you click a link, the img shows that correlates with it. I've been trying to find something for a bit now and things are either too flash or don't suit my needs. This came close: http://jsfiddle.net/bretmorris/ULNa2/7/
I would something a little simpler that can be applied easily to multiple images for different divs.
This is what my code looks like with just a plain img tag to it:
<div id="adobe_content" class="hdiv"><button class="x">X</button>
<img src="images/adobefront.png"><br>
<img src="images/adobeinside.png"><br>
<img src="images/adobeback.png"><br>
<h5>Adobe Brochure</h5>
<p>
I wanted to make something functional and out the box that Adobe might consider giving out. It's clean like their work and sparks interest in opening the brochure with the cut out in the center. The front flap is able to slide into a slot on the right side for a neat logo. They're now more interested in their cloud, but the information is inside is still relevant!
</p>
<b>Programs used: Adobe Illustrator, InDesign and Photoshop.</b>
</div>
The code doesn't work for me because, well I partially don't understand it, and I'm not sure how to make it suit my needs (especially if I got up to multiple images) like correlating with an image.
Perhaps understanding what is going on would maybe get you on the right track, so here is an explanation:
$('a.prev').click(function() {
prevSlide($(this).parents('.slideshow').find('.slides'));
});
//clicking image goes to next slide
$('a.next, .slideshow img').click(function() {
nextSlide($(this).parents('.slideshow').find('.slides'));
});
This part is relatively straightforward, when you click on the previous or next links, call the prevSlide or nextSlide function, passing the collection of slides as an argument.
//initialize show
iniShow();
function iniShow() {
//show first image
$('.slideshow').each(function() {
$(this).find('img:first').fadeIn(500);
})
}
Initialize the slideshow by finding each slideshow on the page and fading in the first image. $(this) refers to the <div class="slideshow"> parent, find all child image tags and take the first, fade that element in (and do it in 500 milliseconds).
function prevSlide($slides) {
$slides.find('img:last').prependTo($slides);
showSlide($slides);
}
function nextSlide($slides) {
$slides.find('img:first').appendTo($slides);
showSlide($slides);
}
The prevSlide and nextSlide functions both rearrange the order of images, this line in particular:
$slides.find('img:first').appendTo($slides);
Is moving the first image to the end of the images, so:
<img src="http://placekitten.com/300/500" width="300" height="500" />
<img src="http://placekitten.com/200/400" width="200" height="400" />
<img src="http://placekitten.com/400/400" width="500" height="400" />
becomes:
<img src="http://placekitten.com/200/400" width="200" height="400" />
<img src="http://placekitten.com/400/400" width="500" height="400" />
<img src="http://placekitten.com/300/500" width="300" height="500" />
$slides.find('img:last').prependTo($slides); does the inverse and moves the last image to the beginning.
function showSlide($slides) {
//hide (reset) all slides
$slides.find('img').hide();
//fade in next slide
$slides.find('img:first').fadeIn(500);
}
Finally, showSlide accepts the collection of images, hides all of them and then fades in the first image (since the collection is reordered each time, the first is a different image).
Now, if you want a link for each image that will display a corresponding image, you could do something as simple as:
<a class="image" data-src="http://placekitten.com/300/500">Kitten 1</a>
<a class="image" data-src="http://placekitten.com/200/400">Kitten 2</a>
<a class="image" data-src="http://placekitten.com/400/500">Kitten 3</a>
<div id="image-container">
<img src="http://placekitten.com/300/500" />
</div>
and something like the following:
$('.image').on('click', function() {
var imageSrc = $(this).data('src');
$('#image-container img').prop('src', imageSrc);
});
Which will update the child image tag of <div id="image-container"> with the data-src attribute value in the clicked link.
http://jsfiddle.net/9sxt6n0t/
Hope this helps.
just a quick function to slide
function slideIt(images , prev , next){
$('.slideshow img:nth-child(1)').show();
var imagesLength = $(images).length;
var i = 1;
$(prev).click(function() {
$(images).hide();
if(i !== 1){
$(images + ':nth-child('+ (i - 1) +')').show();
i--;
}else{
$(images +':nth-child('+imagesLength +')').show();
i = imagesLength;
}
});
//clicking image goes to next slide
$(''+next+','+images+'').on('click',function() {
$(images).hide();
if(i !== imagesLength){
$(images + ':nth-child('+ (i + 1) +')').show();
i++;
}else{
$(images + ':nth-child(1)').show();
i = 1;
}
});
}
and use like that slideIt(Images , prevArrow , nextArrow)
slideIt('.slideshow img','a.prev' , 'a.next');
DEMO HERE
I'm a novice at jquery/javascript, so apologies in advance if this is a dumb question.
I have 3 images and I want to be able to change their position when a user clicks either the second or the third one. For example, if the user clicks image #2, I want image #2 to become image #1 (left-most), then image #3 becomes image #2 (middle) and finally image #1 becomes image #3 (right-most). If the user clicks image #3, I want image #3 to become image #1 (left-most), then image #1 becomes image #2 (middle) and finally image #2 becomes image #3 (right-most).
If the user clicks the first image, I don't want anything to happen.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>ImageSwap</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var img = new Array("http://i.imgur.com/QWso5yB.png", "http://i.imgur.com/O4X3egC.png", "http://i.imgur.com/w3p2qLp.png");
$('#first').bind('click', firstChannel);
$('#second').bind('click', secondChannel);
});
function firstChannel() {
var tempImg = img[0];
img[1] = img[2];
img[2] = tempImg;
$('#home').attr('src',img[0]);
$('#first').attr('src',img[1]);
$('#second').attr('src',img[2]);
};
function secondChannel() {
var tempImg = img[0];
img[0] = img[2];
img[2] = img[1];
img[1] = tempImg;
$('#home').attr('src',img[0]);
$('#first').attr('src',img[1]);
$('#second').attr('src',img[2]);
};
</script>
</head>
<body>
<img id="home" src="http://i.imgur.com/QWso5yB.png">
<img id="first" src="http://i.imgur.com/O4X3egC.png">
<img id="second" src="http://i.imgur.com/w3p2qLp.png">
</body>
</html>
When clicking the 2nd and 3rd images, nothing happens. What the heck am I doing wrong here? Is there an easier way to do this? I've been pulling my hair out searching everywhere but can't seem to find an answer. Many thanks in advance for any feedback you can give me...
Why not make it simple? jsBin demo
A parent element:
<div id="channels">
<img src="http://i.imgur.com/QWso5yB.png">
<img src="http://i.imgur.com/O4X3egC.png">
<img src="http://i.imgur.com/w3p2qLp.png">
</div>
and some prepend():
$(function () {
var $chn = $("#channels");
$chn.on("click","img", function(){
$chn.prepend( this );
});
});
I mean, if the first image represents the current channel, than all you need to do (as above) is to prepend the clicked element. To style the first element simply use CSS img:first-child
EDIT: KEEP ORDER
jsBin demo with Order
If appending creates at some point a mess of channels order,
I'd suggest you to:
Create a MAIN or currently watching big image and place all channels inside a parent:
<img id="current">
<div id="channels">
<img src="//placehold.it/90x40/a7b&text=1">
<img src="//placehold.it/90x40/ba7&text=2">
<img src="//placehold.it/90x40/7ba&text=3">
<img src="//placehold.it/90x40/bb7&text=4">
<img src="//placehold.it/90x40/77a&text=5">
<img src="//placehold.it/90x40/ab7&text=6">
</div>
Than on a channel-click, set the clicked image src to the BIG image, and hide the clicked one:
$(function () {
var $img = $("#channels").find("img");
var $current = $("#current"); // The big image
$img.on("click", function(){
$current[0].src = this.src;
$img.show();
$(this).hide();
}).eq(0).click();
});
Example with a better UI
I've been looking around much today and spend a few hours trying to get something done. For a client I am creating a slideshow with a lightbox when clicked on an image. The slideshow and lightbox both work, but I don't get the right image in the lightbox yet.
This is the code that loads the slideshow and when clicked on an image opens the lightbox.
(The images for the slideshow get loaded by a php script and turned into a Javascript array)
<script type="text/javascript">
var curimg=0;
function rotateimages(){
document.getElementById("slideshow").setAttribute("src", "images/"+galleryarray[curimg]);
curimg=(curimg<galleryarray.length-1)? curimg+1 : 0;
}
window.onload = function(){
setInterval("rotateimages()", 1000);
}
</script>
<div style="width: 170px; height: 160px">
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style. display='block'">
<img id="slideshow" src="" />
</a>
<div id="light" class="white_content">
<img id="lightImg" src="" />
<script>
var image = document.getElementById("slideshow").src;
document.getElementById("lightImg").setAttribute("src", image);
</script>
I now try to create a variable named "image"and let this contain the src of the current image in the slideshow. So I can load this to the image in the lightbox.
Hopefully some one can give me some usefull tips. I am pretty new in the Javascript language.
The script for the slideshow came from: http://www.javascriptkit.com/javatutors/externalphp2.shtml
Regards Koen.
These days there really is no excuse for using obtrusive Javascript (Stuff inside your HTML attributes, ideally it should be in an external file. http://en.wikipedia.org/wiki/Unobtrusive_JavaScript).
I have done you the favour of cleaning up your code a bit, and changed it where you seemed to be going wrong. As DotNetter has already pointed out it would be sensible to use jQuery in this instance, as it really does simplify things. However, I'm going to assume that for some reason you want it in plain js. Below is a simplification of the code that you posted with the correct change.
<style type="text/css">
.wrapper {
width: 170px;
height: 160px;
}
</style>
<script type="text/javascript">
var curimg=0;
function rotateimages(){
document.getElementById("slideshow").setAttribute("src", "images/" + galleryarray[curimg]);
curimg=(curimg<galleryarray.length-1)? curimg+1 : 0;
}
window.onload = function(){
setInterval("rotateimages()", 1000);
document.getElementById("slideshow").onclick = function () {
var imageSrc = document.getElementById("slideshow").src;
document.getElementById("lightImg").setAttribute("src", imageSrc);
document.getElementById('light').style.display = 'block';
document.getElementById('fade').style.display = 'block';
}
}
</script>
<div class='wrapper'>
<img id="slideshow" src="" />
<div id="light" class="white_content">
<img id="lightImg" src="" />
</div>
</div>
Before, you were getting the src of the current image when the page loaded, you need to be getting the src of the image when the user clicks on the