Скачать 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