当用户单击erb中的缩略图时如何显示全尺寸图像？答案

【问题标题】：how to show the full size image when user click the thumbnail image in erb?当用户单击erb中的缩略图时如何显示全尺寸图像？
【发布时间】：2016-03-16 00:47:35
【问题描述】：

我想将 html 样式更改为 erb。

特别是链接到图像的标签。如果用户单击图像，我想在图像标签中显示图像的全尺寸。

我该怎么做？ erb不可能吗？请发表评论。

html

<li class="col-lg-3 design" data-id="id-0" data-type="web">  
  <a class="hover-wrap fancybox" data-fancybox-group="gallery" title="Work 1" href="img/works/1.jpg">  
    <span class="overlay-img"></span>  
    <span class="overlay-img-thumb font-icon-plus"></span>  
  </a>  
  <img src="img/works/1.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis elementum odio. Curabitur pellentesque, dolor vel pharetra mollis.">  
</li>

css

.item-thumbs {
  position: relative;
  overflow: hidden;
  margin-bottom: 30px;
  cursor: pointer;
}

.item-thumbs a + img {
  width: 100%;  
}

.item-thumbs .hover-wrap {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;

  opacity: 0;
  filter: alpha(opacity=0);

  -webkit-transition: all 450ms ease-out 0s;  
     -moz-transition: all 450ms ease-out 0s;
     -o-transition: all 450ms ease-out 0s;
        transition: all 450ms ease-out 0s;

  -webkit-transform: rotateY(180deg) scale(0.5,0.5);
     -moz-transform: rotateY(180deg) scale(0.5,0.5);
    -ms-transform: rotateY(180deg) scale(0.5,0.5);
     -o-transform: rotateY(180deg) scale(0.5,0.5);
      transform: rotateY(180deg) scale(0.5,0.5);  
}

.item-thumbs:hover .hover-wrap,
.item-thumbs.active .hover-wrap {
  opacity: 1;
  filter: alpha(opacity=100);

  -webkit-transform: rotateY(0deg) scale(1,1);
     -moz-transform: rotateY(0deg) scale(1,1);
    -ms-transform: rotateY(0deg) scale(1,1);
     -o-transform: rotateY(0deg) scale(1,1);
        transform: rotateY(0deg) scale(1,1);
}

.item-thumbs .hover-wrap .overlay-img {
  position: absolute;
  width: 50%;
  height: 100%;
  opacity: 0.80;
  filter: alpha(opacity=80);
  background: #000;
}

.item-thumbs .hover-wrap .overlay-img-thumb {
  position: absolute;
  border-radius: 60px;
  top: 50%;
  left: 50%;
  margin: -16px 0 0 -16px;
  color: #fff;
  font-size: 32px;
  line-height: 1em; 
  opacity: 1;
  filter: alpha(opacity=100);
}

【问题讨论】：

标签： html tags erb link-to atag

【解决方案1】：

我把它改成了一击。使用 image_path

  <li class="item-thumbs col-lg-3 design" data-id="id-0" data-type="web">
    <a class="hover-wrap fancybox" data-fancybox-group="gallery" title="Work 1" href= <%= image_path("moderna/works/1.jpg") %>>
      <span class="overlay-img"></span>
      <span class="overlay-img-thumb font-icon-plus"></span>
    </a>
    <%= image_tag("moderna/works/1.jpg", class: "img-responsive", alt: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis elementum odio. Curabitur pellentesque, dolor vel pharetra mollis." )%>
  </li>

【讨论】：