Галерея для сайта. Урок 8. БД

Галерея для сайта

От автора: в этом уроке мы вернем нашей галерее функционал, позволяющий получать картинки без перезагрузки страниц.

 

скачать исходникискачать урок

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

Далее нам нужно в файле pagination_ajax.php вместо прежнего получения картинок функцией get_images(), использовать новую функцию — get_images_db(). Также нам потребуется подключение к БД. Для этого просто скопируем шапку индексного файла и заменим ею весь код файла pagination_ajax.php до формирования вывода:

require_once 'config.php'; 
include 'functions.php';

$gallery = isset($_GET['gallery']) ? (int)$_GET['gallery'] : 1;
if($gallery < 1) $gallery = 1;

require_once 'pagination.php';

$dir = 'img/1/small/';
$bdir = 'img/1/big/';

$images = get_images_db($gallery, $start_pos, $perpage);

Следующим шагом нам нужно передавать номер галереи асинхронно, точно так же, как и номер страницы. Для этого определим перед подключением скрипта переменную gallery, которую и будем использовать в самом скрипте. Добавим переменную перед подключением файла script.js:

<script>var gallery = <?=$gallery?>;</script>

И передадим переменную в запросе, добавив ее к переменной page:

data: {page: page, gallery: gallery},

Осталось изменить формирование вывода в файле pagination_ajax.php. Заменим его на следующий:

// формирование + вывод
if($images): $output = null;
	foreach($images as $image):
		$output .= '<div class="item">';
		$output .= '<div>';
		$output .= '<a data-lightbox="lightbox" href="' .$bdir . $image['img']. '">';
		$output .= '<img class="front" src="' .$dir . $image['img']. '" alt="">';
		$output .= '<span class="back">' .$image['description']. '</span>';
		$output .= '</a>';
		$output .= '</div>';
		$output .= '</div>';
	endforeach;
endif;

Вот, собственно, и все. Теперь пагинация галереи работает без перезагрузки страницы.

На этом мы завершим текущий урок. Удачи и до новых встреч!

Хотите научиться делать фотогалереи как Вконтакте?

Прямо сейчас изучите курс по созданию красивой фотогалареи как Вконтакте!

Смотреть курс

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (21)

  1. Евгений

    Андрей, подскажите, есть ли способ выровнять блок DIV по центру экрана по вертикали?

  2. masik

    Планируете ли урок по созданию админки для этой галереи?
    Я имею в виду веб-интерфейс по загрузке и редактированию картинок и описаний в БД.
    С уважением…

    • Андрей Кудлай

      Скорее всего да.

      • Alexey

        Здравствуйте!!! В галерее есть проблема.
        если указать адрес галереи ваш_сайт.ru/1/
        и при переходе по страницам добавляется GET параметр page
        но если если строку
        изменить на <script src="js/scripts.js»>
        и перейти по адресу ваш_сайт.ru/1/ и при переходе по страницам выводятся картинки lightbox.

        • Андрей Кудлай

          Здравствуйте, Алексей.
          Удивительно, но Вы первый, кто сообщил об этой проблеме спустя год после выхода урока :)
          Проблема связана с использованием относительных путей при включенном mod_rewrite и решается использованием абсолютных путей (от корня сайта):
          1. При подключении файла scripts.js, конечно же, нужно указать полный путь к этому файлу, как это делается при подключении lightbox, например.
          2. В файле scripts.js в параметре url указываем полный путь к pagination_ajax.php. Например, если скрипт находится в корне, тогда указываем url: ‘/pagination_ajax.php’,
          3. В файле pagination_ajax.php изменяем путь для переменных $dir и $bdir на абсолютный:
          $dir = SITE.'img/1/small/';
          $bdir = SITE.'img/1/big/';

          После этого все должно работать корректно. Если возникнут дополнительные вопросы, тогда их можете задать на нашем форуме, там удобнее решать вопросы, связанные с кодом.

  3. Дмитрий

    Здравствуйте!

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

    • Андрей Кудлай

      Здравствуйте. Используйте подходящую функцию сортировки массива. Например, сортировать массив в обратном порядке можно функцией arsort().

  4. Дмитрий

    Андрей спасибо, с функцией arsort() все получилось!
    Еще такой вопрос. В этом уроке галерея имеет определенные габариты. То есть не адаптирована под разное разрешение и всегда открывается полностью. Но если эту галерею адаптировать с прокруткой вниз, то каждый раз переходя к следующей странице (а переход идет внизу страницы ) мы так и остаемся внизу но уже новой страницы. Как сделать чтобы при переходе к новой странице автоматом попадать в ее верхнюю часть?

    • Дмитрий

      Я немного по торопился, проверил сейчас в нескольких браузерах, оказывается такое поведение появляется только в FireFox. Остальные браузеры выдают каждую новую страницу сначала, сверху. Если этот глюк в FireFox как то решается, подскажите пожалуйста.

      • Андрей Кудлай

        Как вариант, можно попробовать добавить вызов функции scrollTop(), передав ей 0, тогда должна произойти прокрутка вверх.

        • Дмитрий

          Вот спасибо, все работает теперь отлично!
          Еще хотел сделать ссылку/кнопку под каждой картинкой. Как можно реализовать такое: вся галерея просмотры и ссылки/кнопки распределяются автоматом скриптом, но адрес ссылки нужно прописывать вручную, он идет с другого сайта и я заранее не знаю какой будет ссылка. Как можно сделать чтобы в отдельный фал PHP или Script не важно выводились строки
          1(номер картинки в галерее) <a href="ССЫЛКА КОТОРУЮ ПРОПИШУ САМ В РУЧНУЮ"
          2(номер картинки в галерее) <a href="ССЫЛКА КОТОРУЮ ПРОПИШУ САМ В РУЧНУЮ"
          3(номер картинки в галерее) <a href="ССЫЛКА КОТОРУЮ ПРОПИШУ САМ В РУЧНУЮ"
          и т.д.
          То есть картинку кидаю в папку а ссылку прописываю в ручную в строчке которая появляется автоматом для этого номера картинки.

          • Андрей Кудлай

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

  5. Дмитрий

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

  6. Дмитрий

    при подключении базы через Денвер выдает ошибку :
    Warning: mysqli_fetch_assoc() expects parameter 1 to be mysqli_result, boolean given in Z:\home\test1.loc\www\functions.php on line 11
    Array ( )

    В данной галерее нет картинок

    line 11 : while($row = mysqli_fetch_assoc($res)){

  7. Lata

    Как-то странно у вас скрипт счиает картинки. Начинает с 1 и затем до 6 считает правильно. Затем с 7 по 10 пропускает, дальше снова все нормально. В чем тут дело?

    • Андрей Кудлай

      Насколько я помню, в уроке выводились все картинки. Если у Вас выводятся не все, тогда нужно смотреть конкретно Вашу ситуацию.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree