Reg.ru: домены и хостинг
Крупнейший регистратор и хостинг-провайдер в России.
Более 2 миллионов доменных имен на обслуживании.
Продвижение, почта для домена, решения для бизнеса.
Более 700 тыс. клиентов по всему миру уже сделали свой выбор.
Бесплатный Курс "Практика HTML5 и CSS3"
Освойте бесплатно пошаговый видеокурс
по основам адаптивной верстки
на HTML5 и CSS3 с полного нуля.
Фреймворк Bootstrap: быстрая адаптивная вёрстка
Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.
Научитесь верстать просто, быстро и качественно, используя мощный и практичный инструмент.
Верстайте на заказ и получайте деньги.
Бесплатный курс "Сайт на WordPress"
Хотите освоить CMS WordPress?
Получите уроки по дизайну и верстке сайта на WordPress.
Научитесь работать с темами и нарезать макет.
Бесплатный видеокурс по рисованию дизайна сайта, его верстке и установке на CMS WordPress!
*Наведите курсор мыши для приостановки прокрутки.
Интеграция фотогалереи в сайт на 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.
<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. Скачайте его, чтобы получить общее представление о возможностях этого фреймворка:
Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!
Смотрите также:
