基于屏幕宽度的图像更改

时间：2018-02-22 03:03:07

标签： javascript jquery slider

我有一个带有相应缩略图的图像轮播。我有一个脚本，当视口小于768px时更改图像源。这个想法是当用户使用移动设备时将切换出较小的图像，因此图像将花费较少的时间来加载。

到目前为止，图像切换正常，但缩略图不会改变/匹配。有想法该怎么解决这个吗？

这是docs。

$(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>

1 个答案:

答案 0 :(得分：0)

你忘了在makeResize之后重新创建缩略图。

这里的代码。

＆＃13;
＆＃13; 
$(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
		}
    });
＆＃13; 
* {
      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;
    }
＆＃13; 
    <!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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题