当用户单击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中的缩略图时如何显示全尺寸图像?的主要内容,如果未能解决你的问题,请参考以下文章