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. бахилы:

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

    Ответить
    • driver:

      бахилы

      Трудно не заметить кнопочку Контакт на верху страницы :))

      Ответить
  2. AnatoliyErmolaev:

    Здравствуйте! Ваш блог мне очень понравился, не могу подключить rss ленту, может я что-то не то делаю — подскажите пожалуйста куда нажимать, и работает ли она у Вас вообще? Заранее благодарен!

    Ответить
  3. Damien:

    Здравствуйте. Прочитав вашу статью, использовал highslide-width-gallery.Возник вопрос: на странице находится iframe, в который подгружается страничка с изображениями. При клике на thumbs highslide отображает увеличенное изображение, но изображение перемещается только в приделах фрэйма. Насколько я понял, увеличенное изображение-это скрытый див, динамически добавленный в документ. Возможно ли создавать этот див в родительском документе? Если да, то что необходимо изменить в hs? Спасибо.

    Ответить
    • driver:

      Насколько я в теме, то сделать это Вам ничего не мешает и менять в hs так же ничего не надо. Если не прав, народ поправит...

      Ответить
  4. Артур Фаткуллин:

    Конец архива неожиданный... в Вашей версии ( А статья полезная. Огромная благодарность )

    Ответить
  5. driver:

    Конец архива неожиданный...

    Артур, я так и не понял в чем неожиданность?

    Если что то упустил или какая то ошибка, то подскажите.

    Ответить
  6. Олег:

    ... и что за файлы типа

    thumbstrip24.thumb.png

    ? откуда они вдруг взялись? нужно всю фотогалерею предварительно переконвертировать чем то?

    Ответить
    • driver:

      Олег эти файлы имеют формат PNG, а если вас смущает такие длинные имена thumbstrip24.thumb.png, автору необходимо было как то классифицировать большой объем изображений, для выводов примеров разных типов галерей. В простом использовании этого делать не придется. Выбираете вид галереи, правильно прописываете ваши картинки в html и все. Есть же исходники вставьте свои картинки вместо демонстрационных, только не забывайте о путях и к скрипту, и к самим картинкам.

      Надеюсь разберетесь. Удачи

      Ответить
  7. Margarita:

    Может просто сделать, Как на этом сайте http://www.1aaa.ru/

    Ответить
    • driver:

      Margarita

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

      Но все же спасибо и за такое внимание к статье.

      Ответить
  8. Oleg:

    подскажите, а как все таки обойтись без предварительного переконвертирования фоток в формат png для превьюшек?

    и еще проблема — с подгонкой изображения под размер экрана, как это можно сделать, подскажите , пожалуйста. (опять таки — приходится переделывать все фотки, чтоб они правильно отображались, а то, если вставить оригинальное фото на 4000×3000 пикселей — не очень красиво получается в итоге)

    Ответить
    • driver:

      Oleg

      Конвертировать превьюшки в формат png конечно же не обязательно, создаете картинку в формате jpg определенного размера, просто в png превьюхи выглядят более четкими. С подгонкой изображения, попробуйте другой вид галереи без рамки вокруг области просмотра или без подгонки размера бокса под размер картинки. А вообще для таких масштабных изображений (4000×3000 пикселей ) лучше использовать при клике на картинку не переход к следующему, а открытие полномасштабного просмотра.

      Можете изменить ширину и высоту div контейнера вокруг области просмотра <div id="gallery-area" style="width: 620px; height: 520px; margin: 0 auto; border: 1px solid silver"></div> подогнав под больший размер.

      Ответить
  9. Oleg:

    а можно еще как-то встроить под каждой картинкой возможность комментирования? (как это реализовано вконтакте, например)

    Ответить
    • driver:

      Oleg Здравствуйте.

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

      Ответить
  10. Здравствуйте. Я модерирую сайт palidli.az (не реклама) и хотел бы на главной разместить подобную мини галерею. Сайт построен на движке Джомла (php). у меня такой вопрос... этот скрипт будет работать на php и вообще в движке Джомла? Автор, если не трудно свяжись со мной по эл. почте.

    Ответить
  11. Я короче поставил его на сайт, все вроде работате нормально, но вот кнопки не видны... только подпись к кнопке видна, ноработает. Че делать?

    Ответить
  12. Все разобрался. Как я раньше не догодался...

    Уважаемый автор, вы забыли добавить путь к css. Как я раньше не догадался.

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

    Ответить
    • driver:

      Заур, спасибо за интерес к статье.

      Рад, что у вас все получилось, экспериментируя, иногда ошибаясь, порой тупо методом проб и ошибок, мы получаем то чего хотели.

      Ответить
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