We Keep Coding

Why can't move the image with ++imgbox.scrollLeft?

I want to move a serie of images from right to left using javascript.
window.onload = function(){
function move(){
var speed = 500;
var imgbox = document.getElementById("imgbox");
imgbox.innerHTML += imgbox.innerHTML;
var span = imgbox.getElementsByTagName("span");
var timer = window.setInterval(marquee,speed);
function marquee(){
console.log(imgbox.scrollLeft);
console.log(span[0].offsetWidth);
if( imgbox.scrollLeft > span[0].offsetWidth){
imgbox.scrollLeft = 0;
}else{
++imgbox.scrollLeft;
console.log("in else block");
console.log(imgbox.scrollLeft);
}
}
}
move();
}
div{
width: 933px;
height: 129px;
border: 1px solid red;
overflow:hidden;
}
<div id="imgbox">
<span>
<img src="https://i.stack.imgur.com/b7J9w.jpg" alt="">
<img src="https://i.stack.imgur.com/yh7YJ.jpg" alt="">
<img src="https://i.stack.imgur.com/5uIog.jpg" alt="">
<img src="https://i.stack.imgur.com/r5GCW.jpg" alt="">
</span>
</div>
When to open it with firefox, js run in else block ,why imgbox.scrollLeft can't increase?imgbox.scrollLeft keep value as 0 ,not increased as 1,2,3.......
How to fix my js or css ?

Adding white-space: nowrap; to the style helps. With white-space option allowing text wrapping, there is no horizontal overflow, the element needs no horizintal scrolling, and .scrollLeft is automatically reset to 0. See https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft, section Setting the value.
window.onload = function(){
function move(){
var speed = 50; // I made it faster.
var imgbox = document.getElementById("imgbox");
imgbox.innerHTML += imgbox.innerHTML;
var span = imgbox.getElementsByTagName("span");
var timer = window.setInterval(marquee,speed);
function marquee(){
console.log(imgbox.scrollLeft);
console.log(span[0].offsetWidth);
// see UPD -v
if( imgbox.scrollLeft > span[0].offsetWidth || imgbox.scrollLeft >= imgbox.scrollWidth - imgbox.clientWidth ){
imgbox.scrollLeft = 0;
}else{
++imgbox.scrollLeft;
console.log("in else block");
console.log(imgbox.scrollLeft);
}
}
}
move();
}
div{
width: 933px;
height: 129px;
border: 1px solid red;
overflow:hidden;
white-space: nowrap; /* <-- */
}
<div id="imgbox">
<span>
<img src="https://i.stack.imgur.com/b7J9w.jpg" alt="">
<img src="https://i.stack.imgur.com/yh7YJ.jpg" alt="">
<img src="https://i.stack.imgur.com/5uIog.jpg" alt="">
<img src="https://i.stack.imgur.com/r5GCW.jpg" alt="">
</span>
</div>
UPD per #Jaromanda_X. There is a another problem with the author's code: the scrolling stops when imgbox.scrollLeft reaches 910, for
If specified as a value greater than the maximum that the content can be scrolled, scrollLeft is set to the maximum.
The maximum value of .scrollLeft is defined as .scrollWidth - .clientWidth (see https://stackoverflow.com/a/5704386/6632736). So, the condition for resetting .scrollLeft ought to be imgbox.scrollLeft > span[0].offsetWidth || imgbox.scrollLeft >= imgbox.scrollWidth - imgbox.clientWidth. Perhaps, it can be simplified.

JavaScript - periodically change "active" image

I have 4 pictures and want them to periodically change class (I have .active class, which is similar to hover).
.active,
.pic:hover{
position: absolute;
border: 1px solid black;
transform: scale(1.1);
transition: transform .2s;
}
Basically I need the first picture to have the class active and after some time change it so the next picture has the class and the first one lose it.
Is something like that even possible?
Picture in HTML:
<div class="products">
<a href="http://example.com/produkt1">
<img class="pic" src="image.jpg" alt="image" width="75" height="75">
</a>
</div>
and JS:
productIndex = 0;
slideshow();
function slideshow(){
var i;
var pic = document.getElementsByClassName("pic");
for(i = 0; i < pic.length; i++){
pic[i].className = pic[i].className.replace("active", "");
}
productIndex++;
if(productIndex > pic.length){
productIndex = 1;
}
pic[productIndex-1].className += active;
setInterval(slideshow, 2000);
}

You can use setInterval to run a function periodically that will change the active class. Something like this (psuedo-code):
var imageArray = [];
var activeIndex = 0;
setInterval(function(){
imageArray[activeIndex].removeClass('active');
activeIndex++;
activeIndex %= 4;
imageArray[activeIndex].addClass('active');
}, 5000);
The number value passed in as a parameter is how many milliseconds to wait before running the function again. In this example, 5 seconds will pass between the classes are changed.
setInterval Reference

This is ugly but it could work for super basic ... You just need to update the div blocks with images if necessary. Uses jquery...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<style>
div {
width:50px;
height:50px;
background-color: black;
margin-bottom:10px;
}
.active {
background-color: red;
}
</style>
</head>
<body>
<div id="pic1"></div>
<div id="pic2"></div>
<div id="pic3"></div>
<div id="pic4"></div>
<script>
let lastActive = 0;
setInterval(()=>{
$('div').removeClass('active');
if(lastActive === 0){
$('#pic1').addClass('active');
lastActive = 1;
}
else if(lastActive === 1){
$('#pic2').addClass('active');
lastActive = 2;
}
else if(lastActive === 2){
$('#pic3').addClass('active');
lastActive = 3;
}
else if(lastActive === 3){
$('#pic3').addClass('active');
lastActive = 4;
}
else if(lastActive === 4){
$('#pic1').addClass('active');
lastActive = 1;
}
}, 500)
</script>
</body>
</html>

Matt L. has a good point here. Your code has the setInterval inside your slideshow function, otherwise it's fine.
productIndex = 0;
slideshow();
function slideshow(){
var i;
var pic = document.getElementsByClassName("pic");
for(i = 0; i < pic.length; i++){
pic[i].className = pic[i].className.replace("active", "");
}
productIndex++;
if(productIndex > pic.length){
productIndex = 1;
}
pic[productIndex-1].className += active;
}
setInterval(slideshow, 2000);
could probably work. Matt's answer is a lot better, and I came up with something similar, which is testable on jsfiddle.

You could do it like this for example:
$(document).ready(function() {
setInterval(function() {
var active = $('.active');
active.nextOrFirst().addClass('active');
active.removeClass('active');
}, 3000);
});
$.fn.nextOrFirst = function(selector)
{
var next = this.next(selector);
return (next.length) ? next : this.prevAll(selector).last();
};
.active,
.pic:hover{
border: 1px solid black;
}
.pic {
width: 150px;
margin: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image-container">
<img class="pic active" src="https://via.placeholder.com/350x150">
<img class="pic" src="https://via.placeholder.com/350x150">
<img class="pic" src="https://via.placeholder.com/350x150">
<img class="pic" src="https://via.placeholder.com/350x150">
</div>
Edit:
This, instead of most other solutions, will work with any amount of items. To use it only on pictures just specify via selector in the function.

Checkout this working example. I've made use of a combination of setInterval and setTimeout.
$(window).ready(()=>{
// get all the images inside the image-container div
let $images = $('.image-container').find('.image');
let currImage = 0;
// execute this code every 2 seconds
window.setInterval(()=>{
// add the active class to the current image
$($images[currImage]).addClass('active');
setTimeout(()=>{
// execute the code here after 1.5 seconds
// remove the active class from the previous image
$($images[currImage-1]).removeClass('active');
}, 1500);
// make sure we don't go over the number of elements in the collection
currImage = currImage >= $images.length ? 0 : currImage + 1;
}, 2000);
});
.image.active {
border: thin solid blue;
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<div class="image-container" class="">
<img src="https://via.placeholder.com/200x200" class="image active">
<img src="https://via.placeholder.com/200x200" class="image">
<img src="https://via.placeholder.com/200x200" class="image">
<img src="https://via.placeholder.com/200x200" class="image">
</div>
Do make sure that the code in setTimeout will execute before the next interval. Meaning, the time set for setTimeout is always less than setInterval's :)

Yes it is possible:
function carousel() {
var images = document.querySelectorAll(".container img");
for(var i = 0; i < images.length; i++) {
if(images[i].classList.contains("active")) {
images[i].classList.remove("active");
if(i == images.length - 1) {
images[0].classList.add("active");
} else {
images[i + 1].classList.add("active");
}
break;
}
}
}
setInterval(carousel,1000);
img {
width: 100px;
margin-left: 10px;
transition: .2s;
}
.active {
transform: scale(1.1);
}
<div class="container">
<img src="https://i.stack.imgur.com/cb20A.png" class="active"/>
<img src="https://i.stack.imgur.com/cb20A.png"/>
<img src="https://i.stack.imgur.com/cb20A.png"/>
<img src="https://i.stack.imgur.com/cb20A.png"/>
</div>
You can then replace the .active class by whatever you want.

jQuery - How to make images overlap when fading in and out?

So I have this:
https://jsfiddle.net/ysr50m2m/1/
Html
class="photoset">
<img src="http://inspirebee.com/wp-content/uploads/2013/04/animal-fashion-parade.jpg" />
<img src="http://www.fubiz.net/wp-content/uploads/2013/03/Fashion-Zoo-Animals18.jpg" />
<img src="http://inspirebee.com/wp-content/uploads/2013/04/animal-in-fashion.jpg" />
<img src="http://www.fubiz.net/wp-content/uploads/2013/03/Fashion-Zoo-Animals20.jpg" />
</div>
<div class="photoset">
<img src="http://www.fubiz.net/wp-content/uploads/2013/03/Fashion-Zoo-Animals26.jpeg" />
<img src="http://www.fubiz.net/wp-content/uploads/2013/03/Fashion-Zoo-Animals14.jpg" />
<img src="http://inspirebee.com/wp-content/uploads/2013/04/animal-fashion.jpg" />
<img src="https://framboisemood.files.wordpress.com/2013/04/fashion-zoo-animals13.jpg" />
<img src="http://www.fubiz.net/wp-content/uploads/2013/03/Fashion-Zoo-Animals9.jpg" />
</div>
CSS
.photoset > img:not(:first-child) {
display: none;
}
JavaScript
$(document).ready(function() {
$('.photoset').each(function(){
$(this).data('counter', 0);
});
var showCurrent = function(photoset) {
$items = photoset.find('img');
var counter = photoset.data('counter');
var numItems = $items.length;
var itemToShow = Math.abs(counter % numItems);
$items.fadeOut();
$items.eq(itemToShow).fadeIn();
};
$('.photoset').on('click', function(e) {
e.stopPropagation();
var photoset = $(this);
var pWidth = photoset.innerWidth();
var pOffset = photoset.offset();
var x = e.pageX - pOffset.left;
if (pWidth / 2 > x) {
photoset.data('counter', photoset.data('counter') - 1);
showCurrent(photoset);
} else {
photoset.data('counter', photoset.data('counter') + 1);
showCurrent(photoset);
}
});
});
and I want the images to overlap. When I click an image, the next one appears first on the bottom and then it appears in place of the first image.
How can I solve this issue? Thanks in advance.

Since 2 elements can't occupy the same position unless they're positioned to do so, I absolutely placed the other image above the previous one, and when the previous one disappears, I removed the absolute positioning.
Fiddle:
https://jsfiddle.net/qu1Lxjo1/
CSS:
.photoset {
position: relative;
}
.photoset img {
position: relative;
top: 0px;
left: 0pxx
}
JS:
$items.fadeOut();
$items.eq(itemToShow).fadeIn({done: function() {
$(this).css('position','relative')
}}).css('position', 'absolute');
};

Improve slide effect

I have created a simple slider
html
<div id="sldvid1" class="slider" >
<img picnum="1" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail1.png" />
<img picnum="2" style="display:none;" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail7.png" />
<img picnum="3" style="display:none;" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail14.png" />
</div>
<hr>
<div id="sldvid2" class="slider" >
<img picnum="1" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail1.png" />
<img picnum="2" style="display:none;" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail7.png" />
<img picnum="3" style="display:none;" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail14.png" />
</div>
$
var timer1 = setInterval(runSlide, 1000);
var curnum = 1;
function runSlide()
{
curnum = $(".slider img:visible").attr('picnum');
//$("#sldvid1 img[picnum=" + curnum + "]").fadeOut();
if(curnum == 3){
curnum = 1;
}
else
{
curnum++;
}
// $(".slider img").hide();
//$(".slider img[picnum=" + curnum + "]").show();
$(".slider img").hide();
$(".slider img[picnum=" + curnum + "]").show();
//console.log(curnum);
}
CSS
.slider{
height:50px;
}
Demo
http://jsfiddle.net/mparvez1986/vf401e2y/
Everything is working fine, I just need some one to improve effect so that it could effect like moving from left to right, I tried with some effect, but it seems it required some css manipulation as well
Thanks

I modified your code to create a carousel where images are slid in and out. I accomplished this by animating the margin-left CSS property with jQuery. I specified a size for the .slider class and used overflow: hidden; to ensure the sliding images were not displayed outside of it.
If you wish, you can change the transition effect by changing the CSS property that is animated and ensuring that the elements are in the correct position for the animation before it begins.
You can also change the speed of the animation by changing the magic number 1000 that I've left in the calls to animate. This number is specified in milliseconds.
By the way, I should point out that while custom HTML attributes are allowed in HTML5 they should begin with data-; they are called data attributes.
jsfiddle
HTML
<div id="sldvid1" class="slider">
<img class="active" data-slide-to="0" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail1.png"/>
<img data-slide-to="1" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail7.png"/>
<img data-slide-to="2" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail14.png"/>
</div>
<hr>
<div id="sldvid2" class="slider">
<img class="active" data-slide-to="0" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail1.png"/>
<img data-slide-to="1" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail7.png"/>
<img data-slide-to="2" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail14.png"/>
</div>
CSS
.slider {
position: relative;
width: 50px;
height: 50px;
overflow: hidden;
}
.slider img {
display: none;
width: 100%;
position: absolute;
}
.slider .active {
display: inline-block;
}
.slider .sliding {
display: inline-block;
}
JavaScript
var timer = setInterval(runSlide, 2000);
function runSlide() {
// Slide each slider on the page.
$(".slider").each(function (index, element) {
// Get the elements involved in the slide.
var numChildren = $(this).children().length;
var activeChild = $(this).children(".active");
var activeSlideTo = $(activeChild).attr("data-slide-to");
var nextSlideTo = (parseInt(activeSlideTo) + 1) % numChildren;
var nextChild = $(this).find("*[data-slide-to=" + nextSlideTo + "]");
// Prepare for slide.
$(activeChild).css("margin-left", "0%");
$(nextChild).css("margin-left", "-100%");
$(activeChild).addClass("sliding");
$(nextChild).addClass("sliding");
$(activeChild).removeClass("active");
// Slide using CSS margin-left.
$(activeChild).animate({"margin-left": "100%"}, 1000, function () {
$(this).removeClass("sliding");
});
$(nextChild).animate({"margin-left": "0%"}, 1000, function () {
$(this).addClass("active");
$(this).removeClass("sliding");
});
});
}

Ended with following
setInterval(function() {
$('#sldvid1 > img:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#sldvid1');
}, 3000);

Slideshow using Jquery, images do not fit window

I am trying to make a slideshow using jquery, I am a rooky in this code and am only familiar with css and html (though I am unsure how to position things in css). I want to create my slideshow and followed this template however I don't know how to change aspects of it, I tried messing around with it however no luck. My images are much bigger than the slide window created, I want to fit the image to the window, since now only a portion of the image is shown, which doesn't look very good.
So I was wondering how I could fit the complete image in that slidewindow (not a portion)
Here is what I have as html:
<div id="slideshow">
<div id="slideshowWindow">
<div class="slide">
<img src="Images/DSC_0419 copy.JPG" />
</div>
<div class="slide">
<img src="Images/DSC_1019 copy.JPG" />
</div>
<div class="slide">
<img src="Images/DSC_2975.JPG" />
</div>
</div>
</div>
My CSS:
#slideshow #slideshowWindow {
width:1000px;
height:700px;
margin:0;
padding:0;
position:relative;
overflow:hidden;
}
#slideshow #slideshowWindow .slide {
margin:0;
padding:0;
width:1000px;
height:700px;
float:left;
position:relative;
}
And this is my Jquery script:
<script type="text/javascript">
$(document).ready(function() {
var currentPosition = 0;
var slideWidth = 1000;
var slides = $('.slide');
var numberOfSlides = slides.length;
var slideShowInterval;
var speed = 3000;
slideShowInterval = setInterval(changePosition, speed);
slides.wrapAll('<div id="slidesHolder"></div>')
slides.css({ 'float' : 'left' });
$('#slidesHolder').css('width', slideWidth * numberOfSlides);
function changePosition() {
if(currentPosition == numberOfSlides - 1) {
currentPosition = 0;
} else {
currentPosition++;
}
moveSlide();
}
function moveSlide() {
$('#slidesHolder')
.animate({'marginLeft' : slideWidth*(-currentPosition)});
}
});
</script>

Try ...
#slideshow #slideshowWindow .slide img {
height: 100%;
width: 100%;
}
As it is, the CSS above will stretch the images ... if they are sized proportionately, this works fine ...
However, if you might be dealing with some images that are portrait and some landscape, try setting only height or only width; then, add adjustments to center when needed.