Навигация

DataLife Engine v.10.5

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

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

Довольно типичная фотогалерея построенная на 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казка при наведении

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

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

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

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

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

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

Эффект лупы достигается благодаря использованию простого jQuery плагина Zoomy. Вам понадобятся две копии одного и того же изображения - первая - копия

Комментарии
Вконтакте

Информация

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.