Reg.ru: домены и хостинг

Крупнейший регистратор и хостинг-провайдер в России.

Более 2 миллионов доменных имен на обслуживании.

Продвижение, почта для домена, решения для бизнеса.

Более 700 тыс. клиентов по всему миру уже сделали свой выбор.

Перейти на сайт->

Бесплатный Курс "Основы работы с фреймворком CakePHP"

Хотите научиться создавать сайты любой сложности быстро?

Познакомьтесь ближе с одним из замечательных фреймворков - CakePHP.

Узнайте о его преимуществах, освойте основные функции и начните применять CakePHP на практике!

Получить в подарок->

Бесплатный Курс "Рисование дизайна сайта с нуля"

Обучающая система для полных новичков в дизайне.

Вы научитесь создавать дизайн любых сайтов - для себя и на заказ.

Вы сможете неплохо зарабатывать, применяя полученные знания на практике.

Получить в подарок->

Бесплатный тренинг "PHP для Создания Сайтов: Введение"

Что нужно знать для создания PHP-сайтов?

Ответ здесь. Только самое важное и полезное для начинающего веб-разработчика.

Узнайте, как создавать качественные сайты на PHP всего за 2 часа и 27 минут!

Записаться бесплатно->

Бесплатный курс "Сайт-Визитка За 15 уроков"

Создайте свой сайт за 3 часа и 30 минут.

После просмотра данного видеокурса у Вас на компьютере будет готовый к использованию сайт, который Вы сделали сами.

Вам останется лишь наполнить его нужной информацией и изменить дизайн (по желанию).

Получить в подарок->

Бесплатный курс "Основы HTML и CSS"

Изучите основы HTML и CSS менее чем за 4 часа.

После просмотра данного видеокурса Вы перестанете с ужасом смотреть на HTML-код и будете понимать, как он работает.

Вы сможете создать свои первые HTML-страницы и придать им нужный вид с помощью CSS.

Получить в подарок->

Бесплатный курс "Сайт на WordPress"

Хотите освоить CMS WordPress?

Получите уроки по дизайну и верстке сайта на WordPress.

Научитесь работать с темами и нарезать макет.

Бесплатный видеокурс по рисованию дизайна сайта, его верстке и установке на CMS WordPress!

Получить в подарок->

Бесплатный курс "Основы работы с JavaScript"

Хотите изучить JavaScript, но не знаете, как подступиться?

После прохождения видеокурса Вы освоите базовые моменты работы с JavaScript.

Развеются мифы о сложности работы с этим языком, и Вы будете готовы изучать JavaScript на более серьезном уровне.

Получить в подарок->

Воспламенитель Кода: Сайт-Визитка на CodeIgniter

Курс предназначен для тех, кто знает основы HTML и CSS.

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

Все, что нужно для разработки Сайта-Визитки: от шаблона и до переноса на хостинг.

Подробнее->

JavaScript и jQuery с нуля

Курс предназначен для тех, кто хочет повысить интерактивность и удобство своего сайта для посетителей.

Изучив его, Вы сможете создавать более красивые и функциональные сайты.

104 видеоурока: от основ JavaScript до готовых решений на jQuery.

Подробнее->

Повелитель PHP: кратчайший путь к мастерству без толстых учебников.

Курс предназначен для тех, кто хочет освоить язык PHP и свободно с ним работать.

Изучив его, Вы сможете при разработке сайтов решать любые задачи, требующие знаний PHP.

Подробнее->

*Наведите курсор мыши для приостановки прокрутки.


Интеграция фотогалереи в сайт на 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. Скачайте его, чтобы получить общее представление о возможностях этого фреймворка:

Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!


Смотрите также:

PHP: Получение информации об объекте или классе, методах, свойствах и наследовании

PHP: Получение информации об объекте или классе, методах, свойствах и наследовании

CodeIgniter: жив или мертв?

CodeIgniter: жив или мертв?

Функции обратного вызова, анонимные функции и механизм замыканий

Функции обратного вызова, анонимные функции и механизм замыканий

Применение функции к каждому элементу массива

Применение функции к каждому элементу массива

Слияние массивов. Преобразование массива в строку

Слияние массивов. Преобразование массива в строку

Деструктор и копирование объектов с помощью метода __clone()

Деструктор и копирование объектов с помощью метода __clone()

Эволюция веб-разработчика или Почему фреймворк - это хорошо?

Эволюция веб-разработчика или Почему фреймворк - это хорошо?

Магические методы в PHP или методы-перехватчики (сеттеры, геттеры и др.)

Магические методы в PHP или методы-перехватчики (сеттеры, геттеры и др.)

PHP: Удаление элементов массива

PHP: Удаление элементов массива

Ключевое слово final (завершенные классы и методы в PHP)

Ключевое слово final (завершенные классы и методы в PHP)

50 классных сервисов, программ и сайтов для веб-разработчиков

50 классных сервисов, программ и сайтов для веб-разработчиков

Наверх