×

Галерея без использования медиагалереи битрикса

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

Задача

Имеем папку с сотней фотографий общим объёмом в 400 Мб. В крайне сжатые сроки необходимо сделать так, чтобы пользователь быстро и просто мог просмотреть все эти фотографии.

Поиск решения

Если создавать инфоблок с галереей, то в установленный срок никак не уложиться. Гораздо быстрее было бы воспользоваться давно проверенным jQuery плагином LightBox. Что я и сделал.

Обработка изображений

Для начала необходимо оптимизировать размер исходных файлов.

Имеем 400 мб фотографий по 10 мегапикселей каждая. Для отображения в режиме подробного просмотра достаточно чтобы фотография была шириной 950px. Размер файла не должен выходить за рамки 100-200 kb. Помимо этого, нужно еще создать небольшие изображения шириной в 100px и весом по 3-4 Кб для иконок в галерее.

Воспользовавшись массовым обработчиком файлов в фотошопе (или другом графическом редакторе) создаём две папки с изображениями. Одну для больших файлов (large) другую для маленьких (small).

Эти папки оптом загружаются в нужную директорию на веб сервере. Я залил их в /upload/unp2010/

Вывод галереи

Писать руками имена файлов и ссылки на них это долго и скучно. PHP может всё сделать за нас.

  1. <?php
  2. $smallPhotosDir = '/upload/unp2010/small'; //сюда вписывается директория с маленькими изображениями
  3. $smallPhotosServerDir = $DOCUMENT_ROOT.$smallPhotosDir; //$DOCUMENT_ROOT - путь к директории, в которой находится текущий сайт
  4. $smallPhotosArr = scandir($smallPhotosServerDir); //создаём массив с именами файлов
  5.  
  6. //тоже самое для больших файлов
  7. $largePhotosDir = '/upload/unp2010/large';
  8. $largePhotosServerDir = $DOCUMENT_ROOT.$largePhotosDir;
  9. $largePhotosArr = scandir($largePhotosServerDir);
  10. ?>

Теперь у нас всё есть для вывода картинок. LightBox должен найти на странице картинки, каждая из которых является ссылкой на большой файл. Сделаем это.

Нехитрыми вычислениями я определил, что больше пяти превьюшек в ряд у меня не влезет. Значит, будем выводить картинки строками по пять файлов.

  1. <div id="galery-box">
  2.   <?$lineCount = 0;//счетчик для строки
  3.   for($i = 0; $i != count($smallPhotosArr); $i++){
  4.     if($smallPhotosArr[$i] != "." and $smallPhotosArr[$i] != ".."){
  5.       if($lineCount == 0){
  6.         echo "<p>";
  7.       }
  8.       $lineCount++;?>
  9.       <a class="lightbox" href="<?=$largePhotosDir?>/<?=$largePhotosArr[$i]?>"><img src="<?=$smallPhotosDir?>/<?=$smallPhotosArr[$i]?>" /></a>
  10.       <?if($lineCount == 5){
  11.         echo "&#60;/p>";
  12.         $lineCount = 0;
  13.       }?>
  14.     <?}
  15.   }?>
  16. </div>

Если ширина файлов разнится, то строки будут разной длинны. Это можно было бы обойти выведя все файлы в одном параграфе. Браузер бы сам их расставил как следует. Но в этом случае, ни в одном браузере кроме FireFox и Chrome нельзя бы было задать высоту строки. Без этого свойства все картинки приклеютcя друг к другу сверху и снизу.

Теперь нужно скачать и подключить jQuery и LightBox.

  1. <!--подключаем jQuery (не забудьте указать правильный путь)-->
  2. <script type="text/javascript" src="/jquery-1.4.2.min.js"></script>
  3.  
  4. <!--подключаем jQuery LightBox-->
  5. <script src="/about/js/jquery.lightbox-0.5.js" type="text/javascript"></script>
  6.  
  7. <!--подключаем css стили для LightBox-->
  8. <link rel="stylesheet" type="text/css" href="/jquery.lightbox-0.5.css" media="screen" />
  9.  

Лайтбокс подключается очень просто, достаточно выбрать все ссылки с классом lightbox (в нашем случае) и вызвать функцию lightBox().

  1. <script type="text/javascript">
  2. $(function() {
  3.   $('.lightbox').lightBox();
  4. });
  5. </script>

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

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

Все эти действия должны занять час в худшем случае. И то только если ваш компьютер будет медленно обрабатывать изображения =)

В итоге можно получить вот такую галерею.

logo