Веб-мастерская Ларисы ВоронинойПростая галерея для сайта.
WEB-мастерская Ларисы Ворониной logo

Простая галерея для сайта. Янв 30 2017


Вот пример простой галереи для сайта с минимум кода. Написана она на чистом CSS, без Javascript и Jquery.

Создаём папку gallery. В этой папке будут находиться два файла index.html и style.css.

Для галереи требуется подготовить изображения и миниатюры к ним и поместить в папку images.

А вот собственно и коды. Сложного в них ничего нет.

index.html

<!DOCTYPE html>
<html>
     <head>
          <meta charset="utf-8">
          <link rel="stylesheet" type="text/css" href="style.css" >
          <title>Простая галерея для сайта</title>
     </head>
     <body>
          <div class="wrapper">
               <ul class="min">
                    <li><a href="#img1"><img src="images/min1.jpg" /></a></li>
                    <li><a href="#img2"><img src="images/min2.jpg" /></a></li>
                    <li><a href="#img3"><img src="images/min3.jpg" /></a></li>
                    <li><a href="#img4"><img src="images/min4.jpg" /></a></li>
                    <li><a href="#img5"><img src="images/min5.jpg" /></a></li>
               </ul>
               <div class="images">
                    <div><a name="img1"></a><img alt="" src="images/img1.jpg" /></div>
                    <div><a name="img2"></a><img alt="" src="images/img2.jpg" /></div>
                    <div><a name="img3"></a><img alt="" src="images/img3.jpg" /></div>
                    <div><a name="img4"></a><img alt="" src="images/img4.jpg" /></div>
                    <div><a name="img5"></a><img alt="" src="images/img5.jpg" /></div>
               </div>
          </div>
     </body>
</html>

style.css

body {
background: #222;
}
.wrapper{
margin: 0 auto;
overflow: hidden;
width: 1100px;
margin-top: 50px;
}
.min {
list-style: none;
padding: 0;
margin: 0;
float: left;
}
.min li {
padding: 0;
margin: 0;
float: left;
clear: both;
}
.min li a {
display: block;
padding: 0 20px 21px 0;
}
.min li a img {
display: block;
}
.images {
width: 900px;
height: 500px;
overflow: hidden;
}