获取预览图像，以便在单击时显示在主框中

时间：2018-02-23 23:00:43

标签： javascript html css carousel

我一直在寻找一种方法，例如每当我点击左侧的图像预览时，它只会在主框（Bigger Box）中显示我点击的图像。我尝试使用数据目标和Id这样做，但我感到困惑，并且不知道如何继续，因为没有任何工作。

任何人都知道如何实现这一目标？

＆＃13;
＆＃13; 
     $(document).ready(function(){
         $('.thumb-image').click(function(){
               var active = $('.thumb-image.active'); //get the element that has active class
               var image = $(this).find('img'); //get the clicked image
               var imageUrl = image.attr('src'); //get the src of the image
               active.removeClass('active'); //remove current active class
               $(this).addClass('active'); //add active class to clicked image
               $('#big-image').css('background-image', 'url(' + imageUrl + ')'); //transfer imageUrl to the main box
         }); 
     });
＆＃13; 
.left-col {
  width: 48.27586%;
  float: left;
  margin-right: 3.44828%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

 .left-col:after {
  content: " ";
  display: block;
  clear: both;
}

 .left-col .thumbs {
  width: 15.25424%;
  float: left;
  margin-right: 1.69492%;
}

 .left-col .thumbs a {
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  -moz-border-radius: 1px;
  -webkit-border-radius: 1px;
  border-radius: 1px;
  border: 1px solid #e2e2e3;
  display: block;
  margin-bottom: 8px;
  position: relative;
  width: 100%;
}


.tab-content {
  overflow: hidden; }
  .tab-content img {
    width: 100%;
    -webkit-animation-name: opacity;
            animation-name: opacity;
    -webkit-animation-duration: .3s;
            animation-duration: .3s; }

.left-col .thumbs a.active {
  border-color: #086fcf;
}

.left-col .thumbs a.active:hover {
  border-color: #086fcf;
}

 .left-col .thumbs a:hover {
  border-color: #b5b6bd;
}

 .left-col .thumbs img {
  display: block;
  width: 100%;
}

 .left-col .big {
  width: 83.05085%;
  float: right;
  margin-right: 0;
}

 .left-col .big .img {
  -moz-transition: all 600ms ease-out 0s;
  -o-transition: all 600ms ease-out 0s;
  -webkit-transition: all 600ms ease-out;
  -webkit-transition-delay: 0s;
  transition: all 600ms ease-out 0s;
  -moz-transform: translateY(0px);
  -ms-transform: translateY(0px);
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
  -moz-border-radius: 1px;
  -webkit-border-radius: 1px;
  border-radius: 1px;
  background: transparent no-repeat center center;
  -moz-background-size: cover;
  -o-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
  border: 1px solid #e2e2e3;
  display: block;
  height: 0;
  opacity: 1;
  padding-bottom: 133%;
}

.product-detail .left-col .big .img.animate {
  -moz-transition: all 0ms ease-out 0s;
  -o-transition: all 0ms ease-out 0s;
  -webkit-transition: all 0ms ease-out;
  -webkit-transition-delay: 0s;
  transition: all 0ms ease-out 0s;
  -moz-transform: translateY(-30px);
  -ms-transform: translateY(-30px);
  -webkit-transform: translateY(-30px);
  transform: translateY(-30px);
  opacity: 0;
}
＆＃13; 
<div class="left-col">
  <div class="thumbs tab-content">
    <a class="thumb-image active"  data-target="#pic-1" data-toggle="tab" href="//cdn.shopify.com/s/files/1/1047/6452/products/product_1024x1024.png?v=1446769025" data-index="0">
      <span><img src="//cdn.shopify.com/s/files/1/1047/6452/products/product_150x150.png?v=1446769025" alt="Tommy Hilfiger T-Shirt New York"></span>
    </a>
    <a class="thumb-image" data-target="#pic-2" data-toggle="tab" href="//cdn.shopify.com/s/files/1/1047/6452/products/tricko1_1024x1024.jpg?v=1447104179" data-index="1">
      <span><img src="//cdn.shopify.com/s/files/1/1047/6452/products/tricko1_150x150.jpg?v=1447104179" alt="Tommy Hilfiger T-Shirt New York"></span>
    </a>
    <a class="thumb-image" href="//cdn.shopify.com/s/files/1/1047/6452/products/tricko2_1024x1024.jpg?v=1447104180" data-index="2">
      <span><img src="//cdn.shopify.com/s/files/1/1047/6452/products/tricko2_150x150.jpg?v=1447104180" alt="Tommy Hilfiger T-Shirt New York"></span>
    </a>
    <a class="thumb-image" href="//cdn.shopify.com/s/files/1/1047/6452/products/tricko3_1024x1024.jpg?v=1447104182" data-index="3">
      <span><img src="//cdn.shopify.com/s/files/1/1047/6452/products/tricko3_150x150.jpg?v=1447104182" alt="Tommy Hilfiger T-Shirt New York"></span>
    </a>
  </div>
  <div class="big">
  <span id="big-image" class="img" quickbeam="image" style="background-image: url('//cdn.shopify.com/s/files/1/1047/6452/products/product_1024x1024.png?v=1446769025')" data-src="//cdn.shopify.com/s/files/1/1047/6452/products/product_1024x1024.png?v=1446769025"></span>
  <div id="banner-gallery" class="swipe">
    <div class="swipe-wrap">
      <div  id="pic-1" style="background-image: url('//cdn.shopify.com/s/files/1/1047/6452/products/product_large.png?v=1446769025')"></div>
      <div   id="pic-2" style="background-image: url('//cdn.shopify.com/s/files/1/1047/6452/products/tricko1_large.jpg?v=1447104179')"></div>
      <div style="background-image: url('//cdn.shopify.com/s/files/1/1047/6452/products/tricko2_large.jpg?v=1447104180')"></div>
      <div style="background-image: url('//cdn.shopify.com/s/files/1/1047/6452/products/tricko3_large.jpg?v=1447104182')"></div>
    </div>
</div>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

我已删除了拇指图像的href属性

试试这个脚本：

<script>
     $(document).ready(function(){
         $('.thumb-image').click(function(){
               var active = $('.thumb-image.active'); //get the element that has active class
               var image = $(this).find('img'); //get the clicked image
               var imageUrl = image.attr('src'); //get the src of the image
               active.removeClass('active'); //remove current active class
               $(this).addClass('active'); //add active class to clicked image
               $('#big-image').css('background-image', 'url(' + imageUrl + ')'); //transfer imageUrl to the main box
         }); 
     });
</script>

答案 1 :(得分：0)

问题是您的缩略图图片包含在具有href属性的<a>标记中。换句话说，您的图片是链接。单击链接时Web浏览器将执行的默认操作是导航到指定为<a class="thumb-image active" data-target="#pic-1" data-toggle="tab" href="//cdn.shopify.com/s/files/1/1047/6452/products/product_1024x1024.png?v=1446769025" data-index="0"> <span><img src="//cdn.shopify.com/s/files/1/1047/6452/products/product_150x150.png?v=1446769025" alt="Tommy Hilfiger T-Shirt New York"></span> </a> 属性值的URL。这正是你的例子中发生的事情。

换句话说，当您点击function()标签时，如

function(event)

然后浏览器将导航到https://cdn.shopify.com/s/files/1/1047/6452/products/product_1024x1024.png?v=1446769025。结果，您在浏览器中看到了大图像，并且您丢失了缩略图。您实际上已离开包含其他缩略图的页面。

您需要做的是阻止此默认浏览器操作。幸运的是，这很容易。 ：）

您的点击处理函数可以接受一个参数，即触发处理程序的click事件。目前，您只需编写event即可在Click事件处理程序中忽略此参数。将其更改为href以捕获该事件参数。

现在您有对该点击$(document).ready(function() { $('.thumb-image').click(function(event) { event.preventDefault(); var active = $('.thumb-image.active'); //get the element that has active class var image = $(this).find('img'); //get the clicked image var imageUrl = image.attr('src'); //get the src of the image active.removeClass('active'); //remove current active class $(this).addClass('active'); //add active class to clicked image $('#big-image').css('background-image', 'url(' + imageUrl + ')'); //transfer imageUrl to the main box }); });的引用，您可以通过调用event.preventDefault()来阻止浏览器导航到链接.left-col { width: 48.27586%; float: left; margin-right: 3.44828%; max-width: 100%; margin-left: auto; margin-right: auto; } .left-col:after { content: " "; display: block; clear: both; } .left-col .thumbs { width: 15.25424%; float: left; margin-right: 1.69492%; } .left-col .thumbs a { -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; -moz-border-radius: 1px; -webkit-border-radius: 1px; border-radius: 1px; border: 1px solid #e2e2e3; display: block; margin-bottom: 8px; position: relative; width: 100%; } .tab-content { overflow: hidden; } .tab-content img { width: 100%; -webkit-animation-name: opacity; animation-name: opacity; -webkit-animation-duration: .3s; animation-duration: .3s; } .left-col .thumbs a.active { border-color: #086fcf; } .left-col .thumbs a.active:hover { border-color: #086fcf; } .left-col .thumbs a:hover { border-color: #b5b6bd; } .left-col .thumbs img { display: block; width: 100%; } .left-col .big { width: 83.05085%; float: right; margin-right: 0; } .left-col .big .img { -moz-transition: all 600ms ease-out 0s; -o-transition: all 600ms ease-out 0s; -webkit-transition: all 600ms ease-out; -webkit-transition-delay: 0s; transition: all 600ms ease-out 0s; -moz-transform: translateY(0px); -ms-transform: translateY(0px); -webkit-transform: translateY(0px); transform: translateY(0px); -moz-border-radius: 1px; -webkit-border-radius: 1px; border-radius: 1px; background: transparent no-repeat center center; -moz-background-size: cover; -o-background-size: cover; -webkit-background-size: cover; background-size: cover; border: 1px solid #e2e2e3; display: block; height: 0; opacity: 1; padding-bottom: 133%; } .product-detail .left-col .big .img.animate { -moz-transition: all 0ms ease-out 0s; -o-transition: all 0ms ease-out 0s; -webkit-transition: all 0ms ease-out; -webkit-transition-delay: 0s; transition: all 0ms ease-out 0s; -moz-transform: translateY(-30px); -ms-transform: translateY(-30px); -webkit-transform: translateY(-30px); transform: translateY(-30px); opacity: 0; }的默认行为。

请参阅下面的工作代码段。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="left-col">
  <div class="thumbs tab-content">
    <a class="thumb-image active" data-target="#pic-1" data-toggle="tab" href="//cdn.shopify.com/s/files/1/1047/6452/products/product_1024x1024.png?v=1446769025" data-index="0">
      <span><img src="//cdn.shopify.com/s/files/1/1047/6452/products/product_150x150.png?v=1446769025" alt="Tommy Hilfiger T-Shirt New York"></span>
    </a>
    <a class="thumb-image" data-target="#pic-2" data-toggle="tab" href="//cdn.shopify.com/s/files/1/1047/6452/products/tricko1_1024x1024.jpg?v=1447104179" data-index="1">
      <span><img src="//cdn.shopify.com/s/files/1/1047/6452/products/tricko1_150x150.jpg?v=1447104179" alt="Tommy Hilfiger T-Shirt New York"></span>
    </a>
    <a class="thumb-image" href="//cdn.shopify.com/s/files/1/1047/6452/products/tricko2_1024x1024.jpg?v=1447104180" data-index="2">
      <span><img src="//cdn.shopify.com/s/files/1/1047/6452/products/tricko2_150x150.jpg?v=1447104180" alt="Tommy Hilfiger T-Shirt New York"></span>
    </a>
    <a class="thumb-image" href="//cdn.shopify.com/s/files/1/1047/6452/products/tricko3_1024x1024.jpg?v=1447104182" data-index="3">
      <span><img src="//cdn.shopify.com/s/files/1/1047/6452/products/tricko3_150x150.jpg?v=1447104182" alt="Tommy Hilfiger T-Shirt New York"></span>
    </a>
  </div>
  <div class="big">
    <span id="big-image" class="img" quickbeam="image" style="background-image: url('//cdn.shopify.com/s/files/1/1047/6452/products/product_1024x1024.png?v=1446769025')" data-src="//cdn.shopify.com/s/files/1/1047/6452/products/product_1024x1024.png?v=1446769025"></span>
    <div id="banner-gallery" class="swipe">
      <div class="swipe-wrap">
        <div id="pic-1" style="background-image: url('//cdn.shopify.com/s/files/1/1047/6452/products/product_large.png?v=1446769025')"></div>
        <div id="pic-2" style="background-image: url('//cdn.shopify.com/s/files/1/1047/6452/products/tricko1_large.jpg?v=1447104179')"></div>
        <div style="background-image: url('//cdn.shopify.com/s/files/1/1047/6452/products/tricko2_large.jpg?v=1447104180')"></div>
        <div style="background-image: url('//cdn.shopify.com/s/files/1/1047/6452/products/tricko3_large.jpg?v=1447104182')"></div>
      </div>
    </div>
imap
diamonds %>% 
    select(cut, color) %>%
    imap(
        function(x, name) { 
            table_1 <- janitor::tabyl(x)
            table_1$column_name <- name
            table_1
        }
    ) 

#$cut
#          x     n    percent column_name
#1      Fair  1610 0.02984798         cut
#2      Good  4906 0.09095291         cut
#3 Very Good 12082 0.22398962         cut
#4   Premium 13791 0.25567297         cut
#5     Ideal 21551 0.39953652         cut

#$color
#  x     n    percent column_name
#1 D  6775 0.12560252       color
#2 E  9797 0.18162773       color
#3 F  9542 0.17690026       color
#4 G 11292 0.20934372       color
#5 H  8304 0.15394883       color
#6 I  5422 0.10051910       color
#7 J  2808 0.05205784       color

相关问题
最新问题