<ul id="gallereya">
<li><img src="ссылка на картинку" alt="$SITE_NAME$" /></li>
<li><img src="ссылка на картинку" alt="$SITE_NAME$" /></li>
<li><img src="ссылка на картинку" alt="$SITE_NAME$" /></li>
<li><img src="ссылка на картинку" alt="$SITE_NAME$" /></li>
<li><img src="ссылка на картинку" alt="$SITE_NAME$" /></li>
.... сколько угодно душе))
</ul>

ul#gallereya {
width:100%;
padding:0;
text-align:center
}

ul#gallereya li {
display:inline-block;
width:24%;
height:200px;
object-fit:cover;
margin:5px 2px;
overflow:hidden
}

ul#gallereya li img {
width:100%;
height:100%;
object-fit:cover;
-moz-transition:all 1s ease-out;
-o-transition:all 1s ease-out;
-webkit-transition:all 1s ease-out
}

ul#gallereya li img:hover {
-webkit-transform:scale(1.9);
-moz-transform:scale(1.9);
-o-transform:scale(1.9)
}

@media only screen and (max-width:480px) {
ul#gallereya li {
width:44%;
margin:1%
}
}

@media only screen and (max-width:960px) {
ul#gallereya li {
width:30%;
height:135px
}
}

<script type="text/javascript">$("#gallereya img").each(function () {
    if ($(this).attr("src").length > 0) {
  var a = "undefined" != typeof this.title ? ' title="' + this.title + '"' : "undefined" != typeof this.alt ? ' title="' + this.alt + '"' : "";
  $(this).wrap('<a href="' + this.src + '" class="ulightbox" target="_blank"' + a + "></a>")
    }
});</script>