Интеграция фотогалереи в сайт на CodeIgniter
|
|
Размер: 45,6 Мб. Длительность: 16 мин. 57 сек. |
В этом уроке мы рассмотрим вопрос интеграции фотогалереи с сайтом на CodeIgniter.
Я получил несколько похожих просьб, поэтому решил записать данное видео и показать, как все это реализовать.
Сразу оговорюсь, что этот урок будет полезен в основном тем, кто уже создавал сайты на CodeIgniter или хотя бы изучил мой видеокурс "Сайт-визитка на CodeIgniter".
Что у нас есть на старте?
Есть готовый сайт, написанный на фреймворке CodeIgniter с админ-панелью, через которую можно добавлять новые страницы.
Нам нужно сделать так, чтобы на этом сайте-визитке появилась еще одна страница, на которой была бы фотогалерея.
Ну что ж, давайте этим займемся.
К уроку я приложил все необходимые дополнительные материалы, чтобы вы могли добиться нужного результата за минимальное время.
Вы можете просмотреть этот урок прямо сейчас, либо скачать его себе на компьютер по ссылке выше.
Под видео вы найдете сокращенную текстовую версию для этого видеоурока.
Краткий обзор урока (все подробности смотрите в видео):
Шаг 1.
- В папку css кладем файл prettyPhoto.css
- В папку images копируем папку gallery со всем ее содержимым (маленькие и большие изображения для галереи + темы оформления для галереи в папке prettyPhoto)
- В папку js кладем файлы: jquery.prettyPhoto.js, jquery.quicksand.js, script.js
Шаг 2.
Теперь нам нужно подключить к нашему сайту новые стили и скрипты, которые мы будем использовать. Сделаем мы это в файле head_view.php.
— Регулярная проверка качества ссылок по более чем 100 показателям и ежедневный пересчет показателей качества проекта.
— Все известные форматы ссылок: арендные ссылки, вечные ссылки, публикации (упоминания, мнения, отзывы, статьи, пресс-релизы).
— SeoHammer покажет, где рост или падение, а также запросы, на которые нужно обратить внимание.
SeoHammer еще предоставляет технологию Буст, она ускоряет продвижение в десятки раз, а первые результаты появляются уже в течение первых 7 дней. Зарегистрироваться и Начать продвижение
<link href="<?= base_url();?>css/prettyPhoto.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="<?= base_url();?>js/jquery.quicksand.js"></script> <script type="text/javascript" src="<?= base_url();?>js/script.js"></script> <script type="text/javascript" src="<?= base_url();?>js/jquery.prettyPhoto.js"></script>
Подключим три новых javascript-файла и файл стилей в определенной последовательности, чтобы в итоге получить картину, подобную этой:
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title><?= $page_content['title'];?></title> <meta name="keywords" content="<?= $page_content['keywords'];?>" /> <meta name="description" content="<?= $page_content['description'];?>" /> <link href="<?= base_url();?>css/templatemo_style.css" rel="stylesheet" type="text/css" /> <link href="<?= base_url();?>css/jquery.ennui.contentslider.css" rel="stylesheet" type="text/css" /> <link href="<?= base_url();?>css/prettyPhoto.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="<?= base_url();?>js/jquery-1.7.min.js"></script> <script type="text/javascript" src="<?= base_url();?>js/jquery.quicksand.js"></script> <script type="text/javascript" src="<?= base_url();?>js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="<?= base_url();?>js/script.js"></script> <script type="text/javascript" src="<?= base_url();?>js/jquery.prettyPhoto.js"></script> <script type="text/javascript" src="<?= base_url();?>js/jquery.ennui.contentslider.js"></script> <script type="text/javascript" src="<?= base_url();?>js/scripts.js"></script> </head>
Шаг 3.
Теперь заходим в админ-панель сайта и создаем страницу "Фотогалерея" и идентификатором gallery. Проверяем работоспособность этой страницы.
Шаг 4.
Выбираем для редактирования страницу "Фотогалерея". Далее в визуальном редакторе выбираем опцию "источник" для того, чтобы работать непосредственно с html-кодом и вставляем туда html-рамзетку галереи (я приложил ее в доп. материалах в файле code.htm)
Шаг 5.
Теперь давайте посмотрим на код.
Вначале идет немного стилей, которые используются для оформления галереи. В принципе можно было бы их вынести в отдельный файл стилей, который уже есть, но для простоты мы разместим их здесь.
Следующий момент заключается в том, что мы можем разделить фото по категориям для удобства.
Для этого мы сначала создадим неупорядоченный список, который содержит эти самые категории. После чего для каждой категории нужно задать класс со своим уникальным именем (например, cat-item-1, cat-item-2, cat-item-3 и cat-item-4)
<ul class="portfolio-categ filter">
<li>категории:</li>
<li class="all active"><a href="#">Все</a></li>
<li class="cat-item-1"><a href="#" title="Категория 1">Категория 1</a></li>
<li class="cat-item-2"><a href="#" title="Категория 2">Категория 2</a></li>
<li class="cat-item-3"><a href="#" title="Категория 3">Категория 3</a></li>
<li class="cat-item-4"><a href="#" title="Категория 4">Категория 4</a></li>
</ul>
Теперь, когда мы разобрались со всеми категориями, нужно создать отдельные элементы фотогалереи.
Одно изображение представлено следующим кодом:
<li class="portfolio-item2" data-id="id-0" data-type="cat-item-4">
<div>
<span class="image-block">
<a class="image-zoom" href="http://www.vizitka_ci/images/gallery/big/pic1.jpg" rel="prettyPhoto[gallery]" title="ВАЛЛ-И"><img width="225" height="140" src="http://www.vizitka_ci/images/gallery/thumbs/p1.jpg" alt="ВАЛЛ-И" title="ВАЛЛ-И" />
</a>
</span>
<div class="home-portfolio-text">
<h3 class="post-title-portfolio"><a href="#" rel="bookmark" title="ВАЛЛ-И">ВАЛЛ-И</a></h3>
<p class="post-subtitle-portfolio">релиз: 2008</p>
</div>
</div>
</li>
В данном коде нам интересны следующие моменты:
data-id - это уникальный идентификатор элемента галереи. Понятно, что для каждого изображения он должен быть свой.
data-type - это добавление принадлежности элемента к определенной категории, указанной в меню.
rel="prettyPhoto[gallery]" - используется для открытия большого изображения по клику.
Класс portfolio-item2 позволяет обозначить принадлежность элемента к галерее и этот момент можно перенастроить в файле script.js.
Также там можно настроить и такие моменты, как:
- время переключения между изображениями в режиме слайдшоу
- тему оформления для слайдшоу
- показ названий над изображениями и др.
Разумеется, вы также можете поработать при необоходимости с файлом prettyPhoto.css и подкорректировать стили для всплывающего окна с изображениями.
Если краткий текстовый обзор вам не до конца понятен, то изучите полную версию урока в видеоформате на этой странице выше.
С уважением, Дмитрий.
P.S. Есть ли альтернатива CodeIgniter? Можете решить сами, просмотрев бесплатный видеокурс по основам работы с PHP-фреймворком CakePHP. Скачайте его, чтобы получить общее представление о возможностях этого фреймворка:
Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!
— Разгрузит мастера, специалиста или компанию;
— Позволит гибко управлять расписанием и загрузкой;
— Разошлет оповещения о новых услугах или акциях;
— Позволит принять оплату на карту/кошелек/счет;
— Позволит записываться на групповые и персональные посещения;
— Поможет получить от клиента отзывы о визите к вам;
— Включает в себя сервис чаевых.
Для новых пользователей первый месяц бесплатно. Зарегистрироваться в сервисе
Смотрите также:
