Использую свой хостинг на виртуальной машине с сервером Windows Server 2012, на котором крутится IIS 8. Сама виртуальная машина крутится в том же сервере с Hyper-V. Сайт сделан на joomla 3.1.1, которая стоит в корне сайта. Создал виртуальный каталог от корня сайта, допустим с названием /photos. Создал веб-юзера с доступом на чтение и ввёл его логин/пароль в настройках доступа к этому каталогу в IIS. Добавил этого веб-юзера в разрешения физической сетевой папки, для которой сделан виртуальный каталог. Теперь о главном. Пробовал несколько галерей, но они не видят файлы jpg в виртуальном каталоге. Они, видимо, хотят только физический каталог. В то же самое время, если просто выводить изображение стандартным способом joomla через тег img и вставлять в него путь типа "photos/file.jpg" (или "photos/folder/file.jpg", если есть подкаталог), то картинка в joomla видна без проблем, прямо в JCE. Вопрос, есть ли галереи, которые могут работать с виртуальным каталогом? Или может можно как-то "допилить" имеющуюся? Ну, например, простую, типа SIGE. Попробовал в ней тупо поменять путь на виртуальный - ничего не вышло. Видимо, функция opendir, которая читает содержимое директория, не работает с виртуальным каталогом (в плагине читается физический путь либо от /images, расположенного в корне сайта, либо от корня сайта).
Пока для пробы прикрутил Lightbox 2.51 (http://lokeshdhakar.com/projects/lightbox2/). Для этого (подразумевается, что архив распакован в корень сайта, т.е. в корне сайта расположена папка /lightbox) проделал следующее (часть нагуглил, часть сам догадался): 1. Подкорректировал исходники. Пришлось сделать для показа больших фото (в пикселях). В файле css/lightbox.css после строки (25) вставил: Код (CODE): #lightbox img { [COLOR="Blue"]max-height: 700px;[/COLOR] В файле js/lightbox.js внутри функции function LightboxOptions() скорректировал пути к графическим символам от корня сайта в папку /lightbox (строки 51, 52): Код (CODE): this.fileLoadingImage = '[COLOR="Blue"]/lightbox/[/COLOR]images/loading.gif'; this.fileCloseImage = '[COLOR="Blue"]/lightbox/[/COLOR]images/close.png'; Заменил на русские слова в строках 55, 56 (потом сохранить обязательно в UTF-8!): Код (CODE): this.labelImage = [COLOR="Blue"]"изображение"[/COLOR]; this.labelOf = [COLOR="Blue"]"из"[/COLOR]; И внутри функции function(imageWidth, imageHeight) (строка 215) сразу после открывающей фигурной скобки вставил текст для масштабирования под большие изображения: Код (CODE): if (imageHeight > 700) { imageWidth = imageWidth / imageHeight * 700; imageHeight = 700; } 2. В Joomla создал модуль "HTML код", назвал его mod_lightbox2, запретил показывать заголовок, назначил ему несуществующую позицию lightbox2 (надо убедиться, что такой позиции модуля в шаблоне нет), отключил редактор, нажав [Toggle Editor], чтобы он не "съел" код и ввёл следующий "Пользовательский текст": Код (CODE): <script type="text/javascript" src="lightbox/js/lightbox.js"></script> <link href="lightbox/css/lightbox.css" rel="stylesheet" /> 3. При создании материала надо в самом начале вставить следующий текст: Код (CODE): {loadposition lightbox2} Здесь lightbox2 - это как раз та самая несуществующая позиция модуля. Этим кодом мы загружаем модуль в материал, - пользуемся стандартным плагином Joomla "Контент - Загрузка модулей". По сути вставляем html-код - две строчки, необходимые для работы Lightbox (а загрузку jquery делает сама joomla). Ссылки в материале делаем как на сайте автора, вида: Код (CODE): <a href="images/image-1.jpg" rel="lightbox[galleryname]" title="Image 1 title">Image #1</a> <a href="images/image-2.jpg" rel="lightbox[galleryname]" title="Image 2 title">Image #2</a> В квадратных скобках добавляется имя группы (если надо). Или при наличии миниатюр типа такого: Код (CODE): <div class="imageRow"> <div class="set"> <div class="single first"> <a href="images/examples/image-1.jpg" rel="lightbox[plants]" title="Image 1 title"> <img src="images/examples/thumb-1.jpg" alt="image 1 of 3 thumb" /></a> </div> <div class="single"> <a href="images/examples/image-2.jpg" rel="lightbox[plants]" title="Image 2 title"> <img src="images/examples/thumb-2.jpg" alt="image 2 of 3 thumb" /></a> </div> <div class="single last"> <a href="images/examples/image-3.jpg" rel="lightbox[plants]" title="Image 3 title"> <img src="images/examples/thumb-3.jpg" alt="image 3 of 3 thumb" /></a> </div> </div> </div> В итоге изображения нормально показываются в том числе и из виртуального каталога (если им считать images в ссылках выше). Но вопрос о полноценной галерее для показа изображений из виртуального каталога, как расширения Joomla, остаётся открытым. Почему в галереях этого не сделано - непонятно...
Сегодня решил прикрутить в качестве галереи Colorbox 1.4.15 (http://www.jacklmoore.com/colorbox/). Она оказалась лучше чем Lightbox тем, что не имеет проблемы с масштабированием галереи на экране - оно происходит автоматически в зависимости от разрешения. Итак, действовал я по аналогичному сценарию. 1. Распаковал содержимое архива в корень сайта, например, в папку /colorbox. Удалил всё на первый взгляд ненужное: - README.md; - всю подпапку /content; - всю подпапку языковой поддержки /i18n (перевод сделал по другому, прямо в Joomla); - все файлы index.html из пяти подпакок /exampleX (в них лежат "темы"). 2. Отредактировал содержимое файла example4/colorbox.css, чтобы в "теме 4" не налезали русские слова друг на друга (шрифт, видимо не подходящий, не вдавался): - строку 37 изменил на: Код (CODE): #cboxCurrent{position:absolute; bottom:0px; left:1[COLOR="Blue"]3[/COLOR]0px; color:#999;} - строку 46 изменил на: Код (CODE): #cboxSlideshow{position:absolute; bottom:0px; right:[COLOR="Blue"]70[/COLOR]px; color:#444;} - строку 48 изменил на: Код (CODE): #cboxNext{position:absolute; bottom:0px; left:6[COLOR="Blue"][/COLOR]px; color:#444;} 3. Создал в Joomla пять модулей с HTML-кодом, которые определяют "темы" оформления галереи, некоторые настройки и перевод на русский. Содержимое текста в них одинаковое, отличается только цифрой в названии папки exampleX. Модули назвал тоже одинаково, типа mod_colorboxX (где X - цифра, та же, что и в папке "темы"). Позиции модулей тоже прописываем руками, чтобы таких позиций нигде в шаблоне не было, например, colorboxX (где X - та же цифра). Содержимое в "Пользовательский текст" вводим, предварительно отключив редактор ([Toggle Editor]): Код (CODE): <link rel="stylesheet" href="colorbox/example[COLOR="Blue"]1[/COLOR]/colorbox.css" /><script src="colorbox/jquery.colorbox-min.js"></script> <script> jQuery(document).ready(function() { jQuery('a.[COLOR="SeaGreen"]gallery[/COLOR]').colorbox( { opacity:0.5, rel:true, slideshow:true, height:"95%", current:"{current} из {total}", previous:"назад", next:"вперёд", close:"закрыть", xhrError:"Контент не загружается!", imgError:"Изображение не загружается!", slideshowStart:"старт слайд-шоу", slideshowStop:"стоп слайд-шоу" }); }); </script> Отличие вводимого текста в модулях только в одной цифре, выделенной синим цветом. Ключевое слово в тексте - название gallery, которое надо будет вбивать в материалах для определения галереи (можно выбрать другое). Можно и значения настроек покрутить, плюс добавить других (см. сайт разработчика Colorbox). Я выбрал параметры такими, чтобы галерея раскрывалась почти на всё окно браузера, картинка масштабировалась на всё окно галереи и автоматом запускалось слайд-шоу (его можно остановить и листать вручную), циклически показывая все картинки. 4. При оформлении материала для включения галереи надо вставить в него такой текст (выбор модуля по его позиции): Код (CODE): {loadposition colorbox5} Как, кстати, я уже выяснил (просветился чтением книги про jQuery), эту вставку можно сделать в любом месте, необязательно в начале (как я писал в предыдущем посте). Это вызовет вставку в код содержимого соответствующего модуля. В примере таким образом выбрана "тема 5" отображения галереи. Можно любую из пяти. Мне понравились с нечётными номерами. Далее надо вставить ссылки на изображения. Лучше сразу делать с миниатюрами, которые надо предварительно подготовить. Я для этого вооружился бесплатной программой FastStone Image Viewer (http://www.faststone.org/FSViewerDetail.htm). Ссылки я делал примерно так (пример одной): Код (CODE): <a class="[COLOR="SeaGreen"]gallery[/COLOR]" href="images/image1.jpg" title="Заголовок 1"><img src="images/thumbs/image1_tn.jpg" hspace="5" vspace="5" /></a> Нетрудно догадаться, что файлы с "_tn" в имени - это миниатюры (я сделал 120х90 пикселей). Значения hspace и vspace по 5 пикселей введены, чтобы соседние миниатюры в материале не сливались. Тут можно применить фантазию в оформлении. Главное не забыть вставить ключевое слово, выделенное зелёным. В итоге изображения тоже нормально показываются в том числе и из виртуального каталога. Неудобство только в том, что надо поработать руками, вбивая ссылки в материал. Но пока жить можно...
