Отличная галерея на CSS3 и jQuery
В данном уроке мы создадим отличную галерею изображений на CSS3 и jQuery (с комбинацией техники "перетащи-и-брось" и плагина fancybox). Фотографии будут разбросаны по поверхности экрана, их можно перетаскивать и открывать для просмотра.
Шаг 1. Разметка HTML
Создадим документ HTML для нашей галереи. Сначала идет раздел заголовка:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru"> <head> <title>Отличная галерея CSS3 с использованием Lightbox | Матреиалы сайта RUSELLER.COM</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" type="text/css" href="/css/style.css" /> <link rel="stylesheet" type="text/css" href="/fancybox/jquery.fancybox-1.2.6.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="/js/jquery-css-transform.js"></script> <script type="text/javascript" src="/js/jquery-animate-css-rotate-scale.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> <script type="text/javascript" src="/fancybox/jquery.fancybox-1.2.6.pack.js"></script> <script type="text/javascript" src="/js/main.js"></script> </head>
Подсоединяем библиотеки Fancybox и jQuery, jquery-css-transform.js и jquery-animate-css-rotate-scale.js (нужны для вращения и масштабирования), css файлы и наш код JavaScript.
Затем в тело документа добавляем код для изображений:
<div id="gallery"> <div id="1" style="background-image: url('/images/thumb_pic1.jpg')"> <a class="fancybox" href="/images/pic1.jpg" target="_blank">Фото 1</a> </div> <div id="2" style="background-image: url('/images/thumb_pic2.jpg')"> <a class="fancybox" href="/images/pic2.jpg" target="_blank">Фото 2</a> </div> <div id="3" style="background-image: url('/images/thumb_pic3.jpg')"> <a class="fancybox" href="/images/pic3.jpg" target="_blank">Фото 3</a> </div> <div id="4" style="background-image: url('/images/thumb_pic4.jpg')"> <a class="fancybox" href="/images/pic4.jpg" target="_blank">Фото 4</a> </div> <div id="5" style="background-image: url('/images/thumb_pic5.jpg')"> <a class="fancybox" href="/images/pic5.jpg" target="_blank">Фото 5</a> </div> <div id="6" style="background-image: url('/images/thumb_pic6.jpg')"> <a class="fancybox" href="/images/pic6.jpg" target="_blank">Фото 6</a> </div> <div id="7" style="background-image: url('/images/thumb_pic7.jpg')"> <a class="fancybox" href="/images/pic7.jpg" target="_blank">Фото 7</a> </div> <div id="8" style="background-image: url('/images/thumb_pic8.jpg')"> <a class="fancybox" href="/images/pic8.jpg" target="_blank">Фото 8</a> </div> <div id="9" style="background-image: url('/images/thumb_pic9.jpg')"> <a class="fancybox" href="/images/pic9.jpg" target="_blank">Фото 9</a> </div> <div id="10" style="background-image: url('/images/thumb_pic10.jpg')"> <a class="fancybox" href="/images/pic10.jpg" target="_blank">Фото 10</a> </div> <div id="11" style="background-image: url('/images/thumb_pic11.jpg')"> <a class="fancybox" href="/images/pic11.jpg" target="_blank">Фото 11</a> </div> <div id="12" style="background-image: url('/images/thumb_pic12.jpg')"> <a class="fancybox" href="/images/pic12.jpg" target="_blank">Фото 12</a> </div> </div>
Шаг 2. CSS
body { background:#eee; margin:0; padding:0; } .example { position:relative; background-color:#fff; width:700px; overflow:hidden; border:1px #000 solid; margin:20px auto; padding:20px; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; } #gallery { height:600px; position:relative; width:100%; } #gallery div,#gallery div a { height:128px; overflow:hidden; width:192px; } #gallery div { background-color:#fff; background-position:50% 50%; background-repeat:no-repeat; border:2px solid #000; left:250px; padding:5px; position:absolute; top:200px; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; -moz-box-shadow:3px 3px 4px #444; -webkit-box-shadow:3px 3px 4px #444; box-shadow:3px 3px 4px #444; } #gallery div a { display:block; text-indent:-1000px; }
Шаг 3. JavaScript
$(document).ready(function(){ // когда документ готов // располагаем фотографии в случайном порядке $('#gallery div').each(function() { var iRL = Math.floor(Math.random() * 500); var iRT = Math.floor(Math.random() * 350); var iMT = Math.floor(Math.random() * 100 - 50); $(this).animate({ left: iRL, top: iRT, rotate: iMT + 'deg', }, 2000); }); var bPrevClick = false; // отключение реакции на нажатие кнопки мыши решает проблемы с fancybox при перетаскивании $('#gallery div').draggable({ // делаем фотографии перетаскиваемыми containment: 'parent', start: function(e,ui) { bPrevClick = true; }, stop: function(e, ui) { setTimeout(function() { bPrevClick = false; }, 50); } }); $('#gallery div a').bind('click',function(e) { if (bPrevClick) { e.preventDefault(); e.stopImmediatePropagation(); } }); $('#gallery div').mousedown(function(e) { // событие нажатия кнопки мыши var iMZ = 0; $('#gallery div').each(function() { // ищем максимальный zIndex var z = parseInt($(this).css('zIndex')) iMZ = (z > iMZ) ? z : iMZ; }); $(e.target).closest('#gallery div').css({ // поднимаем активное изображение zIndex: iMZ + 1 }); }); $('a.fancybox').fancybox({ // инициализация fancybox zoomSpeedIn: 500, // скорость увеличения zoomSpeedOut: 500, // скорость уменьшения overlayShow: false // отключаем маскирующий слой }); });
Шаг 4. Изображения.
Все изображения хранятся в папке ‘images’. здесь располагаются миниатюры (thumb_pic1.jpg, thumb_pic2.jpg .. thumb_pic12.jpg) и полноразмерные изображения(pic1.jpg, pic2.jpg .. pic12.jpg)
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/ll-50yMk5tc/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-05-06 » Как настраивать конверсионные стратегии: работа над ошибками
- 2024-04-22 » Комментирование кода и генерация документации в PHP
- 2024-04-22 » SEO в России и на Западе: в чем основные отличия
- 2024-04-22 » SEO для международного масштабирования
- 2024-04-22 » Как использовать XML-карты для продвижения сайта
- 2024-04-22 » Цифровой маркетинг: инструменты для продвижения и рекламы в 2024 году
- 2024-04-22 » Что такое CSS-модули и зачем они нам?
- 2024-04-17 » 23 сервиса для эффективного экспресс-аудита любого сайта
- 2024-04-08 » Яндекс переходит на новую версию Wordstat
- 2024-04-08 » Яндекс интегрировал в свой облачный сервис эмпатичную нейросеть
- 2024-04-08 » Новая версия нейросети Claude превзошла по мощности аналоги Google и OpenAI
- 2024-04-08 » Как пользоваться GPT 4 и Claude бесплатно и без VPN
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
Люди обычно тратят свою жизнь на то, чтобы свести к минимуму потери, а не на то, чтобы привести к максимуму приобретения. |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.