Хаки для DLE Highslide удобный просмотр картинок

Данный вариант хак dle поможет вам изменить стандартное от движка DataLife Engine окно просмотра большого количество в полной новости картинок, фото или изображений ещё известный, под названием Highslide.

Представляем вам вариант на https://dle9.com/ хак для Dle Highslide удобный и красивый способ просмотр картинок, который имеет возможность слева выбирать мини картинку или проходить на предыдущую новость обозначенная стрелками и русскими словами. Также фон полностью затемняется, что способствует более улучшенному переходу по необходимым фотографиям.

Хак для Dle Highslide

Установка Highslide удобный просмотр картинок

1. Вначале следует заменить файлы из архива 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
    });";

Важно для работы на всех страницах:
Находим:

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;
}

Все установка закончена, проверить можно в полной новости с большим количеством фотографий.

Автор: RedRat

Предлагаем ознакомится с Хаки для dle Highslide удобный просмотр картинок

highslide-DLE_9.x.zip [92,25 Kb] (cкачиваний: 367)