Заменяем lightbox на highslide
|
|
Автор: Дима
Опубликовано: 537 дней назад (23 августа 2010)
Блог: Мои мысли
Рубрика: Без рубрики
Редактировалось: 2 раза — последний 23 августа 2010
Настроение: Супер
Играет: Добрынин
|
+25↑ Голосов: 29 |
Так же само как и maxisoft’у мне лайтбокс стал не нравиться, я решил его заменить лучшей заменой. Заменой будет Highslide. HighSlide имеет множество вариантов реализации, я выбрал только одну. И так приступим...
1. Качаем архив : СКАЧАТЬ
2. Копируем файлы в корень сайта.
3. Открываем файл templates/Ваш_шаблон/template.php и перед </head> вставляем:
4. Открываем файл /components/photos/frontend.php и заменяем строку (где-то 338):

Чем хорош HighSlide:
1. Кода вы наводите курсор на картинку, он превращается в увеличительное стекло
2. Кода вы наводите курсор на картинку, он немного подскакивает
3. В нижней части экрана вы водятся все картинки (см. рис) (можно сделать вертикально)
4. Есть кнопка "Play", нажав на нее Вы можете запустить слайд-шоу
Вот и всё... Пишите в комментариях о ХАК’е.
ЗЫ: тестировал в лисе (только в лисе) за работу в других браузерах я не отвечаю, потому что еще раз хочется сказать я тестировал в лисе. - глуповато написал
ДЕМО ХАК’а
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", нажав на нее Вы можете запустить слайд-шоу
Вот и всё... Пишите в комментариях о ХАК’е.
ЗЫ: тестировал в лисе (только в лисе) за работу в других браузерах я не отвечаю, потому что еще раз хочется сказать я тестировал в лисе. - глуповато написал
ДЕМО ХАК’а
| # 23 августа 2010 в 16:21 +5 | ||
|
| # 23 августа 2010 в 19:18 +1 | ||
|
| # 23 августа 2010 в 19:24 +1 |
| # 23 августа 2010 в 19:27 0 | ||
|
| # 23 августа 2010 в 19:38 +1 | ||
|
| # 23 августа 2010 в 20:06 +2 | ||
|
| # 23 августа 2010 в 18:23 +2 | |||
|
| # 23 августа 2010 в 19:27 +1 | ||
|
| # 23 августа 2010 в 20:20 0 | ||
|
| # 23 августа 2010 в 21:10 +1 | ||
|
| # 23 августа 2010 в 22:30 +1 | ||
|
| # 23 августа 2010 в 21:57 +1 | ||
|
| # 28 августа 2010 в 18:19 0 | ||
|
| # 28 августа 2010 в 18:42 0 | ||
|
| # 28 августа 2010 в 23:19 0 |
| # 30 августа 2010 в 01:15 0 | ||||
|
| # 30 августа 2010 в 01:17 0 | |||
|
| # 30 августа 2010 в 09:12 0 | ||
|
| # 30 августа 2010 в 10:19 0 | ||||
|
| # 30 августа 2010 в 10:40 +1 | ||
|
| # 30 августа 2010 в 10:59 +1 | ||
|
| # 30 августа 2010 в 12:15 +1 | ||
|
| # 4 сентября 2010 в 21:01 0 | ||
|
| # 5 сентября 2010 в 04:09 0 | ||
|
| # 25 сентября 2010 в 16:24 +1 | ||
|
| # 8 октября 2010 в 00:22 0 | ||
|
| # 12 января 2011 в 05:47 +1 | ||
|
| # 3 апреля 2011 в 16:47 0 | ||
|
| # 3 апреля 2011 в 16:53 0 | ||
|
| # 4 июня 2011 в 21:20 +1 | ||
|
| # 2 декабря 2011 в 04:17 0 | ||
|
| # 2 декабря 2011 в 05:09 0 | ||
|
| # 2 декабря 2011 в 11:55 0 | ||
|
Ковыряться в коде ещё никто не запрещал...