Галереи для сайта с помощью Highslide JS

Категории: Javascript 07.10.2010 комментариев 47

Продолжим планомерно и без лишней суеты описание открывшихся возможностей при использовании скрипта Highslide JS

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

Примеры галерей с использованием Highslide JS:

Посмотрели примеры и если оно вам надо, то смело можете забрать скрипт с официального сайта: Скачать Highslide JS »».

Скрипт с примерами и небольшим описанием на русском можно скачать здесь:

Скачать

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

Шаг 1. HTML

Рассмотрим на примере галереи выполненной в белом дизайне.
Подключим скрипт к нашему документу, прописав следующий код между тегами <head>...</head>:

 <script src="ваш-сайт/highslide/highslide-with-gallery.js" type="text/javascript"></script>

Шаг 2.

Следующий код скрипта вписываем сразу после первого, там же меду тегами <head>...</head>:

<script type="text/javascript">
        hs.graphicsDir = '../highslide/graphics/';
        hs.transitions = ['expand', 'crossfade'];
        hs.restoreCursor = null;
        hs.lang.restoreTitle = 'Нажмите для перехода на следующее изображение';
 
        // Добавить слайд-шоу панель управления и превью
        hs.addSlideshow({
                //slideshowGroup: 'group1',
                interval: 5000,
                repeat: true,
                useControls: true,
                overlayOptions: {
                        position: 'bottom right',
                        offsetY: 50
                },
                thumbstrip: {
                        position: 'above',
                        mode: 'horizontal',
                        relativeTo: 'expander'
                }
        });
 
        // Опции для элементов страницы
        var inPageOptions = {
                //slideshowGroup: 'group1',
                outlineType: null,
                allowSizeReduction: false,
                wrapperClassName: 'in-page controls-in-heading',
                useBox: true,
                width: 600px,
                height: 400px,
                targetX: 'gallery-area 10px',
                targetY: 'gallery-area',
                captionEval: 'this.thumb.alt',
                numberPosition: 'caption'
        }
 
        // Открытие первой миниатюры при загрузке страницы
        hs.addEventListener(window, 'load', function() {
                document.getElementById('thumb1').onclick();
        });
 
 
        hs.Expander.prototype.onImageClick = function() {
                if (/in-page/.test(this.wrapper.className)) return hs.next();
        }
 
        // Under no circumstances should the static popup be closed
        hs.Expander.prototype.onBeforeClose = function() {
                if (/in-page/.test(this.wrapper.className)) return false;
        }
        // ... nor dragged
        hs.Expander.prototype.onDrag = function() {
                if (/in-page/.test(this.wrapper.className)) return false;
        }
 
        // позиция после изменения размера окна
    hs.addEventListener(window, 'resize', function() {
                var i, exp;
                hs.page = hs.getPageSize();
 
                for (i = 0; i < hs.expanders.length; i++) {
                        exp = hs.expanders[i];
                        if (exp) {
                                var x = exp.x,
                                        y = exp.y;
 
                                // get new thumb positions
                                exp.tpos = hs.getPosition(exp.el);
                                x.calcThumb();
                                y.calcThumb();
 
                                // calculate new popup position
                                x.pos = x.tpos - x.cb + x.tb;
                                x.scroll = hs.page.scrollLeft;
                                x.clientSize = hs.page.width;
                                y.pos = y.tpos - y.cb + y.tb;
                                y.scroll = hs.page.scrollTop;
                                y.clientSize = hs.page.height;
                                exp.justify(x, true);
                                exp.justify(y, true);
 
                                // set new left and top to wrapper and outline
                                exp.moveTo(x.pos, y.pos);
                        }
                }
        });
</script>

Как видим, скрипт имеет настраиваемые параметры, то есть interval отвечает за продолжительность показа изображения в режиме слайд-шоу, чтобы ускорить или замедлить показ, просто измените значение на любое свое. Параметр repeat отвечает за повтор показа, в нашем случае выставлен false, значит отключен, меняете на true, и получаете бесконечное слайд шоу.
В общем и целом экспериментируя с настройками, увидите насколько широки возможности данного скрипта.

Шаг 3. HTML (снова)

В том месте, где должна по Вашему замыслу выводиться галерея, пропишем следующий код:

<div class="highslide-gallery">
<a class="highslide" onclick="return hs.expand(this)" href="../images/gallery1.jpg">
<img title="Увеличить" src="../images/gallery1.thumb.jpg" alt="Highslide JS" /></a>
</div>

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

<div class="highslide-caption">
Надпись на первое изображение. Подпись можно офрмить с помощью CSS.
</div>

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

<div class="highslide-gallery">
<a class="highslide" onclick="return hs.expand(this)" href="../images/gallery1.jpg">
<img title="Увеличить" src="../images/gallery1.thumb.jpg" alt="Highslide JS" /></a>
<div class="highslide-caption">
        Подпись на первом изображении.</div>
<a class="highslide" onclick="return hs.expand(this)" href="../images/gallery2.jpg">
<img title="Увеличить" src="../images/gallery2.thumb.jpg" alt="Highslide JS" />
</a>
<div class="highslide-caption">
        Подпись на втором изображении.</div>
<a class="highslide" onclick="return hs.expand(this)" href="../images/gallery3.jpg">
<img title="Увеличить" src="../images/gallery3.thumb.jpg" alt="Highslide JS" />
</a>
<div class="highslide-caption">
        Подпись третьего изображения.</div>
</div>

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

С Уважением, Андрей .

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

Метки: javascript · галереи · изображения · уроки

Всего комментариев: 47

бахилы: 12 марта, 2010 в 08:49
Здравствуйте! Мне близка ваша тематика и даже планирую создать блог такого же направления. Могли бы вы, если вас не затруднит, выслать мне на почту информацию как с вами связаться, к сожалению на сайте электронного адреса не нашла, а хотелось бы услышать ваш совет. Заранее спасибо!
Ответить
- driver: 15 марта, 2010 в 12:04
  бахилы
  Трудно не заметить кнопочку Контакт на верху страницы :))
  Ответить
AnatoliyErmolaev: 13 марта, 2010 в 08:52
Здравствуйте! Ваш блог мне очень понравился, не могу подключить rss ленту, может я что-то не то делаю — подскажите пожалуйста куда нажимать, и работает ли она у Вас вообще? Заранее благодарен!
Ответить
Damien: 13 июля, 2010 в 23:54
Здравствуйте. Прочитав вашу статью, использовал highslide-width-gallery.Возник вопрос: на странице находится iframe, в который подгружается страничка с изображениями. При клике на thumbs highslide отображает увеличенное изображение, но изображение перемещается только в приделах фрэйма. Насколько я понял, увеличенное изображение-это скрытый див, динамически добавленный в документ. Возможно ли создавать этот див в родительском документе? Если да, то что необходимо изменить в hs? Спасибо.
Ответить
- driver: 21 июля, 2010 в 12:35
  Насколько я в теме, то сделать это Вам ничего не мешает и менять в hs так же ничего не надо. Если не прав, народ поправит…
  Ответить
Артур Фаткуллин: 13 февраля, 2011 в 19:53
Конец архива неожиданный… в Вашей версии ( А статья полезная. Огромная благодарность )
Ответить
driver: 13 февраля, 2011 в 20:14
Конец архива неожиданный…
Артур, я так и не понял в чем неожиданность?
Если что то упустил или какая то ошибка, то подскажите.
Ответить
Олег: 17 июля, 2011 в 18:26
… и что за файлы типа
thumbstrip24.thumb.png
? откуда они вдруг взялись? нужно всю фотогалерею предварительно переконвертировать чем то?
Ответить
- driver: 18 июля, 2011 в 08:54
  Олег эти файлы имеют формат PNG, а если вас смущает такие длинные имена thumbstrip24.thumb.png, автору необходимо было как то классифицировать большой объем изображений, для выводов примеров разных типов галерей. В простом использовании этого делать не придется. Выбираете вид галереи, правильно прописываете ваши картинки в html и все. Есть же исходники вставьте свои картинки вместо демонстрационных, только не забывайте о путях и к скрипту, и к самим картинкам.
  Надеюсь разберетесь. Удачи
  Ответить
Margarita: 14 ноября, 2011 в 22:57
Может просто сделать, Как на этом сайте http://www.1aaa.ru/
Ответить
- driver: 14 ноября, 2011 в 23:32
  Margarita
  Конечно можно и просто сделать, а можно вообще ничего не делать. На сайте, ссылку которого вы впихнули в коммент, напрочь отсутствует даже подобие галереи. В своей же статье я рассказываю именно о передовой технике исполнения и вывода галереи изображений на страницах сайтов.
  Но все же спасибо и за такое внимание к статье.
  Ответить
Oleg: 15 ноября, 2011 в 01:55
подскажите, а как все таки обойтись без предварительного переконвертирования фоток в формат png для превьюшек?
и еще проблема — с подгонкой изображения под размер экрана, как это можно сделать, подскажите , пожалуйста. (опять таки — приходится переделывать все фотки, чтоб они правильно отображались, а то, если вставить оригинальное фото на 4000×3000 пикселей — не очень красиво получается в итоге)
Ответить
- driver: 15 ноября, 2011 в 03:54
  Oleg
  Конвертировать превьюшки в формат png конечно же не обязательно, создаете картинку в формате jpg определенного размера, просто в png превьюхи выглядят более четкими. С подгонкой изображения, попробуйте другой вид галереи без рамки вокруг области просмотра или без подгонки размера бокса под размер картинки. А вообще для таких масштабных изображений (4000×3000 пикселей ) лучше использовать при клике на картинку не переход к следующему, а открытие полномасштабного просмотра.
  Можете изменить ширину и высоту div контейнера вокруг области просмотра <div id="gallery-area" style="width: 620px; height: 520px; margin: 0 auto; border: 1px solid silver"></div> подогнав под больший размер.
  Ответить
Oleg: 15 ноября, 2011 в 23:14
а можно еще как-то встроить под каждой картинкой возможность комментирования? (как это реализовано вконтакте, например)
Ответить
- driver: 15 ноября, 2011 в 23:29
  Oleg Здравствуйте.
  Ничего не могу сказать на счет интеграции формы комментирования в галерею, но отдельную ссылку комментирования вставить при желании наверное можно. Как, это уже вопрос отдельной темы, интернет большой и решение, вы скорее всего найдете.
  Ответить
Заур: 6 февраля, 2012 в 09:27
Здравствуйте. Я модерирую сайт palidli.az (не реклама) и хотел бы на главной разместить подобную мини галерею. Сайт построен на движке Джомла (php). у меня такой вопрос… этот скрипт будет работать на php и вообще в движке Джомла? Автор, если не трудно свяжись со мной по эл. почте.
Ответить
Заур: 6 февраля, 2012 в 11:12
Я короче поставил его на сайт, все вроде работате нормально, но вот кнопки не видны… только подпись к кнопке видна, ноработает. Че делать?
Ответить
Заур: 6 февраля, 2012 в 11:20
Все разобрался. Как я раньше не догодался…
Уважаемый автор, вы забыли добавить путь к css. Как я раньше не догадался.
Добавил следующую строку и заработало. Спасибо за предоставленную информацию.
Ответить
- driver: 7 февраля, 2012 в 10:25
  Заур, спасибо за интерес к статье.
  Рад, что у вас все получилось, экспериментируя, иногда ошибаясь, порой тупо методом проб и ошибок, мы получаем то чего хотели.
  Ответить
Дмитрий: 14 августа, 2012 в 14:47
Проблема такая при первой загрузке надпись loading… (загрузка…) смещается и не по щентру области в галереи, при клике по следующей все ок.
Ответить
саня: 24 марта, 2013 в 12:47
и что получится в итоге? где посмотреть демо?
Ответить
- driver: 24 марта, 2013 в 13:24
  А ссылки на примеры для кого?
  Ответить
Анатолий: 8 октября, 2014 в 23:56
На превьюшках цвет рамки изначально светло-серый, а при наведении курсора меняется на темно-серый. Где можно изменить эти параметры?
Ответить
- driver: 10 октября, 2014 в 22:31
  В файле highslide.css найдите следующее ( в районе строки №13) и просто изменяйте значения цветов, по умолчанию, для рамки картинки задан цвет silver, а при наведении gray:
  
  .highslide img {
  border: 2px solid silver;
  }
  .highslide:hover img {
  border-color: gray;
  }
  .highslide img {
  border: 2px solid silver;
  }
  .highslide:hover img {
  border-color: gray;
  }
  
  вы можете использовать любые другие, например цифровые значения цвета hex, rgb или же rgba
  Ответить
Александр: 13 ноября, 2014 в 01:40
На изображениях присутствует подпись.
Как увеличить место для подписи. Мне нужно написать под изобрадением 10 строк и более.Подскажите как это сделать??
Ответить
- driver: 14 ноября, 2014 в 13:03
  Добрый день, Александр.
  Место увеличивается автоматом, в зависимости от размера текста, чтобы не быть голословным, специально для вас, вставил объемную подпись к одной из картинок в «галерее с белым дизайном», посмотрите пример, всё прекрасно растягивается.
  Ответить
Денис: 26 апреля, 2015 в 15:08
подскажите как мне сделать закрытие окна по клику вне самого окна
jsfiddle.net/zLuysfyv/4/
Ответить
Елена: 21 февраля, 2016 в 23:08
У Вас тут надолго можно застрять, экспериментировать сразу же хочется.
Ответить
Оксана: 10 июля, 2016 в 22:32
Ребятки, подскажите,пожалуйста, вроде все сделала как в примере в белом дизайне, картинки увеличиваются и уменьшаются, но не появляются как в слайдшоу стрелочки прокрутки вперед и назад в увеличенном режиме. Что я могла упустить? Впервые работаю в HTMLкоде, а не в визуальном редакторе. Подскажите кто знает, пожалуйста,уже 3 часа ищу ошибку, скоро ослепну:)
Ответить
- driver: 10 июля, 2016 в 23:13
  Здравствуйте, Оксана.
  Если вы посмотрите на исходники страницы с примером галереи в белом дизайне, то в разделе <head></head> обнаружите исполняемый js с опциональными настройками такого содержания:
  
  hs.graphicsDir = ‘../highslide/graphics/’;
  hs.align = ‘center’;
  hs.transitions = [‘expand’, ‘crossfade’];
  hs.outlineType = ’rounded-white’;
  hs.fadeInOut = true;
  //hs.dimmingOpacity = 0.75;
  
  // Add the controlbar
  hs.addSlideshow({
  //slideshowGroup: ‘group1’,
  interval: 5000,
  repeat: false,
  useControls: true,
  fixedControls: ‘fit’,
  overlayOptions: {
  opacity: .75,
  position: ‘bottom center’,
  hideOnMouseOut: true
  }
  });
  hs.graphicsDir = ‘../highslide/graphics/’;
  hs.align = ‘center’;
  hs.transitions = [‘expand’, ‘crossfade’];
  hs.outlineType = ’rounded-white’;
  hs.fadeInOut = true;
  //hs.dimmingOpacity = 0.75; // Add the controlbar
  hs.addSlideshow({
  //slideshowGroup: ‘group1’,
  interval: 5000,
  repeat: false,
  useControls: true,
  fixedControls: ‘fit’,
  overlayOptions: {
  opacity: .75,
  position: ‘bottom center’,
  hideOnMouseOut: true
  }
  });
  
  Обратите внимание на параметры ниже коммента // Add the controlbar(Добавить панель управления), именно они отвечают за вывод панели управления(задержка появления, расположение, степень прозрачности, захват и т.д.) Значение параметра useControls, должно быть установлено в true, тогда панель будет показана, значение false, соответственно отключает вывод контрольной панели.
  Ответить
  - Оксана: 10 июля, 2016 в 23:37
    спасибо, Driver, к сожалению у меня в коде все как тут и указано, но прокрутки нет. Буду дальше думать, где могла накосячить.
    Ответить
    - Оксана: 11 июля, 2016 в 01:06 Ответить
Вадим: 30 ноября, 2017 в 22:31
Добрый вечер! подскажите пожалуйста если много фото то внизу они становятся очень маленькие можно ли сделать так что бы размер не уменьшался а они пролистывались? заранее благодарен
Ответить

Галереи для сайта с помощью Highslide JS

Шаг 1. HTML

Шаг 2.

Шаг 3. HTML (снова)

Всего комментариев: 47

Оставить комментарий Отменить ответ

Разработка тем для WordPress