Dobrovoi Master
сделано с душой

В состоянии постоянного подключения...
Главная » Javascript » Галереи для сайта с помощью Highslide JS.

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

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

Продолжим планомерно и без лишней суеты описание открывшихся возможностей при использовании скрипта 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 и поделитесь ссылкой на запись в своих соц-сетях:

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

33 комментария
  1. Дмитрий:

    Проблема такая при первой загрузке надпись loading... (загрузка...) смещается и не по щентру области в галереи, при клике по следующей все ок.

    Ответить
  2. саня:

    и что получится в итоге? где посмотреть демо?

    Ответить
  3. Александр:

    На изображениях присутствует подпись.

    Как увеличить место для подписи. Мне нужно написать под изобрадением 10 строк и более.Подскажите как это сделать??

    Ответить
    • driver:

      Добрый день, Александр.

      Место увеличивается автоматом, в зависимости от размера текста, чтобы не быть голословным, специально для вас, вставил объемную подпись к одной из картинок в «галерее с белым дизайном», посмотрите пример, всё прекрасно растягивается.

      Ответить
  4. Анатолий:

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

    Ответить
    • driver:

      В файле highslide.css найдите следующее ( в районе строки №13) и просто изменяйте значения цветов, по умолчанию, для рамки картинки задан цвет silver, а при наведении gray:

      .highslide img {
      	border: 2px solid silver;
      }
      .highslide:hover img {
      	border-color: gray;
      }

      вы можете использовать любые другие, например цифровые значения цвета hex, rgb или же rgba

      Ответить
  5. Денис:

    подскажите как мне сделать закрытие окна по клику вне самого окна

    jsfiddle.net/zLuysfyv/4/

    Ответить
  6. Елена:

    У Вас тут надолго можно застрять, экспериментировать сразу же хочется.

    Ответить
  7. Оксана:

    Ребятки, подскажите,пожалуйста, вроде все сделала как в примере в белом дизайне, картинки увеличиваются и уменьшаются, но не появляются как в слайдшоу стрелочки прокрутки вперед и назад в увеличенном режиме. Что я могла упустить? Впервые работаю в HTMLкоде, а не в визуальном редакторе. Подскажите кто знает, пожалуйста,уже 3 часа ищу ошибку, скоро ослепну:)

    Ответить
    • driver:

      Здравствуйте, Оксана.

      Если вы посмотрите на исходники страницы с примером галереи в белом дизайне, то в разделе <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
      		}
      	});

      Обратите внимание на параметры ниже коммента // Add the controlbar(Добавить панель управления), именно они отвечают за вывод панели управления(задержка появления, расположение, степень прозрачности, захват и т.д.) Значение параметра useControls, должно быть установлено в true, тогда панель будет показана, значение false, соответственно отключает вывод контрольной панели.

      Ответить
      • Оксана:

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

        Ответить
        • Оксана:

          Нашла ошибку! На будущее, вдруг у кого тоже такая беда будет- надо везде перед названием сайта обязательно http:// указывать, тогда полоса прокрутки есть.

          Возник новый вопрос- как указать точное место на сайте куда будет открываться окно? К примеру, чтобы все фотографии слева открывались в правом углу посередине, а все фотографии справа- в левом углу посередине? Это вообще как-то возможно сделать?

  8. Вадим:

    Добрый вечер! подскажите пожалуйста если много фото то внизу они становятся очень маленькие можно ли сделать так что бы размер не уменьшался а они пролистывались? заранее благодарен

    Ответить
«12
Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »

Рейтинг@Mail.ru