I have a container in which it is a horizontal scroll slider. I am just trying to figure how to show the element that is in the viewport at the time
I tried to look for left. I tried to put the slides in an array and look for the x axis but I am a little stumped.
This is my scroll function.
const scroll = () => {
const scrollContainer = document.querySelector('.slider');
scrollContainer.addEventListener('wheel', (e) => {
e.preventDefault();
scrollContainer.scrollLeft += e.deltaY;
});
};
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>demo</title>
</head>
<body>
<div class="slider hidden" id="slideshowContainer">
<div class="innerSlider" id="innerSlider">
<div class="slide">
<img src="https://images.unsplash.com/photo-1586023492125-27b2c045efd7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=958&q=80" alt="" draggable="false" />
</div>
<div class="slide">
<img src="https://images.unsplash.com/photo-1583847268964-b28dc8f51f92?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="" draggable="false" />
</div>
<div class="slide">
<img src="https://images.unsplash.com/photo-1586105251261-72a756497a11?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=958&q=80" alt="" draggable="false" />
</div>
<div class="slide">
<img src="https://images.unsplash.com/photo-1618220048045-10a6dbdf83e0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80" alt="" draggable="false" />
</div>
<div class="slide">
<img src="https://images.unsplash.com/photo-1513694203232-719a280e022f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1169&q=80" alt="" />
</div>
<div class="slide">
<img src="https://images.unsplash.com/photo-1513694203232-719a280e022f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1169&q=80" alt="" draggable="false" />
</div>
<div class="slide">
<img src="https://images.unsplash.com/photo-1513694203232-719a280e022f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1169&q=80" alt="" draggable="false" />
</div>
</div>
</div>
</body>
</html>
Related
I'm very new to javascript and I was wondering if it would be possible to have javascript automtically change the image after few seconds, this is my college project and it can be very messy. Here's the code:
<!DOCTYPE html>
<html>
<head>
<title>titleHere</title>
<link rel="stylesheet" href="../styles/main.css">
<link rel="stylesheet" href="../styles/menu.css">
<script>
function changeImage(imageName){
var pickImage = document.getElementById("mainImg");
pickImage.src = imageName;
}
</script>
</head>
<body>
<div class="page_container">
<div class="menu">
<div class="logo"></div>
<nav id="cssmenu">
<ul>
<li><span>HOME</span></li>
<li class="active"><span>GALLERY</span></li>
<li><span>CONTACT</span></li>
</ul>
</nav>
</div>
<div class="resortTitle"><center>The Reves Recours</center></div>
<div class="thumbnails" align="center">
<img src="../images/resort1.jpg" onmouseover="changeImage('../images/resort1.jpg')" alt="Missing Image"/>
<img src="../images/resort2.jpg" onmouseover="changeImage('../images/resort2.jpg')" alt="Missing Image"/>
<img src="../images/resort3.jpg" onmouseover="changeImage('../images/resort3.jpg')" alt="Missing Image"/>
<img src="../images/resort4.jpg" onmouseover="changeImage('../images/resort4.jpg')" alt="Missing Image"/>
</div>
<div class="preview" align="center">
<img src="../images/resortLogoLarge.png" id="mainImg">
</div>
<div class="thumbnails" align="center">
<img src="../images/resort5.jpg" onmouseover="changeImage('../images/resort5.jpg')" alt="Missing Image"/>
<img src="../images/resort6.jpg" onmouseover="changeImage('../images/resort6.jpg')" alt="Missing Image"/>
<img src="../images/resort7.jpg" onmouseover="changeImage('../images/resort7.jpg')" alt="Missing Image"/>
<img src="../images/resort8.jpg" onmouseover="changeImage('../images/resort8.jpg')" alt="Missing Image"/>
</div>
<div class="greybar"></div>
<div class="footer">
<div class="watmark"> Created by: ---</div>
</div>
</div>
</body>
Just add
window.onload=function(){
setInterval(function(){changeName("yourImageName")},2000) //2 seconds
}
to the beginning of the <script>. It will change your image after 2 seconds pass.
var images = ['src1','src2','src3'],i=0;
setTimeout(function(){
changeImage(images[i]);
i++;
if(i>images.length)
i=0;
},3000);
You can get the array of list of images you have and then loop thorugh for the delay as you would required using various solutions available for delay like using setInterval on Window load etc.
I have a list of images, I want to insert one image after each paragraph. Sometimes I have less images than paragraphs sometimes more. How do I loop through the img elements to insert them after a paragraph, and if there are too much images, leave them where they are?
$( ".img" ).insertAfter( "p" );
Without content the structure would look like this:
Before:
<div id="wrap">
<h2></h2>
<p></p>
<h2></h2>
<p></p>
<h2></h2>
<p></p>
</div>
<img class="img" />
<img class="img" />
<img class="img" />
<img class="img" />
<img class="img" />
<img class="img" />
<img class="img" />
<img class="img" />
Result:
<div id="wrap">
<h2></h2>
<p></p>
<img class="img" />
<h2></h2>
<p></p>
<img class="img" />
<h2></h2>
<p></p>
<img class="img" />
</div>
<img class="img" />
<img class="img" />
<img class="img" />
<img class="img" />
<img class="img" />
You could use the .after() method:
var $img = $('.img');
$('#wrap p').after(function(i) { return $img.eq(i); });
http://jsfiddle.net/a7tchk5r/
Here is my HTML page:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>Demo slider</title>
<link href="themes/1/js-image-slider.css" rel="stylesheet" type="text/css" />
<script src="themes/1/js-image-slider.js" type="text/javascript"></script>
</head>
<body>
<div id="sliderFrame">
<div id="slider">
<img src="images/image-slider-1.jpg" id="img1" alt="" />
<img src="images/image-slider-2.jpg" id="img2" alt="" />
<img src="images/image-slider-3.jpg" id="img3" alt="" />
<img src="images/image-slider-4.jpg" id="img4" alt="" />
<img src="images/image-slider-5.jpg" id="img5" alt="" />
</div>
</div>
<div id="custom_text">
<h1 style="color: blue;">Image 1 text</h1>
</div>
<div id="custom_text1">
<h1 style="color: blue;">Image 2 text</h1>
</div>
<div id="custom_text2">
<h1 style="color: blue;">Image 3 text</h1>
</div>
<div id="custom_text3">
<h1 style="color: blue;">Image 4 text</h1>
</div>
<div id="custom_text4">
<h1 style="color: blue;">Image 5 text</h1>
</div>
</body>
</html>
Using menucool's Javascript Image Slider library: link to site
I want to display different text on different images i tried it giving absolute and relative positions to div and img tag but unable to acheive the output.
The javascript slider function is the predefined function.Basically i want to achieve this
This is why you always read the documentation:
http://www.menucool.com/javascript-image-slider#view2
Captions are set through each slide image's alt attribute. If the
image is formatted as lazy loaded image, its caption can be defined by
the title or data-alt attribute:
HTML
<img src="//placehold.it/250x250" id="img1" alt="Caption one" />
<img src="//placehold.it/249x249" id="img2" alt="Caption two" />
<img src="//placehold.it/251x251" id="img3" alt="Caption three" />
<img src="//placehold.it/248x248" id="img4" alt="Caption four" />
<img src="//placehold.it/252x252" id="img5" alt="Caption five" />
JSFiddle Demo
i'm making a website with Fabricjs. One div is going to be the canvas and another is going to have lots of images (hundreds). I want to be able to click on the images so that they pop up in the canvas. My question is; how do i get the src of the images when clicked on so that an img node goes into the canvas node. Should i make an array of addEventl... for each of the images?
(writing in javascript)
thanks as always :)
<!doctype html>
<html lang="en";>
<head>
<meta charset="utf-8" />
<title>CustomCase</title>
<link rel="stylesheet" href="HeaderFooter.css">
<link rel="stylesheet" href="SkapaDesign.css">
<script src="Jquery.js"></script>
<script src="Fabric.js"></script>
<script src="Canvas.js"></script>
</head>
<body>
<div id="Wrapper">
<header id="Header">
Om Oss
Välj Design
<img id="Logo" src=LogotypHemsida.png>
Skapa Design
Hjälp
</header>
<section id="Body">
<img id="UpperShadow" src=NeråtSkugga.png>
<div id="LeftColumn">
<div id="TextMode">
</div>
<div id="CanvasContainer">
<canvas id="Canvas" width="270px" height="519px"></canvas>
</div>
<div id="LayerMode">
</div>
<div id="IPhoneMode">
</div>
</div>
<div id="RightColumn">
<div id="TextureMode">
</div>
<div id="TextureFilter">
</div>
<div id="TextureView">
<div id="TextureViewInside">
<div id="images">
<img src="FärgadePapper.png">
<img src="Hajar.png">
<img src="Labyrint.png">
<img src="Martini.png">
<img src="FärgadePapper.png">
<img src="Hajar.png">
<img src="Labyrint.png">
<img src="Martini.png">
<img src="FärgadePapper.png">
<img src="Hajar.png">
<img src="Labyrint.png">
<img src="Martini.png">
<img src="FärgadePapper.png">
</div>
</div>
</div>
</div>
<img id="LowerShadow" src=UppåtSkugga.png>
</section>
<footer id="Footer">
<div id="FooterSpace"></div>
<div id="FooterColumnLeft">
Välj Design
Skapa Design
Om Oss
Hjälp
</div>
<div id="FooterDevider">
</div>
<div id="FooterColumnRight">
<div id="Facebook">
<img id="FacebookLogo" src=FacebookLogo.png>
Gilla oss på Facebook
</div>
<div id="Twitter">
<img id="TwitterLogo" src=TwitterLogo.png>
Följ oss på Twitter
</div>
</div>
<div id="FooterSpace"></div>
<div id="BottomColor"></div>
</footer>
</div>
</body>
</html>
You don't have to declare onclick for each img.
Try this: http://jsfiddle.net/cEh93/
$("#images img").click(function() {
var getsource = $(this).attr("src");
alert(getsource);
});
You don't need the onclick on each image, you can attach a jQuery event handler to all images and get their src attribute (this will output the image src to the console when the image is clicked):
jQuery(document).ready(function()
jQuery("#images img").on( "click", function() {
console.log( jQuery( this ).attr('src') );
});
}); // ready
You can set the retrieve of SRC only attaching event for upper DIV (using JS), like that:
<div id="images" onclick="getSelectedImageURL(event);">
<input type="image" src="FärgadePapper.png">
<img src="Hajar.png">
<img src="Labyrint.png">
<img src="Martini.png">
<img src="FärgadePapper.png">
<img src="Hajar.png">
<img src="Labyrint.png">
<img src="Martini.png">
<img src="FärgadePapper.png">
<img src="Hajar.png">
<img src="Labyrint.png">
<img src="Martini.png">
<img src="FärgadePapper.png">
<img src="Hajar.png">
<img src="Labyrint.png">
<img src="Martini.png">
</div>
To get current selected image SRC on click event...
function getSelectedImageURL(event){
if(event.target.localName.toUpperCase() == 'IMG')
alert(event.target.src);
}
I am trying to cycle my image and blur the background image but the problem is it only blurs the first image but not the next image.
<div id="banner_images">
<div id="banner_cycle_wrapper">
<div id="banner_bg_cycle">
<img src="source.png" class="blur">
</div>
<div id="banner_cycle_container">
<img src="source.png">
</div>
</div>
<div id="banner_cycle_wrapper" >
<div id="banner_bg_cycle">
<img alt="" src="source.png" class="blur">
</div>
<div id="banner_cycle_container">
<img src="source.png">
</div>
</div>
</div>
$('#banner_images').cycle({
fx: 'fade',
timeout: 2000
});
$(".blur").pixastic("blurfast", {amount:0.5});
I think you are missing CLASS to add in that
class="blur"
this should be added to each image you want to have the same effect.
Updated Code:
<div id="banner_images">
<div id="banner_cycle_wrapper">
<div id="banner_bg_cycle">
<img alt="" src="source.png"/>
</div>
<div id="banner_cycle_container">
<img alt="" src="img1.png" class="blur" />
<img alt="" src="img2.png" class="blur" />
</div>
</div>
</div>
I hope this will help :)