Image change based on screen width

Question

I have an image carousel with corresponding thumbnails. I have a script that changes the image source when the viewport is smaller than 768px. The idea is that a smaller image will be switched out when the user is using a mobile device, so the images will take less time to load.

So far the images switch out just fine, but the thumbnails don't change/match. Any ideas on how to fix this?

Here's the codepen .

 $(document).ready(function(){ // get all images loaded var images = $(".unidoor-class"); // thumbnails containers var thumbnailContainer = $("#thumbnails"); // generate thumbnail images generateThumbnails(images, thumbnailContainer); // listeners for controls arrows $(".prev-next-button").on("click touchstart", function() { // get the images var currentImageIndex = $(".unidoor-class.active").index(); var isPrevious = $(this).hasClass("previous"); var nextIndex; if (isPrevious) { if (currentImageIndex === 0) { nextIndex = images.length - 1; } if (currentImageIndex > 0) { nextIndex = currentImageIndex - 1; } } else { if (currentImageIndex === images.length - 1) { nextIndex = 0; } if (currentImageIndex < images.length - 1) { nextIndex = currentImageIndex + 1; } } // remove any active class from images images.removeClass("active"); // get the next active image and add active class to that next current image $(images[nextIndex]).addClass("active"); }); $(".thumb").on("click touchstart", function(event){ event.preventDefault(); var indexSelected = $(this).data("img-index"); var currentShown = $(".unidoor-class.active").index(); if (currentShown === indexSelected) return false; images.removeClass("active"); $(images[indexSelected]).addClass('active'); }); function generateThumbnails(images, container) { var ul = $("<ul>"); images.each(function(index, element){ var currentThumb = $("<img>"); var li = $("<li>"); var src = $(this).attr("src"); currentThumb.attr("src", src); currentThumb.attr("class", "thumb"); currentThumb.data("img-index", index); li.append(currentThumb); ul.append(li); }); container.append(ul); } }); function makeResize(){ var imageSrc = $("#imgDetail img"); if($(window).width() <=768){ $(imageSrc).each(function(key,value){ $(value).attr('src',$(value).data('mobile')); }); }else{ $(imageSrc).each(function(key,value){ $(value).attr('src',$(value).data('default')); }); } } $(document).ready(function(){ $(window).resize(function(){ makeResize(); }); makeResize(); }); 

 * { margin: 0; padding: 0; } body{ margin: 0; padding:0; font-size: 100%; /* line-height: 1.6; */ /* font-family: Arial, Helvetica, sans-serif; */ /* height: 100% !important; */ } #green-room { background: #333 !important; } .slideshow-container { max-width: 1000px; position: relative; margin: auto; } #unidoor, .unidoor-class { position: absolute; width: 100%; margin: 0 auto; display: block; top: 0; left: 0; opacity: 0; transition: opacity .5s; height: auto; } .unidoor-class.active { position: relative; opacity: 1; } #prev { position: absolute; /* font-weight: bold; */ color: black; /* background-color: #fff; */ /* opacity: 0.5; */ left: 0; top: 0; bottom: 0; } #next { position: absolute; /* font-weight: bold; */ color: black; /* background-color: #fff; */ /* opacity: 0.5; */ right: 0; top: 0; bottom: 0; } #prev p, #next p { font-size: 3em; } #imgDetail { position: relative; width: 90%; margin: 0 auto; } #imgDetail a { text-decoration: none; display: flex; /* padding: 8px 16px; */ padding: 3% ; justify-content: center; align-items: center; } #imgDetail a:hover { background-color: #333; color: white; opacity: 0.5; } #imgDetail ul { margin: 0 auto; display: block; /* width: 50%; */ } #thumbnails { max-width: 1000px; width: 100%; display: inline-block; text-align: center; } .thumb { width: 21%; height: auto; /* margin: 15px 1% 0px 2%; */ margin-top: 15px; cursor: pointer; } #imgDetail li { display: inline; /* margin-right: 10px; */ } #thumbnails ul{ margin: 0 auto; display: block; } #thumbnails li{ display: inline; padding-right: 2%; } #thumbnails li:last-child{ padding-right: 0; } #green-room p { display: block; margin: 0 auto; /* font-size: 1em !important; */ } #green { padding-top: 15px; padding-bottom: 30px; text-align: center; color: white; font-family: 'Lato', sans-serif; margin: 0 auto; /* width: 100% !important;*/ } @media(max-width: 767px){ #green-room p { margin-right: 5% !important; margin-left: 5% !important; /* font-size: .75em !important; */ } #green { /* font-size: .75em !important; */ } } @media(min-width: 768px){ #green-room p { width: 90% !important; } #green { width: 90% !important; } } .footer { padding-top: 30px; background-color: #333; } 

 <script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <!-- Images not Owned by Me --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Daniel Pollack</title> <link rel="stylesheet" type="text/css" href="css/styles.css"/> </head> <body id="green-room"> <div class="slideshow-container"> <div id="imgDetail"> <img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_1.jpg" data-default="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_1.jpg" data-mobile="https://d7hftxdivxxvm.cloudfront.net/?resize_to=fit&width=450&height=300&quality=95&src=https%3A%2F%2Fd32dm0rphc51dk.cloudfront.net%2FV8KTk95Ejb_L3IYJyiaxzg%2Flarge.jpg" class="unidoor-class active" /> <img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_2.jpg" data-default="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_2.jpg" data-mobile="https://d7hftxdivxxvm.cloudfront.net/?resize_to=fit&width=450&height=300&quality=95&src=https%3A%2F%2Fd32dm0rphc51dk.cloudfront.net%2FzjSRdJ7x0NZ838u8Q3yTYw%2Flarge.jpg" class="unidoor-class" /> <img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_3.jpg" data-default="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_3.jpg" data-mobile="https://d7hftxdivxxvm.cloudfront.net/?resize_to=fit&width=450&height=300&quality=95&src=https%3A%2F%2Fd32dm0rphc51dk.cloudfront.net%2FQmkNTf3BizU7DN25dK9rQA%2Flarge.jpg" class="unidoor-class" /> <img src="https://cmkt-image-prd.global.ssl.fastly.net/0.1.0/ps/1243679/300/200/m2/fpnw/wm0/desert_04_01-.jpg?1462519267&s=294388259919b5be6294b07e96cda0b7" class="unidoor-class" /> <!--CONTROLS--> <a href="javascript:void(0);" id="prev" class="prev-next-button previous"><p>&#10092;</p></a> <a href="javascript:void(0);" id="next" class="prev-next-button next"><p>&#10093;</p></a> <!--Thumbnails--> </div> <div id="thumbnails"> </div> </div> <p id="green">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non iaculis magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <div class="footer"> </div> <script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script> <script> window.sr = ScrollReveal({reset: true}); sr.reveal('#unidoor'); </script> </body> </html> 

Answer 1

you forgot to recreate thumbnail after makeResize.

here the code.

 $(document).ready(function(){ window.sr = ScrollReveal({reset: true}); sr.reveal('#unidoor'); // get all images loaded var images = $(".unidoor-class"); // thumbnails containers var thumbnailContainer = $("#thumbnails"); // generate thumbnail images generateThumbnails(images, thumbnailContainer); // listeners for controls arrows $(".prev-next-button").on("click touchstart", function() { // get the images var currentImageIndex = $(".unidoor-class.active").index(); var isPrevious = $(this).hasClass("previous"); var nextIndex; if (isPrevious) { if (currentImageIndex === 0) { nextIndex = images.length - 1; } if (currentImageIndex > 0) { nextIndex = currentImageIndex - 1; } } else { if (currentImageIndex === images.length - 1) { nextIndex = 0; } if (currentImageIndex < images.length - 1) { nextIndex = currentImageIndex + 1; } } // remove any active class from images images.removeClass("active"); // get the next active image and add active class to that next current image $(images[nextIndex]).addClass("active"); }); $(document).on("click touchstart", ".thumb", function(event){ //here event.preventDefault(); var indexSelected = $(this).data("img-index"); var currentShown = $(".unidoor-class.active").index(); if (currentShown === indexSelected) return false; images.removeClass("active"); $(images[indexSelected]).addClass('active'); }); function generateThumbnails(images, container) { container.html(''); //here var ul = $("<ul>"); images.each(function(index, element){ var currentThumb = $("<img>"); var li = $("<li>"); var src = $(this).attr("src"); currentThumb.attr("src", src); currentThumb.attr("class", "thumb"); currentThumb.data("img-index", index); li.append(currentThumb); ul.append(li); }); container.append(ul); } $(window).resize(function(){ makeResize(); }); makeResize(); function makeResize(){ var imageSrc = $("#imgDetail img"); if($(window).width() <=768){ $(imageSrc).each(function(key,value){ $(value).attr('src',$(value).data('mobile')); }); }else{ $(imageSrc).each(function(key,value){ $(value).attr('src',$(value).data('default')); }); } generateThumbnails($(".unidoor-class"), $('#thumbnails')); //here } }); 

 * { margin: 0; padding: 0; } body{ margin: 0; padding:0; font-size: 100%; /* line-height: 1.6; */ /* font-family: Arial, Helvetica, sans-serif; */ /* height: 100% !important; */ } #green-room { background: #333 !important; } .slideshow-container { max-width: 1000px; position: relative; margin: auto; } #unidoor, .unidoor-class { position: absolute; width: 100%; margin: 0 auto; display: block; top: 0; left: 0; opacity: 0; transition: opacity .5s; height: auto; } .unidoor-class.active { position: relative; opacity: 1; } #prev { position: absolute; /* font-weight: bold; */ color: black; /* background-color: #fff; */ /* opacity: 0.5; */ left: 0; top: 0; bottom: 0; } #next { position: absolute; /* font-weight: bold; */ color: black; /* background-color: #fff; */ /* opacity: 0.5; */ right: 0; top: 0; bottom: 0; } #prev p, #next p { font-size: 3em; } #imgDetail { position: relative; width: 90%; margin: 0 auto; } #imgDetail a { text-decoration: none; display: flex; /* padding: 8px 16px; */ padding: 3% ; justify-content: center; align-items: center; } #imgDetail a:hover { background-color: #333; color: white; opacity: 0.5; } #imgDetail ul { margin: 0 auto; display: block; /* width: 50%; */ } #thumbnails { max-width: 1000px; width: 100%; display: inline-block; text-align: center; } .thumb { width: 21%; height: auto; /* margin: 15px 1% 0px 2%; */ margin-top: 15px; cursor: pointer; } #imgDetail li { display: inline; /* margin-right: 10px; */ } #thumbnails ul{ margin: 0 auto; display: block; } #thumbnails li{ display: inline; padding-right: 2%; } #thumbnails li:last-child{ padding-right: 0; } #green-room p { display: block; margin: 0 auto; /* font-size: 1em !important; */ } #green { padding-top: 15px; padding-bottom: 30px; text-align: center; color: white; font-family: 'Lato', sans-serif; margin: 0 auto; /* width: 100% !important;*/ } @media(max-width: 767px){ #green-room p { margin-right: 5% !important; margin-left: 5% !important; /* font-size: .75em !important; */ } #green { /* font-size: .75em !important; */ } } @media(min-width: 768px){ #green-room p { width: 90% !important; } #green { width: 90% !important; } } .footer { padding-top: 30px; background-color: #333; } 

  <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Daniel Pollack</title> <script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> </head> <body id="green-room"> <div class="slideshow-container"> <div id="imgDetail"> <img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_1.jpg" data-default="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_1.jpg" data-mobile="https://d7hftxdivxxvm.cloudfront.net/?resize_to=fit&width=450&height=300&quality=95&src=https%3A%2F%2Fd32dm0rphc51dk.cloudfront.net%2FV8KTk95Ejb_L3IYJyiaxzg%2Flarge.jpg" class="unidoor-class active" /> <img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_2.jpg" data-default="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_2.jpg" data-mobile="https://d7hftxdivxxvm.cloudfront.net/?resize_to=fit&width=450&height=300&quality=95&src=https%3A%2F%2Fd32dm0rphc51dk.cloudfront.net%2FzjSRdJ7x0NZ838u8Q3yTYw%2Flarge.jpg" class="unidoor-class" /> <img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_3.jpg" data-default="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_3.jpg" data-mobile="https://d7hftxdivxxvm.cloudfront.net/?resize_to=fit&width=450&height=300&quality=95&src=https%3A%2F%2Fd32dm0rphc51dk.cloudfront.net%2FQmkNTf3BizU7DN25dK9rQA%2Flarge.jpg" class="unidoor-class" /> <img src="https://cmkt-image-prd.global.ssl.fastly.net/0.1.0/ps/1243679/300/200/m2/fpnw/wm0/desert_04_01-.jpg?1462519267&s=294388259919b5be6294b07e96cda0b7" class="unidoor-class" /> <!--CONTROLS--> <a href="javascript:;" id="prev" class="prev-next-button previous"><p>&#10092;</p></a> <a href="javascript:;" id="next" class="prev-next-button next"><p>&#10093;</p></a> <!--Thumbnails--> </div> <div id="thumbnails"> </div> </div> <p id="green">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non iaculis magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <div class="footer"> </div> </body> </html>