如何在用户点击erb中的缩略图时显示全尺寸图像？

我想将html样式更改为erb。如何在用户点击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); 
}

来源

2016-03-16 yongwoon

我改变了它的打击。使用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>

来源

2016-03-23 02:04:01 yongwoon

如何在用户点击erb中的缩略图时显示全尺寸图像？

回答

相关问题