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

Posted

技术标签:

【中文标题】当用户单击erb中的缩略图时如何显示全尺寸图像?【英文标题】:how to show the full size image when user click the thumbnail image in 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" >  
</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);

【问题讨论】:

【参考方案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>

【讨论】:

以上是关于当用户单击erb中的缩略图时如何显示全尺寸图像?的主要内容,如果未能解决你的问题,请参考以下文章

如何从jQuery中的缩略图放大图像?

在 iPhone 上显示多个图像缩略图时 UI 失真

WPF/C#单击图像缩略图->显示该图像大[关闭]

AVPlayerLayer 尺寸不正确

jQuery:如何在缩略图的单击上显示图像弹出窗口?

当英雄图像进入视口时如何突出显示缩略图