Создаём галерею при помощи CSS

Опубликовано в Сайты
/
3 Сен 2012

Всем привет! Решил на писать урок как создать галерею для вашего сайта при помощи CSS средств, принцип работы галереи такой: при наведении на картинку рядом появляется её увеличенная копия.  Ссылка на исходники размещена в конце поста

Поняв структуру построения галереи можно далее при помощи java или php доработать её до совершенства. Весь код я буду писать в пустом html файле, надеюсь не возникнет затруднений при вставке в сайт.

 

 

 

Для для начала создаём в корне сайта папку с картинками, в теге img указываем путь к вашим картинкам.

<div>
 <ul class="gallery">
 <li><img src="img/1.jpg" class="photo">
 <div><img src="img/1.jpg">
 <p>Описание фото</p>
 </div>
 </li>
<li>
 <img src="img/2.jpg" class="photo">
 <div><img src="img/2.jpg">
 <p>Описание фото</p>
 </div>
 </li>
<li>
 <img src="img/3.jpg" class="photo">
 <div><img src="img/3.jpg">
 <p>Описание фото</p>
 </div>
 </li>
<li>
 <img src="img/4.jpg" class="photo">
 <div><img src="img/4.jpg">
 <p>Описание фото</p>
 </div>
 </li>
<li>
 <img src="img/5.jpg" class="photo">
 <div><img src="img/5.jpg">
 <p>Описание фото</p>
 </div>
 </li>
 </ul>
 </div>

Теперь будем придавать нормальный вид галерее.

для начала надо придать миниатюрам нормальный вид, для этого в CSS файле прописываем следующие строки:

 

.gallery {
 list-style: none;
 margin: 0;
 padding: 0;
 }
 .photo {
 width: 150px;
 border: 1px solid #323aea;
 padding: 1px;
 border-radius: 3px;
 -moz-border-radius: 3px;
 -webkit-border-radius: 3px;
 }

Надо настроить  теги с увеличенными копиями:

.gallery li {
 position: relative;
 width: 100px;
 }
.gallery li div {
 position: absolute;
 width: 500px;
 top: 0px;
 left: 174px;
 border: 1px solid #1a8ddd;
 padding: 10px;
 border-radius: 0 10px 10px 10px;
 -moz-border-radius: 0 10px 10px 10px;
 -webkit-border-radius: 0 10px 10px 10px;
 z-index: -5;
 display: none;
 }

Далее настраиваем увеличенные изображения и описание:

.gallery li div img {
 width: 500px;
 border: 2px solid #323aea;
 padding: 1px;
 border-radius: 3px;
 -moz-border-radius: 3px;
 -webkit-border-radius: 3px;
 }
 .gallery li div p {
 text-align: center;
 font: 16px/16px Arial;
}

И наконец добавляем действие появления копии при наведении курсора на миниатюру:

.gallery li:hover div {
 display: block;
 background: #7d83ff;
 }
.gallery li:hover .photo {
 border: 1px solid #323aea;
 padding: 10px;
 background: #7d83ff;
 border-right: 0;
 }

В итоге должно получиться следующее:

 

 

 

 

 

 

 

 

 

Вот тут можно скачать исходники урока.

 

Всем пока, подписывайтесь на страницу Вконтакте и rss ленту

комментариев 8 Добавить комментарий

  • Благодарю за пост.
    Есть одно замечание — косяк с кавычками:

    А надо

    • Спасибо, хоть это и простейший пример такой галереи, но с его помощь можно создавать довольно интересные вещи.
      Кавычки исправил. 🙂

  • А кавычки так и остались:)
    img src=»img/5.jpg»

    • Поставил шрифт для кода, теперь кавычки должны стать нормальными.

  • Отлично!

  • Как сделать чтобы изображение увеличенное стояло просто справа а не шла вместе с курсором?

    • Можно создать один div со всеми увеличенными картинками и так же показывать каждую из них при наведении курсора мыши на миниатюру.

  • подскажите пожалуйста как сделать чтобы картинки стояли по ширине?

Оставить комментарий