Галерея highslide

1K
.
Nurdaulet
Highslide автоматически добавляет к картинкам эффект плавного увеличения. Сайт http://highslide.com
Скачать http://highslide.com/download.php
Это для браузеров поддерживающих JS. Пример можете смотреть с офф сайта.
Установка:
Например для фотоальбома JohnCMS 4.4-5.0
Распаковываем, например, в корень своего сайта архив, так чтобы все файлы, относящиеся к Highslide, находились в одной папке.
Сначала подключаем библиотеку
В HTML-код вставляем следующее:

Между тегами <head></head>

<script type="text/javascript" src="/js/highslide/highslide.js"></script>
<script type="text/javascript">
<link rel="stylesheet" type="text/css" href="/js/highslide/highslide.css" />


JS код
<script type="text/javascript">
hs.graphicsDir = '/js/highslide/graphics/'; //папка, в которй лежит оформление плагина
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.fadeInOut = true;
hs.outlineType = 'glossy-dark';
hs.wrapperClassName = 'dark';
hs.captionEval = 'this.a.title';
hs.numberPosition = 'caption';
hs.useBox = true;
hs.width = 600;
hs.height = 400;
//hs.dimmingOpacity = 0.8;

// Add the slideshow providing the controlbar and the thumbstrip
hs.addSlideshow({
//slideshowGroup: 'group1',
interval: 5000,
repeat: false,
useControls: true,
fixedControls: 'fit',
overlayOptions: {
position: 'bottom center',
opacity: 0.75,
hideOnMouseOut: true
},
thumbstrip: {
position: 'above',
mode: 'horizontal',
relativeTo: 'expander'
}
});

// Make all images animate to the one visible thumbnail
var miniGalleryOptions1 = {
thumbnailId: 'thumb1'
}
</script>


Теперь в /users/includes/album/top.php заменяем следующий код (Строка 160) или скачать готовый архив внизу заменив на существующий

echo '<div class="highslide-gallery"><a class="highslide" id="thumb1" href="../files/users/album/' . $res['user_id'] . '/' . $res['img_name'] . '"  onclick="return hs.expand(this, miniGalleryOptions1)">
<img src="../files/users/album/' . $res['user_id'] . '/' . $res['tmb_name'] . '" title="Нажмите для просмотра" /></a>
</div>';

Результат можно посмотреть http://ваш_сайт/users/album.php?act=top

Библиотека удобен для веб версии сайта
Чтобы перевести на русский язык покопайтесь в highslide.js
Прикрепленные файлы:
.
Скриншот
Прикрепленные файлы:
.
Ego vir viden
красава,запилю в вебку если не против?
.
Sensus veris
selemet (04.07.2013 / 11:06)
красава,запилю в вебку если не против?
ТС явно не против, ибо это разработки зарубежных специалистов
ЗЫ. Давно пользуюсь, радует.
.
я не автор, официальный сайт в 1-ом посте, лицензию и т.п можете посмотреть там.
.
Swank
Сексуальность валенка
Nurdaulet (04.07.2013 / 10:56)
Между тегами <head></head>

<script type="text/javascript" src="/js/highslide/highslide.js"></script>
<script type="text/javascript">
<link rel="stylesheet" type="text/css" href="/js/highslide/highslide.css" />
а ето зачем <script type="text/javascript"> у меня из за етого ошыбку выбивает
.
Swank, Это подключение яваскрипта, если его не подключить то смысла в этом нет... А какая ошибка и как ты прописал это?
.
I'm the Cult of Personality...
ниче так у Флайселфа на сайте похожый js
.
а я на своем в вебку запилю
.
Сексуальность валенка
valik619, на твой пост (04.07.2013 / 14:59) отвечу, я то знаю ну где закрытее тега?
Всего: 42