Highslide — простая и красивая галерея для сайта


Содержание материала:

Highsl > Автор: Андрей Косяк Дата публикации: 11.06.2010

HighSlide — хороший JS плагин для создания галерей(и не только), обладающий массой интересных возможностей и настроек. Создан человеком по имени Torstein Hønsi, распространяется с открытым кодом.

Как это работает?

Для начала глубоко погружаться не будем — создадим простую фото-галереечку:

Из архива берем всю папку graphics(там находится оформление), a также сам плагин «highslide-full.js» и стили «highslide.css»(для ИЕ6 еще и «highslide-ie6.css»). Подключаем:

В коде каждая картинка галереи должна быть «завернута» в ссылку, а ссылка должна иметь такие атрибуты:

Заметка

Всё! Самое элементарное готово! Смотрим результат.

Навигация

Для «полноценности» нашей галереи стоит наделить её такими характерными для галерей штуками как навигация и счетчик. Заодно познакомимся еще с некоторыми функциями и возможностями «Хая».

Добавим к подключаемым файлам следующий код:

Заметки

Хотелось бы заострить внимание на паре важных моментов:

  • не забывать про смену путей к оформлению
  • в ИЕ6 было замечено, что подложка под большим фото дивным образом «ломается», конечно не всегда, но если это случилось нужно проверить не затрагивают ли глобально Ваши стили таблицы и всё, что к ним относится. В моём случае проблема была в разделе сброса стилей, пришлось убрать из него все теги, касающиеся таблиц.
  • Update 17.01.2011 В папке архива highslide/ лежит несколько конфигураций плагина: c галлереей, с html, min-версии и pack-версии. Для конкретной задачи желательно подобрать необходимый функционал плагина, чтобы, как минимум, выиграть в размере скрипта. Если же ты хочешь исключить что-то более точечно, воспользуйся конфигуратором.

Преимущества

  • Работает «адекватно» во всех популярных браузерах
  • Довольно легко интегрируется в код
  • Гибкие настройки
  • Не требует наличия сторонних библиотек

Недостатки

  • «Загрязняет» код (необходимость прописывать ссылкам событие onclick() и класс highslide
  • На сегодняшний день не получилось оперативно изменить графическое оформление главного слайд-окна.

В данной статье были рассмотрены самые базовые и необходимые возможности Highslide, на полный перечень функций можно взгянуть в разделе «Материалы». В ближайшее время «ковырнем» глубже и рассмотрим другие очень полезные возможности такие как отображение html-контента с помощью AJAX, смену оформления и т.п.

Фотогалерея для своего сайта – все способы реализации

Это ж надо было умудриться столько наснимать, что сделанные вами фотографии даже у тещи под кроватью лежат. Жена сказала, чтоб дома больше ни одного снимка не было? Ох-хо-хох! Тогда пора все свои работы переносить в виртуальное пространство. А для этого вам понадобится фотогалерея для сайта:

Фотогалерея для сайта

Очень часто фотогалерею можно спутать с фотоальбомом. Основным признаком галереи является « выставление на показ » сразу всех фотографий. А в альбоме снимки отображаются по одному.

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

  • Возможность продемонстрировать все изображения ( фото ) сразу – иногда пользователям лень нажимать кнопки для перелистывания. А в классической фотогалерее все объекты сразу доступны для просмотра;
  • Простота реализации – стандартный образец можно легко создать с помощью html ;
  • Открытость – фотогалерея ( по сравнению с альбомом ) обладает большей « открытостью », что на подсознательном уровне позволяет вызвать доверие со стороны пользователей.

В то же время галерея обладает и недостатками. Основной из них – это громоздкость. Из-за « массивных » размеров она занимает много место на странице сайта. Поэтому ее очень тяжело вписать в общий дизайн. Кроме этого фотогалерея обладает узким « спектром действия », потому что ее использование оправдывается лишь в полновесных версиях ресурсов. А реализация ее « классической » схемы для мобильных устройств весьма затруднена.

Пример классической фотогалереи

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

Конечно, данный пример того, как сделать фотогалерею на сайте, выглядит несколько «топорным». Но открытие основного изображения в отдельном окне избавляет от многих сложных приемов и позволяет отобразить фотографию «в полный рост».
Код главной страницы:

Код дочерней веб-страницы:

Фотогалерея на CSS

Предыдущий пример хоть и прост в реализации, но слишком тяжел. И больше похож на « костяк » простого сайта. Поэтому, чтобы не использовать в реализации фотогалереи несколько взаимосвязанных веб-документов, для обработки события ( нажатия на превью картинки ) можно воспользоваться возможностями Javascript . Но пока мы воздержимся от программирования, и в следующем примере реализуем фотографию на основе CSS :

Нажатие на превьюшку фотографии приведет к увеличению масштаба. Кроме этого фотогалерея « умеет » подстраиваться под размеры окна браузера, пропорционально изменяя длину и ширину превью ( уменьшая или увеличивая ). И все это лишь с помощью CSS и легкой html структуры:

Топ-пост этого месяца:  Дочерняя тема functions.php

Html код примера, как создать фотогалерею на сайте:

Фотогалерея на основе Jquery

Кроме « непрограммных » образцов на сайте можно использовать фотогалереи, написанные на Jquery . Самостоятельное создание галереи на основе этой библиотеки потребует специальных знаний и навыков. Легче найти уже готовый вариант в интернете и установить его на свой сайт.

Мы советуем Galleria . Она обладает широким набором параметров для настройки. И корректно отображается на большинстве мобильных устройств, работающих под управлением популярных операционных систем:

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

Рассмотрим пошагово пример подключения Galleria к обычному html сайту:

  • Подключаем библиотеку Jquery у себя на веб-странице – для этого вставляем внутри тега строку:

Для проверки подключения библиотеки в тело страницы поместим проверочный скрипт:

Если подключение произведено корректно, то при запуске веб-страницы в браузере будет отображен соответствующий текст:

  • Установка Galleria – на данном этапе следует скачать архив с фотогалереей для сайта и распаковать его в директорию, где находятся наш html файл. Для подключения плагина размещаем следующий код сразу под строкой, с помощью которой мы в предыдущем шаге включили поддержку Jquery :

А для проверки работоспособности плагина вместо предыдущего отладочного кода поместим этот:

Если галерея подключена правильно, то в браузере отобразится надпись « Galleria works »:

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

Затем добавляем изображения для показа:

  • Активируем плагин и устанавливаем тему фотогалереи для сайта – чтобы сделать это, сразу под слоем изображений размещаем следующие строки кода:

В примере мы устанавливаем классическую тему. На сайте плагина доступны для скачивания и другие темы оформления , но все они платные:

Приведем весь код примера страницы с подключенным плагином:

Остальные варианты

Для сайтов, работающих на основе популярных php-движков, в интернете доступно множество специализированных плагинов ( расширений ). Например, чтобы создать фотогалерею у себя на блоге, который работает под управлением WordPress , можно использовать плагин NextGen Gallery . Он является одним из самых популярных расширений для развертывания фотогалереи на базе WordPress :

Также для создания красивой галереи можно воспользоваться специализированными онлайн-ресурсами. Одним из них является Cincopa . Сервис позволяет собрать фотогалерею собственными руками, подобрав ее дизайн на свой вкус и цвет:

Вот теперь ( на радость жене ) можно смело собрать в кучу все свои фото шедевры, вынести их из дома и развесить « на стенах » новой фотогалереи. А главное, не забудьте про те фото, которые лежат у тещи под диваном!

Скрипт увеличение картинки на сайте от highsl >

Думаю вы видели много ресурсов где установлен Скрип увеличение картинки на сайте highslide и хотели поставить себе а не знаете как. Немного объясню на одном коде, так как с ним можно использовать несколько скриптов. Мы возьмем вид материала любой модуля сайта, кроме форума.

Его также устанавливают на фотоальбомы и сам файл highslide идет разный и это можно узнать на официальном сайте. Лично я там не чего не понял и стал искать в интернете. Находил много, как с рамкой, как представлен здесь, так и без нее. Но главное в коде постоянна напихана реклама и ее нужно будет убрать. Здесь она тоже стоит, кому нужно будет я напишу где убрать а можете потом открыть файл с админ панели и она будет в начале. Просто не стал лести чтоб что то не збить и он оставался рабочим.
Вод код под вид материала:

Скачиваем архив и заливаем в корень сайта.


Вот вам рабочий чтоб не устанавливать и не редактировать. Так как вcю рекламу убрал и настроил думаю нормально.

Highslide — простая и красивая галерея для сайта

Вот пример простой галереи для сайта с минимум кода. Написана она на чистом CSS, без Javascript и Jquery.

Создаём папку gallery. В этой папке будут находиться два файла index.html и style.css.

Для галереи требуется подготовить изображения и миниатюры к ним и поместить в папку images.

А вот собственно и коды. Сложного в них ничего нет.

Постоянно обновляющаяся база плагинов jQuery для фото, видео и медиа галерей
Инструменты для создания красивых изображений с помощью CSS фильтров.

Подборка самых популярных WordPress плагинов для любого сайта.

Здесь вы сможете скачать различные jQuery скрипты для любых проектов.

Бесплатно скачать CSS3 наработки с различными эффектами анимации.

Можно скачать файлы HTML5 с современными возможностями разработки.

Множество различных free PSD объектов для WEB-дизайна.

Колекция различных элементов form jQuery для вашего сайта.

Бесплатно скачать иконки для сайта в форматах PSD, PNG и так далее.

Коллекция всегда обновляющихся модальных окон на jQuery.

Разные примеры jQuery validate собраны в одном месте сайта.

Симпатичные варианты реализации ваших jQuery gallery.

Большой сборник широкоформатных и адаптивных jQuery slider`ов.

Ишите примеры реализации jQuery scroll? Это то, что вам нужно.

Красивые и динамичные всплывающие подсказки на jQuery и CSS3.

Интересные материалы на тему веб разработок, главные новости.

Подобрка плагинов Javascript, библиотек, фреймворков и т.д.

Коллекция потрясающих примеров анимации для вашего сайта.

Модернизация элементов форм, создание систем автозаполнения

Плагины для выбора и настройки даты и времени в формах

Предзагрузчики, анимация загрузки, перлоадеры и т.д.

Компоненты, содержащие в себе реализацию параллакс-эффекта.

Создание вкладок, оформление списков в удобную навигацию.

Все, что касается таблиц с данными: фильтр, сортировка и т.д.

Наработки SVG-графики и наложение на нее анимации. Просто красиво.

Отрисовка элементов на веб-странице с помощью html5 canvas.

Примеры элементов, которые реагируют при наведении на них.

Плагины для фото и видео галерей, способные приблежать контент.

Кнопки. Создание красивы и незабываемых кнопок для сайта.

Все, что касается сортировки данных на странице. Плагины html5.

Выборка данных. Множество примеров jQuery select.

Различные способы создания красивого и эффектного меню для сайта.

Дерево элементов. Построение множественных списков на странице.

Примеры объектов в трехмерном пространстве с помощью CSS3 и jQuery.

Удобный просмотр фотографий — jQuery-фотогалерея

В нашей коллекции скриптов вы сможете найти небольшие, но очень полезные и функциональные плагины для своего сайта. Обращаясь к средствам jQuery Gallery, легко организовать галерею цифровых фотографий с приятным дизайном, с возможностью прокрутки, масштабирования, просмотра миниатюр и со множеством других полезных функций. Имеются как строгие решения для профессиональных сайтов, так и яркие, с анимацией и другими спецэффектами — для развлекательных проектов.

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

Simple Gallery — Простая и приятная галерея

Простая и легкая галерея, построенная с использованием javascript, jQuery и Bootstrap. Она отлично подойдет для быстрой презентации фото портфолио и не только. Плагин галереи можно скачать бесплатно.

50 отличных Image галерей, которыми можно пользоваться

Russian (Pусский) translation by Yuri Yuriev (you can also view the original English article)

Вот 50 наших любимых бесплатных галерей изображений, которые можно быстро подключить к дизайну. В них есть всё, от CakePHP до jQuery и Ruby on Rails. Кликните всем разработчикам, участникам сообщества!

Перед тем, как перейти в бесплатную коллекцию, если вы ищете решение премиум-класса, у нас есть ряд профессиональных опций на CodeCanyon, таких как WordPress Gallery Plugins и PHP Images & Media Scripts.

Image Gallery Plugins on GraphicRiver, WordPress section.

1. Gallery 2

В Gallery 2, возможно, самое большое сообщество с одним из наиболее часто используемых источников в Интернете.

2. Zenphoto

Zenphoto считает себя «простой, наиболее полезной галереей софта для вашего сайта». Скрипт построен на PHP.

3. Minishowcase

Minishowcase — это простая и крошечная фотогалерея php / javascript.

4. TripTracker

TripTracker — небольшой проектор изображений JavaScript и анимированный слайд-шоу player.

5. Dynamic Drive CSS Image Gallery

Вместо использования JavaScript, Dynamic Drive CSS Image Gallery полностью поддерживается CSS.

6. Ajax Photo Gallery

Бесплатная фотогалерея с поддержкой Ajax, которая извлекает фотографии из Picasa из XML.

7. SimpleViewer

Бесплатная flash-based галерея изображений, которая имеет и версию Pro, с большим количеством опций и настроек.

8. Jalbum

Jalbum — это гибридное online/offline программное обеспечение, который загружает галереи изображений в ваше пространство на jalbum.net.

9. Coppermine

Как и Gallery 2, Coppermine — представитель «старой школы» PHP-фотоальбомов, который существует уже много лет.

10. Plogger

Plogger — это PHP- script галереи, который имеет такие полезные функции, как inline ajax photo editing, zip upload files и возможность создавать собственные темы.

11. CSS Play

Гладкая многостраничная галерея, полностью построенная на CSS.

12. Polaroid Gallery


Polariod Gallery — интересный флеш-скрипт, который упорядочивает ваши фотографии (из файла XML или RSS-ленты Flickr) в галерею «polaroids».

13. dfGallery

DfGallery — прекрасный бесплатный скрипт флеш-галереи, с настраиваемыми темами и административной частью, созданной с помощью PHP Framework CodeIgniter.

14. (E)2 Photo Gallery

Отличная JavaScript галерея, созданная с помощью MooTools.

15. AutoViewer

AutoViewer упорядочивает изображения в галерее Flash в указанной последовательности с изображениями и надписями.

16. Smooth Gallery

Еще одна галерея JavaScript построена на крошечной структуре MooTools.

17. Satellite

Скрипт фотогалереи, который позволяет пользователям создавать настраиваемые галереи из своих учётных записей Flickr.

18. Hoverbox

Hoverbox — простая и лёгкая галерея изображений только для CSS.

19. Flash Gallery

Как и предполагает название, Flash Gallery — это простая галерея с поддержкой XML и Flash, которая легко настраивается.

20. HighSlide JS

Не являясь технически scrip галереи, HighSlide позволяет легко увеличивать и уменьшать изображение, используя простой эффект JavaScript.

21. Pixelpost

Pixelpost — это поворот в script галереях изображений, который добавляет фотоблог в видео. Открытый исходный код, быстрый и многоязычный.

22. Script and Style Auto-Generated Photo Gallery

Отличный скрипт, который создаёт каталог и галерею изображений. Построен с PHP и JavaScript.

23. Postcard Viewer

Flash-скрипт, который принимает изображения, помещает в «открытки» и упорядочивает их в галерее.

24. Andrew Berg’s Flash Photo Browser

Простой flash-анимированный скрипт просмотра фотографий. Просто, но весело.

25. Flickr Photo Album for WordPress

Tan Tan Noodles имеет плагин для WordPress, который тянет ваши фотосеты Flickr и создаёт альбомы в WordPress.

26. Galleria

Galleria — это лёгкий скрипт галереи изображений, основанный на jQuery.

27. Lightview

Чистое, лёгкое решение для создания простых изображений и медиа-галерей в накладках.

28. Fancy Zoom

Fancy Zoom — это немного JavaScript, который позволяет вам увеличивать фотографии, не требуя второй загрузки изображения.

29. Imagevue

Хорошая галерея изображений, в которой есть фотоальбомы, слайд-шоу и админ-зона.

30. jpGalScroll Photo Gallery

Простой фрагмент галереи, построенный на jQuery, который предлагает прокрутку и разбивку на страницы.

31. nextgen gallery

Галерея nextgen — это надёжный плагин галереи изображений для пользователей WordPress, построенный на jQuery.

32. Singapore

Называется как «самая маленькая большая галерея», Сингапур — это лёгкий, мощный script галереи изображений, построенный на PHP.

33. jQuery Cycle

Плагин для jQuery, который позволяет вам «кататься» по галереям изображений в любых направлениях.

34. Imagin

Яркая фото галерея, которая может организовать фотографии в галереях и под-галереях.

35. Phormer

Основанная на PHP фотогалерея, которая не требует базы данных MySQL и устанавливается менее чем за 3 минуты.

36. Gullery

Gullery — это простая галерея изображений, созданная с помощью Ruby on Rails. Идеально подходит для личного портфолио или небольшой галереи изображений.

37. How to Build a Photo Gallery with CakePHP and Flickr

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

38. filebrowser

Небольшое PHP-приложение, которое позволяет вам уменьшать изображения для использования в Интернете. Построен Lussumo.

39. FAlbum

Галерея на основе WordPress, которая отображает фотографии и фотосерии с Flickr.

40. Slimbox 2

Крошечный, стандартный, полностью настраиваемый просмотрщик изображений, построенный на jQuery.

41. Animated JavaScript Slideshow

Скрипт создания галереи слайд-шоу, построенный на Javascript, менее 5 КБ.

42. iPhotoToGallery

Плагин iPhoto, который упрощает публикацию фотографий в Gallery 2 .

43. FrogJS Gallery

Простой, ненавязчивый script галереи, построенный на Lightbox, но демонстрирующий галереи по-разному.

44. Create a Spectacular Photo Gallery with MooTools

Nettuts + ‘ владение Jared Rhizor, имеет отличный курс о том, как создать простую галерею изображений с MooTools.

45. Django-based photo gallery tutorial

Простой учебник о том, как создать фотогалерею с Python framework Django.

46. Zen Gallery

Элегантные скрипты флеш-галереи и инструменты для размещения фотографий на вашем сайте.

47. folderblog

Бесплатный, лёгкий PHP-скрипт, который размещает изображения из папки в галерее.


48. Duh Gallery

Ещё один простой плагин галереи WordPress.

49. Original Photo Gallery

Набор скриптов, которые продвигают клиентский script для масштабирования изображений и публикации в галерее.

50. Making the ultimate dynamic image gallery in Flash 8

Руководство для средних пользователей Flash по созданию динамической галереи изображений, загружаемой XML.

Плагины Premium Gallery на CodeCanyon

Если вы ищете качественное решение, у нас есть большой выбор опций галереи изображений в CodeCanyon, например WordPress Gallery Plugins и PHP Images & Media Scripts.

Адаптивные галереи для сайта

Даже опытные веб-мастера зачастую путают понятия «фотогалерея» и «фотоальбом». Основным различием между этими понятиями считается тот факт, что в фотогалереях «на показ» выставляются все доступные фотографии. А вот фотоальбоме изображения появляются по одному.

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

Однако перед тем, как приступить к описанию основных особенностей создания фотогалереи, стоит сказать несколько слов о ее преимуществах:

  • Фотогалерея позволяет продемонстрировать на одной странице все доступные фотографии. За счет удобства большинству пользователей нравится именно такой способ отображения фотоснимков.
  • Простота реализация. Для разработки подобной галереи на html необходимо не так уж и много времени.
  • Открытость. Благодаря этому, даже простая галерея для сайта на html вызывает у пользователей большее доверие к контенту.

Фотогалереи имеют и несколько недостатков.

  1. Во-первых, они громоздки и занимают слишком много места на странице. Из-за этого галереи не всегда органично вписываются в дизайн сайта.
  2. Во-вторых, у фотогалерей относительно узкий «спектр действий». Они зачастую подходят только для десктопных версий сайта. На мобильных устройствах галереи в большинстве случаев смотрятся ужасно.

Стандартная фотогалерея

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

Этот вариант, возможно, выглядит довольно-таки примитивным. Но он позволяет избавиться от множества лишних действий и продемонстрировать пользователю полноценную версию изображения.

Для написания главной страницы используются следующий код:

Простая галерея highslide не отображается правильно

Я пытаюсь дублировать внешний вид этой простой галереи:

на этой странице:

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

Если мне нужно предоставить более подробную информацию, дайте мне знать, и я сделаю все возможное. Заранее спасибо!

Первая проблема об одной строке — самый простой способ:

Highsl >18.06.2014, 08:05. Просмотров 585. Ответов 0

Хочу сделать так, что бы на одной странице можно было открывать как отдельные фото, так и галереи.
JS я практически не знаком, в стадии начала обучения. В оригернале используется конструкция onclick=»return hs.expand(this)» я же вызываю своб функцию, которая выбирает какие переменные использовать. Но потом как запустить return hs.expand(this)? Методом тыка не получается )

Javascript
18.06.2014, 08:05

Как правильно спроектировать динамические фото-галереи?
Всем привет! Есть проект в котором предусмотрено добавление фотографий к определенному объекту.

Как сделать открытие галереи изображений при клике на картинку
Good day! 😉 Делаю Landing page на котором будут представлены несколько квартир. На сайте.

Разработка фото галереи
Здравствуйте! Недавно занялся созданием собственной фото галереи. Я хотел бы чтобы отображались.

Открыть фото из галереи
Пол дня и ночи сижу изучаю. Прошу помощи , сначал код что настряпал : procedure.

При клике на маленькое фото открытие большого фото в модальном окне
Привет, помогите решить проблему! У меня есть скрипт фотогалереи, она отображает маленькие превью.

Полезности для CMS Drupal

Блог-архив друпалоида из Петербурга

Внедрение скрипта Highsl >

В продолжение темы поиска решений по вопросам расширения возможностей Drupal`а в работе с изображениями решил «озвучить» еще один вариант/пример подключения к движку стороннего скрипта. Речь снова пойдет о незабвенном Highslide — скрипте из семейства лайтбокс-подобных приблуд.

Сразу замечу, что есть вполне себе адекватно работающий «зарелизеный» модуль Highslide под шестерку. Так что описанное ниже есть альтернатива для нелодырей и любителей ходить напрямик, не используя удобную, но более длинную обьездную дорогу. Лично для меня выбор такого варианта был обусловлен идеалом простоты и стремлением не использовать «лишний код» при решении той или иной задачи сайтопостроения.

Приступим. Идем за Highslide.

Покончим же со словоблудием и перейдем к практическим действиям.

За максимально «свежим» релизом Highslide идем конечно же на сайт его автора. Там же есть замечательный и удобный редактор-конфигуратор скрипта. Весьма полезно перед скачиванием скрипта настроить только то, что будет реально востребовано из его обширных возможностей. В моем примере мы будем использовать Highslide только лишь как средство для открытия единичных ссылок на изображение в симпатичном всплывающем окне. Для наглядного примера данного функционала вполне достаточно.

Если с редактором возиться лень, то можно скачать прикрепленные к публикации уже настроенные файлы Highslide. Настроены они, естественно, по моим предпочтениям, но думаю для большинства сайтов будут вполне достаточны. Русских сайтов, ибо в моем конфиге скрипта выбран именно русский, с соответствующим переводом всех служебных и пользовательских диалогов.

Highslide и его файлы.

И так, что мы имеем перед началом манипуляций с темой-шиблоном. Папочка highslide. Внутри нее нам будут нужны лишь подпапка graphics и четыре файла:

  • highslide.config.js — файл с настройками скрипта;
  • highslide.packed.js — «упакованный» и «пожатый» основной JavaScript-код;
  • highslide.css — файл стилей Highslide;
  • highslide-ie6.css — файл стилей с поправками на «своеобразие» браузера Internet Explorer шестой и ранее версий;

CSS-файлы сразу перемещаем туда, где у нас находиться основной файл стилей темы — style.css. (В моем случае все стили темы лежат в подпапке css, а дополнительные скрипты в подпапке js. Относительно такой структуры и пойдет речь далее.)

Папку highslide помещаем в подпапку js(смотрите выше) нашей темы.

Теперь открываем highslide.config.js, и вписываем в самой верхней его строчке путь к подпапке graphics относительно корневой папки самого Друпала:

Вносим изменения в файлы темы.

Затем открываем файл template.php темы и дописываем в него следующий код, дающий указание Друпалу подгрузить скрипты Highslide в «общую кучу» массива $scripts:

Далее, в файл page.tpl.php темы после print $styles добавляем команду для IE старых версий загружать дополнительный файл стилей:

И последним действием будет внесение дополнений в информационный файл редактируемой темы (название_темы.info) касательно нового файла стилей highslide.css:

Важно! В файле стилей highslide.css при его включении по вышеописанному примеру необходимо будет переопределить соответствующие пути к изображениям в правилах стилей.

Как вариант, css-файлы Highslide можно оставить в папке highslide скрипта. В этом случае их подгрузку можно инициировать не изменением название_темы.info, а добавлением в template.php соответствующих инструкций:

Соответственно и пути к highslide-ie6.css в page.tpl.php будут другими:

Все, готово!

После того, как вы пересохраните тему, все доступные возможности Highslide — к вашим услугам.

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

class = «highslide» onclick= «return hs.expand(this)»

О возможных способах применения Highslide`а на Drupal-сайте, и в частности о его взаимодействии с модулем Node Images подробно расскажу в отдельных публикациях. Надеюсь, что и эта кому-то чем-то помогла.

В любом случае успехов всем вам, коллеги, в собственных ваших экспериментах с Drupal — CMS-сой вне всех времен. ЗакАпаем этот интернет нахрен!

Комментарии

Что то не хочет работать. Все делаю по инструкции в результате всё вроде прописывается как надо, скрипты подключаются, графика видна, но не работает. При нажатии на маленькую картинку на ней появляется «вращающийся кружок» и надпись «LOADING» и все. при нажатии на надпись она исчезает, а если нажать на картинку рядом с надписью, то открывается большая (с указанием ее прямого пути в строке браузера). Уже перепробовал на нескольких темах — аналогично. Где нибудь можно увидеть работающий вариант? Что может быть мной сделано не правильно? Заранее спасибо!

При подгрузке js-файлов в template.php поставьте первым в очереди highslide.packed.js, а highslide.config.js после него. В инструкции этот момент изменил.

Работающий вариант, где все «собиралось» в соответствии с вышеизложенным, можно увидеть тут.

Стало лучше, но совсем на чуть-чуть, а именно: при наведении на маленькую картинку появился правильный курсор, все остальное осталось без изменений. 🙁

При загрузке Ваших «Готовых» файлов надпись «LOADING» заменилась на надпись «Загружается», т.е. файл highslide.config.js точно нормально грузится. Поскольку появляется курсор, то и путь до каталога графики тоже правильно прописан.
Если отключить всю эту настройку и включить Ваш модуль со старой версией highslide, то тот же текст нормально работает, но очень хочется подключить именно новую версию.

Пока попытался разобраться как в старой версии выводить не только отдельные фото, но и галереи. Подредактировал Ваш модуль чтобы он подключал файл highslide-with-gallery.js вместо highslide.js. В этом файле, естественно, указал правильный graphicsDir.
В результате одиночное изображение работает нормально, а галерея просто раскрывается одной большой картинкой в том же окне. Что нужно настроить чтобы галерея тоже заработала?
Хотел дать ссылку, на то, что хочу получить, но тут это не разрешается.

Зайдите в редактор на сайте автора и настройте его для работы в «галерейном» режиме. После этого скачайте новые настроенные на ваш вкус файлы и подключайте их.

Откройте по очереди файлы

  • highslide.config.js
  • highslide.css
  • template.php

и внимательно еще раз проверьте их на правильность прописанных путей и расстановки слешей, проблема ваша зарыта там. Что бы уж наверняка, пропишите в cnbkz[ highslide.css полные пути от корневой директории установки друпала, то бишь там:

Все перепробовал — не работает.
Тупо скопировал в head page.tpl.php head из файла примера и все заработало (Чем такой вариант плох? Догадываюсь, что JS не будут в таком случае кэшироваться. или нет?). Сравнил с тем что у меня было — вроде все один в один. Завтра буду более детально разбираться в чем разница.
Еще вот такой вопрос — реально ли сделать, чтобы при загрузке страницы изображение уже было максимизированным, а при нажатии на него исчезало без следа? Что то на сайте автора такого варианта не нашел, но может плохо искал.

По первому пункту: ищите, пересохраняйте тему, очищайте кэш.

По второму: для этих целей highslide вам нафиг не нужен. Достаточно jQuery, где есть функция .hide(). Например, что бы по клику на изображение(в теге img) оно плавно шкерилось, добавьте на страницу:

И будет вам счастье.

Всё заработало! Огромное СПАСИБО!
По второму пункту — понятно, но интересует именно средствами highslide. И даже не столько картинка, сколько их вывод ХТМЛ.

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