We Keep Coding

SlickJS function working only on one slide

I'm using slick js to display items by slide. Each slide has 1 bigger featured image and 3 smaller thumbnails.
When a thumbnail is hovered, the class of 'thumbnail-active' is added, removing it from the previous one, and the thumbnail gets displayed as a featured image.
The problem is that this is working only on the first slide. I've tried to get the current slide and reapply the function each time the slide is changed, but it didn't seem to work.
Is there other way of doing it?
Here is the js:
<div class="img-wrapper">
<div class="slide-wrapper">
<img class="thumbnail thumbnail-active" src="https://images.pexels.com/photos/4937452/pexels-photo-4937452.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
<img class="thumbnail" src="https://images.pexels.com/photos/4937448/pexels-photo-4937448.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
<img class="thumbnail" src="https://images.pexels.com/photos/4937360/pexels-photo-4937360.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
</div>
<img id="featured" src="https://images.pexels.com/photos/4937452/pexels-photo-4937452.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
</div>
let thumbnails = document.getElementsByClassName('thumbnail')
let activeImages = document.getElementsByClassName('thumbnail-active')
for (var i = 0; i < thumbnails.length; i++) {
thumbnails[i].addEventListener('mouseover', function() {
if (activeImages.length > 0) {
activeImages[0].classList.remove('thumbnail-active')
}
this.classList.add('thumbnail-active')
document.getElementById('featured').src = this.src
})
}
jsFiddle

#Onkar is right. its because of duplicate id.
you can do:
document.querySelector('.slick-current #featured').src = this.src;
slick will add a class called slick-current to current slide.
its better to replace #featured with .featured in your script and use featured as class and not id.

you need to replace the id #featured with .featuredand then try the replace the code with the below line
//document.getElementById('featured').src = this.src; //old code
this.parentNode.parentNode.querySelector('.featured').src = this.src; // new line

Add add/remove class click picture in queue jQuery

I have those pictures
<img src=img1.jpg class=pic />
<img src=img2.jpg class=pic />
<img src=img3.jpg class=pic />
<img src=img4.jpg class=pic />
<img src=img5.jpg class=pic />
<img src=img6.jpg class=pic />
.ShowBorderRed{border:3px solid red;}
I want to add the class .ShowBorderRed once I click one of them and remove this class once I click another picture and add the class to this new image. JQuery

Use the following:
$(document).ready(function(){
var $img = $('.pic');
$img.click(function(event){
$img.removeClass('ShowBorderRed');
$(this).addClass('ShowBorderRed');
});
});

See the comments inline in the code:
// bind click event on all the images having pic class
$('img.pic').on('click', function() {
$(this).addClass('ShowBorderRed') // Add class to the clicked image
.siblings().removeClass('ShowBorderRed'); // Remove class from other sibling images
});
DEMO
OR
If the images are not siblings:
var $images = $('img.pic');
$images.on('click', function() {
$images.removeClass('ShowBorderRed'); // Remove class from all other images
$(this).addClass('ShowBorderRed'); // Add class to the clicked image
});
DEMO

Use the following code:
$(document).ready(function(){
var $img = $('.pic');
$img.click(function(event){
$img.removeClass('ShowBorderRed');
$(this).addClass('ShowBorderRed');
});
});
refer the below mentioned link.
http://jsfiddle.net/2QyY3/199/

Slider - How would you make a simple slider?

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

How to use jquery to swap the position of multiple images on click

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

Html in-page hidden text that isn't shown until link is clicked

sort of new to html. I'm looking to create animation that when am image is clicked, it plays an animation that splits open a half page of text and in stuff. Something like this: http://sketchtoy.com/62368639

If you want to do things like that, you should really have a look at a javascript framework like jquery (www.jquery.com)
I find this one particularly easy to learn.
For what you want to do:
<div style="display: none;" id="mytext">Your text</div>
<a onclick="$('#mytext').show()"></a>

The basic process is
Add the click handler for the images
Find the last image in the row that the clicked image is in
set the contents of the expanding element
insert the expanding element after the image from step 2
show the expanding element (in this case a slideDown animation)
This is using jQuery library, which you did not tag, but it makes doing this a lot easier. If you need a vanilla javascript approach one can be added.
HTML
<div id="container">
<img src="http://placehold.it/128x128" />
<img src="http://placehold.it/128x128" />
<img src="http://placehold.it/128x128" />
<img src="http://placehold.it/128x64" />
<img src="http://placehold.it/128x64" />
<img src="http://placehold.it/128x64" />
<div id="expander">
<img src="" />
<div id="info">
some info
</div>
</div>
</div>
JS
//Just making the expander half the height of the viewport
var winheight = $(window).height();
$("#expander").css("height",winheight/2);
$("img").click(function(){
var img = $(this);
var src = img.attr("src");
var afterImg = findLastImgInRow(img);
var expander = $("#expander");
//Hide the expander if previously open
expander.hide(0);
//just setting the insides
expander.find("img").attr("src",src);
expander.find("#info").html("This is a test");
//Put the expander after the last image in the row
//so it will appear between its row and the next
expander.insertAfter(afterImg);
expander.slideDown(600);
//This scrolls the page so that it will make the
//expander appear in the middle of the page
$('html, body').animate({
scrollTop: expander.offset().top-(winheight/4)
}, 600);
});
//Function to find the last image
//in a row by comparing their offset top values
function findLastImgInRow(img){
var imgTop = img.offset().top;
var img2 = img;
do{
if( img2.offset().top != imgTop ){
img2 = img2.prev();
break;
}
}while(img2=img2.next());
return img2;
}
JSFiddle Demo