Наверх
 

Навигация
Опрос
Какие виды уроков Вы хотите видеть на сайте?
Битрикс
DLE
CSS
Joomla
Wordpress
Все для хостинга
Все для фотошопа
Другое

База уроков » » » Красивая фотогалерея на CSS3

Красивая фотогалерея на CSS3

10 янв 2014 | Комментариев: 0 | Просмотров: 2426

Красивая фотогалерея на CSS3

Довольно типичная фотогалерея построенная на HTML5, jQuery и CSS3. Существует возможность редактирования через CMS PageLime.

 
Разметка HTML

<section id="content" class="container">
    
            <div class="span-18 column rounded">
                <div class="span-6 column rotated">
                    <a id="image1" class="cms-editable polaroid" href="#pic-1" rel="lightbox" title="first image"> <img src="gallery/1_s.jpg" alt="image" /> </a>
                </div>
                <div class="span-6 column rotated">
                    <a id="image2" class="cms-editable polaroid" href="#pic-2" rel="lightbox" title="second image"> <img src="gallery/2_s.jpg" alt="image" /> </a>
                </div>
                <div class="span-6 column rotated last">
                    <a id="image3" class="cms-editable polaroid" href="#pic-3" rel="lightbox" title="third image"> <img src="gallery/3_s.jpg" alt="image" /> </a>
                </div>
                <div class="span-6 column rotated">
                    <a id="image4" class="cms-editable polaroid" href="#pic-4" rel="lightbox" title="first image"> <img src="gallery/4_s.jpg" alt="image" /> </a>
                </div>
                <div class="span-6 column rotated">
                    <a id="image5" class="cms-editable polaroid" href="#pic-5" rel="lightbox" title="first image"> <img src="gallery/5_s.jpg" alt="image" /> </a>
                </div>
                <div class="span-6 column rotated last">
                    <a id="image6" class="cms-editable polaroid" href="#pic-6" rel="lightbox" title="first image"> <img src="gallery/6_s.jpg" alt="image" /> </a>
                </div>
                
                <div id="pic-1">
                    <img src="gallery/1.jpg" alt="image" />
                </div>
                <div id="pic-2">
                    <img src="gallery/2.jpg" alt="image" />
                </div>
                <div id="pic-3">
                    <img src="gallery/3.jpg" alt="image" />
                </div>
                <div id="pic-4">
                    <img src="gallery/4.jpg" alt="image" />
                </div>
                <div id="pic-5">
                    <img src="gallery/5.jpg" alt="image" />
                </div>
                <div id="pic-6">
                    <img src="gallery/6.jpg" alt="image" />
                </div>
            </div>
            
    </section>


Скачать файл Скачек: 39 | Размер: 305,06 Kb

Демо-версия


Теги: галерея, HTML5, jQuery, CSS3

Ссылка на новость:

    html-cсылка на публикацию
    BB-cсылка на публикацию
    Прямая ссылка на публикацию

ЕЩЕ НА ЭТУ ТЕМУ:

Всплывающая подcказка при наведении

Всплывающая подcказка при наведении

Простой и очень легкий по размеру эффект всплывающей подсказки. Любой элемент с классом vtip будет отображать при наведении на него всплывающую подсказку на
Анимированный фон при наведении на ссылку

Анимированный фон при наведении на ссылку

Простой эффект анимированного фона при наведении курсора на ссылку
Красивый эффект анимации для галереи

Красивый эффект анимации для галереи

Эффект, который позволит преобразить вашу галерею фотографий, с помощью библиотеки Raphael и jQuery. Нужно создать три файла: index.html, default.css, init.js
Zoomy - красивый эффект лупы на изображении

Zoomy - красивый эффект лупы на изображении

Эффект лупы достигается благодаря использованию простого jQuery плагина Zoomy. Вам понадобятся две копии одного и того же изображения - первая - копия
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.