Заменяем lightbox на highslide

Автор: Дима
Опубликовано: 537 дней назад (23 августа 2010)
Рубрика: Без рубрики
Редактировалось: 2 раза — последний 23 августа 2010
Настроение: Супер
Играет: Добрынин
+25
Голосов: 29
Так же само как и maxisoft’у мне лайтбокс стал не нравиться, я решил его заменить лучшей заменой. Заменой будет Highslide. HighSlide имеет множество вариантов реализации, я выбрал только одну. И так приступим...

1. Качаем архив : СКАЧАТЬ
2. Копируем файлы в корень сайта.
3. Открываем файл templates/Ваш_шаблон/template.php и перед </head> вставляем:
Код PHP:
<script type="text/javascript" src="/includes/slide/highslide-with-gallery.js"></script>
<link rel="stylesheet" type="text/css" href="/includes/slide/highslide.css" />
<script type="text/javascript">
	hs.graphicsDir = '/includes/slide/graphics/';
	hs.align = 'center';
	hs.transitions = ['expand', 'crossfade'];
	hs.fadeInOut = true;
	hs.dimmingOpacity = 0.8;
	hs.outlineType = 'rounded-white';
	hs.captionEval = 'this.thumb.alt';
	hs.marginBottom = 105 // make room for the thumbstrip and the controls
	hs.numberPosition = 'caption';

	// Add the slideshow providing the controlbar and the thumbstrip
	hs.addSlideshow({
		//slideshowGroup: 'group1',
		interval: 5000,
		repeat: false,
		useControls: true,
		overlayOptions: {
			className: 'text-controls',
			position: 'bottom center',
			relativeTo: 'viewport',
			offsetY: -60

		},
		thumbstrip: {
			position: 'bottom center',
			mode: 'horizontal',
			relativeTo: 'viewport'
		}
	});
</script>
Сохряняем...

4. Открываем файл /components/photos/frontend.php и заменяем строку (где-то 338):
Код PHP:
echo '<a class="lightbox-enabled" rel="lightbox-galery" href="'.$photolink.'" title="'.$con['title'].'">';
Заменяем на :

Код PHP:
echo '<a href="'.$photolink.'" class="highslide" onclick="return hs.expand(this)">';
Всё на этом установка заканчивается. Если Вы всё правильно сделали должно получиться вот- так:



Чем хорош HighSlide:

1. Кода вы наводите курсор на картинку, он превращается в увеличительное стекло
2. Кода вы наводите курсор на картинку, он немного подскакивает
3. В нижней части экрана вы водятся все картинки (см. рис) (можно сделать вертикально)
4. Есть кнопка "Play", нажав на нее Вы можете запустить слайд-шоу


Вот и всё... Пишите в комментариях о ХАК’е.


ЗЫ: тестировал в лисе (только в лисе) за работу в других браузерах я не отвечаю, потому что еще раз хочется сказать я тестировал в лисе.  - глуповато написал  scratch

ДЕМО ХАК&#8217;а
Модуль - Обратный счётчик | ХАК Последние материалы + ajax
Дима # 23 августа 2010 в 16:21 +5
Сделал демонстрацию улучшения (ХАК&#8217;a): ДЕМО ХАК&#8217;а
Greener # 23 августа 2010 в 19:18 +1
Спасибо за демку
Greener # 23 августа 2010 в 19:24 +1
Только не заметил в демке проявления описанных эффектов (смотрел через Оперу):
"1. Кода вы наводите курсор на картинку, он превращается в увеличительное стекло
2. Кода вы наводите курсор на картинку, он немного подскакивает"
Дима # 23 августа 2010 в 19:27 0
Дождись полной загрузки страницы
Greener # 23 августа 2010 в 19:38 +1
Дождался )
В ИЕ работают эти мелочи, а в Опере - нет.
Ну да ладно. Не суть важно. Без них даже лучше )
0 # 23 августа 2010 в 20:06 +2
У меня в 10-й опере нормально работает.
0 # 23 августа 2010 в 18:23 +2
ЗЫ: тестировал в лисе (только в лисе) за работу в других браузерах я не отвечаю, потому что еще раз хочется сказать я тестировал в лисе.  - глуповато написал  scratch
В опере протестил, все нормально.  joke
Greener # 23 августа 2010 в 19:27 +1
Спасибо за ХАК.
Симпатично и удобно!
Дима # 23 августа 2010 в 20:20 0
Всегда рад стараться  v
qwest # 23 августа 2010 в 21:10 +1
В IE полет нормальный.
Возможно вместо Play лучше написать слайдшоу.
Дима # 23 августа 2010 в 22:30 +1
Да это возможно. Надо открыть файл /includes/slide/highslide-with-gallery.js
Заодно исправьте если кому-то надо ошибку со "Следуюющий" на "Следующий".
0 # 23 августа 2010 в 21:57 +1
Очень круто, спасибо!!!
nikolas # 28 августа 2010 в 18:19 0
было бы не плохо прикрутить lightbox в фотоальбоме пользователей .
Александр # 28 августа 2010 в 18:42 0
Все конечно красиво, но сугубо мое личное мнение:
1. Много весит.
2. На сам highslide ПЛАТНАЯ, Повторюсь Платная ЛИЦЕНЗИЯ. Может для кого-то это и мелочь,
   но я так не считаю.
Atheist # 28 августа 2010 в 23:19 0
Если Вы не умеете читать, это Ваши проблемы
http://highslide.com/#licence:
Do you want to use Highslide for a personal website, a school site, your family&#8217;s photo album or a non-profit organisation? Then you don&#8217;t need the author&#8217;s permission, just go on and use Highslide.
Перевод нужен?
Александр # 30 августа 2010 в 01:15 0
Ну и разрабатывайте сайт для школы или у себя строго на локальном, а вот у нас в РБ с этим строго. Коммерсант - плати налог. Да и права авторские соблюдай.

If you want to use Highslide for a commercial website, you get the author&#8217;s permission by filling in the domain name in the "Buy now" page and paying the fee.

What is a commercial website?
A commercial website is a website which purpose is generating revenue or cash flow of any type, and that isn&#8217;t under a non-profit organization. So if you&#8217;re selling a product, selling advertisement, selling a service or just marketing a commercial business, your site is commercial. A company website is also commercial even if it doesn&#8217;t sell anything, as it&#8217;s purpose is to front a commercial company.

Кстати с иностранным у меня туго. Не переведете??? Ну очень нужно...
Александр # 30 августа 2010 в 01:17 0
You are allowed to distribute Highslide JS with non-commercial packages given that you fulfill two conditions:  
    * Emphasize to your users that Highslide JS is not free for commercial use. You can do this on your download page or when your users activate Highslide in your application.  
    * Provide a link back to this web page in the same location.

И это...
0 # 30 августа 2010 в 09:12 0
Интересно а кто у Вас в РБ проверяет авторские права на скрипты? если это конечно не секрет?
Александр # 30 августа 2010 в 10:19 0
а кто у Вас проверяет авторские права на скрипты

-У нас никто, а вот правообладатель заявить может.

Да и вообще-то конечно можно - если осторожно.
Тут аспект больше моральный.

Еще раз повторюсь - этот комментарий лично мое мнение описывает. Я ж не заставляю
всех начать уважать авторское право. Это больше как совесть позволит.
Нет ну если кому-то по барабану... Пожалуйста. Я ж не отговариваю, просто
при создании данного блога необходимо было предупредить народ. Что я и сделал.

Цитата:
You are allowed to distribute Highslide JS with non-commercial packages given that you fulfill two conditions:       * Emphasize to your users that Highslide JS is not free for commercial use. You can do this on your download page or when your users activate Highslide in your application.       * Provide a link back to this web page in the same location.
0 # 30 августа 2010 в 10:40 +1
Не думаю что право обладатель будет заявлять в белорусский суд свои права, в этом есть куча подводных камней, знаю по личному опыту, в РБ не так просто доказать свои авторские права на ПО и скрипты.

А то что лучше юзать свободные скрипты которые на порядок выше данного с этим я согласен.
Дима # 30 августа 2010 в 10:59 +1
И все ждут моей реплики... zst

На счёт платности скажу честно не знал. look

Но всё таки бесплатное использование, возможно!!! dance Ковыряться в коде ещё никто не запрещал...  v

Всё, что я могу сделать это удалить демо ХАК&#8217;a, что сейчас и сделаю.
Дальнейшее использование ХАК&#8217;а, Вами я не контролирую, и Вы отвечаете за его использование сами. stuk
Александр # 30 августа 2010 в 12:15 +1
+1 то что надо  v
pasplus # 4 сентября 2010 в 21:01 0
СПАСИБО! СПАСИБО! СПАСИБО!!! Очень красиво!
0 # 5 сентября 2010 в 04:09 0
А у меня почему то отображается снизу иеню лого и т д
Скрытый текст виден только зарегистрированным пользователям
" target="_blank">http://kam-online.ru/photos/1035[/hide]
не подскажеш как решить?
Оле-Лукойе # 25 сентября 2010 в 16:24 +1
Спасибо!!!!!!!! Всё прекрасно. И хорошо, что появляется лупа при наведении на фотку - пользователь догадывается тыкнуть, а то до этого на само изображение не мало кто догадывался и не знал, что можно смотреть в лайтбоксе - ссылка под картинкой больше вызывала желания нажать. Теперь более явно предоставлена возможность красивого вывода картинок.
Rich # 8 октября 2010 в 00:22 0
Спасибо работает !
dmitry920 # 12 января 2011 в 05:47 +1
а подскажите что покрутить в frontend.php в версии 1.7 ?
Blit # 3 апреля 2011 в 16:47 0
Кто знает как в 1.7 версии настроить? Помогите народ!
Dimitrius # 3 апреля 2011 в 16:53 0
Вообще по идеи тоже самое.. или у вас не работает?
tanks # 4 июня 2011 в 21:20 +1
там нет такой строки=(
fact # 2 декабря 2011 в 04:17 0
на 1.9 её бы поставить. Лицуха в принципе не очень дорого - 30 бачинских стоит на один сайт
Nikitka # 2 декабря 2011 в 05:09 0
Кто подскажет как прикрутить хайслайд на стену!Версия 1.8 цель чтоб эффектами хайслайда открывались картинки и видео!
fact # 2 декабря 2011 в 11:55 0
+ к фотоальбому юзеров в 1.9 прикрутить.
Вообще замечательный слайдер фото. Наверняка многим такой на сайт нужен