Пошаговое руководство для новичков по созданию,
раскрутке и монетизации собственного сайта.
WebPageMaker, Wordpress, Joomla - инструкции для
новичков по установке CMS и шаблонов к ним.
                                               Добро пожаловать в проект "Сайт с нуля" !
Прежде всего данный проект предназначен для тех, кто пытается создать сайт самостоятельно, то есть для новичков. Соответственно, вся информация изложена доступно, все этапы построения сайта сопровождаются скриншотами, что позволит начинающим вебмастерам быстро и просто освоиться в этом нелегком вопросе.
Здесь вы можете скачать русские версии WebPageMaker, WordPress, Joomla, Adobe Muse, а также инструкции по установке WordPress и Joomla на хостинг и мануалы по установке тем (шаблонов) для этих CMS.

                               Всем желаю удачи и смелых воплощений идей на вашем сайте !
2010 - 2018 © Сайт с нуля: пошаговое руководство для новичков по созданию, раскрутке и монетизации собственного сайта. WebPageMaker, WordPress, Joomla -  русские версии.
Автор и администратор  данного проекта - SvetLana_TSV.  Копирование материалов сайта разрешено только при наличии активной ссылки на данный проект.
Проект для новичков
Главная       Скачать       Уроки        Новости        Статьи        Контакты        Карта сайта
Оригинальная 3D-галерея для сайта

Приветствую всех посетителей сайта! Сегодня давайте остановимся на теме галерей для сайта и в качестве примера разберем процесс установки одной из трехмерных галерей. В предыдущих материалах  мы рассматривали создание галереи lightbox и простейшей галереи на чистом CSS.
 
Очень часто на сайте возникает необходимость красиво отобразить различные изображения, к примеру фотографии, образцы работ из портфолио или графические материалы. Для этих целей, в основном, используют галереи изображений. Сегодня в Интернете можно найти большое количество разнообразных галерей для сайта, от привычных lightbox до сложных конструкций с параллаксом и другими эффектами. С появлением новых технологий (jquery, css3, html5) функционал и внешний вид галерей постоянно совершенствуется.

Современные галереи привлекательны, адаптивны, просты в установке и способны "на высшем уровне" продемонстрировать графический контент сайта. Среди множества разновидностей галерей довольно нестандартно и свежо смотрятся 3D-галереи, создающие эффект трехмерного пространства.

Одну из подобных галерей мы рассмотрим ниже. Основная идея заключается в создании круговой карусели с одним изображением в центре и двумя по бокам. Боковым изображениям с помощью 3D-преобразований на уровне CSS задана перспектива - они немногу повернуты в зеркальном отображении, создавая реалистичный эффект. 

При активации автоматического режима, изображения будут сменять друг друга через заданный интервал времени. При выборе стандартного режима под галереей будут отображаться инструменты пагинации - две стрелочки для ручного перелистывания слайдов. Как выглядит галерея, можно посмотреть на скриншоте, а рабочая версия установлена на этой странице.

 














ПОДРОБНЕЕ

Теперь давайте разберем, как установить такую галерею-карусель на свой сайт. Сразу скажу, что процесс установки довольно прост и быстр, и подойдет для начального уровня пользователей.

Инструкция по установке галереи:

Шаг 1. Скачать и распаковать архив с исходниками. Внутри вы найдете папки со стилями, картинками, js-скриптами и текстовый файл с html-кодом.

Шаг 2. Подготовить изображения. В галерее по умолчанию используется 12 картинок в формате jpg размером 480х260 рх.

Шаг 3. Сформировать структуру галереи. Для этого готовый html-код из архива разместить на своем сайте между тегами <body>... </body> в том месте, где должна выводится галерея. В моем случае галерея является частью хедера. В самом коде заменить пути и подписи к картинкам на свои. Если не очень хочется переписывать пути, то при подготовке картинок им стоит оставить прежние названия, а если точнее, в данном примере в качестве названий картинок используется нумерация от 1 до 12.

Шаг 4. За внешний вид галереи отвечают стили, поэтому на данном этапе нужно подключить файлы css. Для этого в исходный код сайта между тегами <head>... </head> прописываются следующие строки:

<link rel="stylesheet" type="text/css" href="/css/demo.css" />
<link rel="stylesheet" type="text/css" href="gallery_3d/css/style.css" />
<script type="text/javascript" src="gallery_3d/js/modernizr.custom.53451.js"></script>

Шаг 5. На хостинге, в корневой директории создать отдельную папку для галереи. Я назвала ее "gallery_3d". Затем в эту папку перетянуть все исходники из архива, кроме текстового файла с кодом.

Шаг 6. Загрузить страницу с установленной галереей на сервер, после чего проверить работоспособность.

Всё, на этом установка галереи завершена! По умолчанию активирован режим автоматической смены картинок. Если вас по какой-то причине он не устраивает, то можно включить ручное перелистывание. Для этого в html-коде, в параметрах функции, инициирующей работу галереи, следует убрать строку autoplay: true, отвечающую за авторежим:

    $(function() {
                $('#dg-container').gallery({
                    autoplay: true
                })

Стрелочки для пагинации вложены в папку images, их вместе с изображениями нужно загрузить на сервер. На этом материал завершаю, как видите, установка галереи действительно проста. Без подготовки картинок весь процесс занимает максимум 10 минут.


Скачать архив с исходниками галереи

Всем желаю удачных проектов! До новых встреч!
С ув. Светлана (SvetLana_TSV).


P.S. Подписчики в этом выпуске рассылки бесплатно получат набор иконок на строительную тематику. В наборе 30 flat-иконок в формате PNG размером 512х512 рх.

Как видите, быть подписчиком "Сайт с нуля" выгодно - кроме новых материалов вы получаете бесплатно в каждом выпуске рассылки отличный бонус в виде платного контента. Не упускайте такую возможность!
           




Хочешь быть на шаг впереди и первее
остальных получать новые материалы
сайта? Тогда не забудь оставить свои
координаты: имя и электронный адрес!
Не забудь заглянуть в свою почту и подтвердить подписку!