Как показать изображение полного размера, когда пользователь нажимает миниатюрное изображение в erb?

Question

Я хочу изменить 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); 
} 

Answer 1

Я изменил его, как удар. use 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>