• Автор:

    Flesha
  • Добавлено:

    окт 22, 2012
  • Комментариев:

    2
  • Просмотров:

    3692

Меняем стиль галереи HighSlide

Меняем стиль галереи HighSlide

1. Скачайте архив:
Внимание! У Вас нет прав для просмотра скрытого текста.

Этот архив содержит файлы библиотеки HighSlide версии 4.1.13 (а именно highslide-with-gallery.min.js, который переименован в highslide.js, и highslide.css).

Загрузите файлы в папку "engine/classes/highslide".

2. В "index.php" найдите

<script type="text/javascript">  
<!--
hs.graphicsDir = '{$config['http_home_url']}engine/classes/highslide/graphics/';
{$type}
hs.numberOfImagesToPreload = 0;
hs.showCredits = false;
{$dimming}
hs.lang = {
loadingText : '{$lang['loading']}',
playTitle : '{$lang['thumb_playtitle']}',
pauseTitle: '{$lang['thumb_pausetitle']}',
previousTitle : '{$lang['thumb_previoustitle']}',
nextTitle : '{$lang['thumb_nexttitle']}',
moveTitle : '{$lang['thumb_movetitle']}',
closeTitle : '{$lang['thumb_closetitle']}',
fullExpandTitle : '{$lang['thumb_expandtitle']}',
restoreTitle : '{$lang['thumb_restore']}',
focusTitle : '{$lang['thumb_focustitle']}',
loadingTitle : '{$lang['thumb_cancel']}'
};
{$gallery}
//-->
</script>


и замените на

<script type="text/javascript">  
<!--
hs.graphicsDir = '{$config['http_home_url']}engine/classes/highslide/graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.fadeInOut = true;
hs.dimmingOpacity = 0.8;
hs.wrapperClassName = 'borderless floating-caption';
hs.captionEval = 'this.thumb.alt';
hs.marginLeft = 100; // make room for the thumbstrip
hs.marginBottom = 80 // make room for the controls and the floating caption
hs.numberPosition = 'caption';
hs.lang = {
cssDirection: 'ltr',
loadingText: 'Загружается...',
loadingTitle: 'Нажмите для отмены',
focusTitle: 'Нажмите чтобы поместить на передний план',
fullExpandTitle: 'Развернуть до оригинального размера',
creditsText: 'Использует <i>Highslide JS</i>',
creditsTitle: 'Перейти на домашнюю страницу Highslide JS',
previousText: 'Предыдущее',
nextText: 'Следующее',
moveText: 'Переместить',
closeText: 'Закрыть',
closeTitle: 'Закрыть (esc)',
resizeTitle: 'Изменить размер',
playText: 'Слайдшоу',
playTitle: 'Начать слайдшоу (пробел)',
pauseText: 'Пауза',
pauseTitle: 'Приостановить слайдшоу (пробел)',
previousTitle: 'Предыдущее (стрелка влево)',
nextTitle: 'Следующее (стрелка вправо)',
moveTitle: 'Переместить',
fullExpandText: 'Оригинальный размер',
number: 'Изображение %1 из %2',
restoreTitle: 'Нажмите чтобы закрыть изображение, нажмите и перетащите для изменения местоположения. Для просмотра изображений используйте стрелки.'
};
{$gallery}
//-->
</script>


найдите

    $gallery = "
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.addSlideshow({
interval: 4000,
repeat: false,
useControls: true,
fixedControls: 'fit',
overlayOptions: {
opacity: .75,
position: 'bottom center',
hideonmouseout: true
}
});";


и замените на

    $gallery = "
// 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',
offsetX: 50,
offsetY: -5
},
thumbstrip: {
position: 'middle left',
mode: 'vertical',
relativeTo: 'viewport'
}
});
// Add the simple close button
hs.registerOverlay({
html: '<div class=\"closebutton\" onclick=\"return hs.close(this)\" title=\"Close\"></div>',
position: 'top right',
fade: 2 // fading the semi-transparent overlay looks bad in IE
});";


Если хотите, что бы галерея HighSlide работала на всех страницах, найдите:

if ($config['thumb_gallery'] AND ($dle_module == "showfull" OR $dle_module == "static") ) {


замените на

//if ($config['thumb_gallery'] AND ($dle_module == "showfull" OR $dle_module == "static") ) {


найдите так же

    } else {

$gallery = "";

}


и замените на

/*    } else {

$gallery = "";

}*/


3. В главном файле шаблона "main.tpl" перед

</head>


вставьте

<link media="screen" href="/engine/classes/highslide/highslide.css" rel="stylesheet" />


4. В стилях шаблона вставьте, обычно это файл "templates/*/styles/style.css"

/* Center the text in the caption */
.highslide-caption {
width: 100%;
text-align: center;
}
/* Remove the close button from the controls since we already have one in the corner of the image */
.highslide-close {
display: none !important;
}
/* Put the image number in front of the caption */
.highslide-number {
display: inline;
padding-right: 1em;
color: white;
}


Разработчик: admin-club.ru
Вернуться

Комментарии:


  1. Flesha → 22 октября 2012 00:22
    Очень красивый и удобный вид показа галереи изображений!
    Установка простая за 3 минуты.
    Проверил на 9.7 все работает отлично. Пользуемся! respect
  2. Tom → 22 декабря 2012 22:20
    НЕ работает HighSlide сначала на дэнвере испытывал потом на хостинге и толку нету hmmm2
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.