Не нравятся результаты поиска? Попробуйте другой поиск!

DLE FAQ » Все вопросы » Шаблоны (TPL) » Галлерея с категориями

Галлерея с категориями

adoa 26.05.2014 Шаблоны (TPL), jQuery 3318

вопрос

Здравствуйте, существует потребность сделать галлерею с разбитую по разделам.

Все разделы на 1 странице вот код допустим 2 категорий тоесть тыкаешь по картинке и отображаются через highslide


<div class="highslide-gallery">
    <a id="thumb1" href="highslide/images/large/6.jpg" class="highslide" 
            title="2232323" 
            onclick="return hs.expand(this, config1 )">
        <img src="highslide/images/thumbs/6.jpg"  alt="111" style="
    float: left;
    margin: 20px 40px 0px 40px;" />
    </a><span class="span9">Асыл</span>
    <div class="hidden-container">
    <a href="highslide/images/large/4.jpg" class="highslide" 
            title="" 
            onclick="return hs.expand(this, config1 )">
        <img src="highslide/images/thumbs/4.jpg"  alt=""/>
    </a>
    <a href="highslide/images/large/5.jpg" class="highslide" 
            title="" 
            onclick="return hs.expand(this, config1 )">
        <img src="highslide/images/thumbs/5.jpg"  alt=""/>
    </a>
    <a href="highslide/images/large/3.jpg" class="highslide" 
            title="" 
            onclick="return hs.expand(this, config1 )">
        <img src="highslide/images/thumbs/3.jpg"  alt=""/>
    </a>
    </div>
</div>


<div class="highslide-gallery">
    <a id="thumb1" href="highslide/images/large/20140308_123312.jpg" class="highslide" 
            title="" 
            onclick="return hs.expand(this, config1 )">
        <img src="highslide/images/thumbs/20140308_123312.jpg"  alt="" style="
    float: left;
    margin: 20px 40px 0px 40px;"/>
    </a><span class="span8">Ансар</span>
    <div class="hidden-container">
    <a href="highslide/images/large/20131213_142139.jpg" class="highslide" 
            title="" 
            onclick="return hs.expand(this, config1 )">
        <img src="highslide/images/thumbs/20131213_142139.jpg"  alt=""/>
    </a>
    <a href="highslide/images/large/20140308_123153.jpg" class="highslide" 
            title="" 
            onclick="return hs.expand(this, config1 )">
        <img src="highslide/images/thumbs/20140308_123153.jpg"  alt=""/>
    </div>
</div>

Но в чем проблема, что тыкая на первую категорию все равно получается как одно большая галлерея(( тоесть в первой категории 3 фото во второй категории 2 фото, когда начинаешь просматривать первую категорию можно перейти сразу во 2((( Мне нужно чтоб просмотр фото был ограничен своим "контейнером"

Ответа пока нет

6 комментариев

Юзер

795

D0Gmatist - 2014-05-2626 мая 2014 12:04 - #29234

Вам следует поставить (заменить) модуль просмотра изображение на Lightbox, и немного подточить. Там есть возможность вывода на одной странице несколько отдельных галерей.

Юзер

adoa - 2014-05-2626 мая 2014 16:45 - #29242

Спасибо, что откликнулись( но я рыл лайтбокс и не видел таких параметров(( можете подсказать уже неделю бьюсь над задачей(

Юзер

307

rocksmart - 2014-05-2626 мая 2014 16:56 - #29243

Попробуй прописать:

hs.expand(this,{slideshowGroup:'group1'})

hs.expand(this,{slideshowGroup:'group2'})

Юзер

adoa - 2014-05-2626 мая 2014 17:13 - #29244

Прописал как Вы посоветовали все категории под разные группы разбил эффект тот же)

<a id="thumb1" href="highslide/images/large/20140315_175111.jpg" class="highslide " title="" onclick="return hs.expand(this,{slideshowGroup:'group1'})">

Юзер

307

rocksmart - 2014-05-2626 мая 2014 17:32 - #29245

<script type="text/javascript">  
<!--  
    hs.graphicsDir = '/engine/classes/highslide/graphics/';
    hs.wrapperClassName = 'wide-border';
    hs.numberOfImagesToPreload = 0;
    hs.showCredits = false;
    hs.dimmingOpacity = 0.60;
    hs.lang = {
        loadingText :     'Загрузка...',
        playTitle :       'Просмотр слайдшоу (пробел)',
        pauseTitle:       'Пауза',
        previousTitle :   'Предыдущее изображение',
        nextTitle :       'Следующее изображение',
        moveTitle :       'Переместить',
        closeTitle :      'Закрыть (Esc)',
        fullExpandTitle : 'Развернуть до полного размера',
        restoreTitle :    'Кликните для закрытия картинки, нажмите и удерживайте для перемещения',
        focusTitle :      'Сфокусировать',
        loadingTitle :    'Нажмите для отмены'
    };
    
    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
        }
    });
//-->
</script>

<div class="highslide-gallery">
    <a id="thumb1" href="http://film.necom.ura/uploads/posts/1364560161_53543_poster_small.jpg" class="highslide" title="2232323" 
onclick="return hs.expand(this,{slideshowGroup:'group1'} )"><img src="http://film.necom.ura/uploads/posts/1364560161_53543_poster_small.jpg"  alt="111" style="float: left;margin: 20px 40px 0px 40px;" /></a>
<span class="span9">Асыл</span>
    <div class="hidden-container">
<a href="http://film.necom.ura/uploads/posts/1364560167_53498_poster_small.jpg" class="highslide" title="" onclick="return hs.expand(this,{slideshowGroup:'group1'})"><img src="http://film.necom.ura/uploads/posts/1364560167_53498_poster_small.jpg"  alt=""/></a>
<a href="http://film.necom.ura/uploads/posts/1364560218_53418_poster_small.jpg" class="highslide" title="" onclick="return hs.expand(this,{slideshowGroup:'group1'})"><img src="http://film.necom.ura/uploads/posts/1364560218_53418_poster_small.jpg"  alt=""/></a>
    </div>
</div>                    
                        
                            
    <div class="highslide-gallery">
    <a id="thumb1" href="http://film.necom.ura/uploads/posts/1364560552_53064_poster_small.jpg" class="highslide" title="2232323" 
onclick="return hs.expand(this,{slideshowGroup:'group2'} )"><img src="http://film.necom.ura/uploads/posts/1364560552_53064_poster_small.jpg"  alt="111" style="float: left;margin: 20px 40px 0px 40px;" /></a>
<span class="span9">Асыл</span>
    <div class="hidden-container">
<a href="http://film.necom.ura/uploads/posts/1364562657_50653_poster_small.jpg" class="highslide" title="" onclick="return hs.expand(this,{slideshowGroup:'group2'})"><img src="http://film.necom.ura/uploads/posts/1364562657_50653_poster_small.jpg"  alt=""/></a>
<a href="http://film.necom.ura/uploads/posts/1364560552_53064_poster_small.jpg" class="highslide" title="" onclick="return hs.expand(this,{slideshowGroup:'group2'})"><img src="http://film.necom.ura/uploads/posts/1364560552_53064_poster_small.jpg"  alt=""/></a>
    </div>
</div>

Заметь что галерея начинает работать только при просмотре полной новости или в статических страницах

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

Юзер

adoa - 2014-05-2628 мая 2014 06:57 - #29303

Решил всё таки проблему теперь разбиваются на категории
1) highslide.config.js создать

1)


hs.addSlideshow({
    slideshowGroup: 'group10', // сдесь создаем от 1 до 10 смотря сколько категорий на каждую отдельно
    interval: 5000,
    repeat: false,
    useControls: true,
    fixedControls: 'fit',
    overlayOptions: {
        className: 'large-dark',
        opacity: 0.6,
        position: 'bottom center',
        offsetX: 0,
        offsetY: -15,
        hideonmouseout: true
    },
    thumbstrip: {
        mode: 'horizontal',
        position: 'above',
        relativeTo: 'image'
    }

});


var config13 = {                                       // номер категории
    slideshowGroup: 'group13',             // номер группы которую создали выше
    thumbnailId: 'thumb13',                  // также номер должен совпадать здесь
    numberPosition: 'caption',
    transitions: ['expand', 'crossfade']
};

2) main.tpl (у меня тут нужно)
1) прописываем

onclick="return hs.expand(this, config11)">

для всех фото в группе
2)

<a id="thumb11" href="highslide/images/large/IMG_5581.jpg" class="highslide" onclick="return hs.expand(this, config11)">


<div class="highslide-gallery">
    <a id="[b]thumb11[/b]" href="highslide/images/large/IMG_5581.jpg" class="highslide" 
            title="описание" 
            onclick="return hs.expand(this, [b]config11[/b] )">
        <img src="highslide/images/thumbs/IMG_5581.jpg"  alt="описание" style="
    float: left;
    margin: 20px 40px 0px 40px;"/>
    </a></a><span class="span7">описание</span>
    <div class="hidden-container">
    <a href="highslide/images/large/IMG_5593.jpg" class="highslide" 
            title="описание" 
            onclick="return hs.expand(this, [b]config11[/b] )">
        <img src="highslide/images/thumbs/IMG_5593.jpg"  alt="описание"/>
    </a>
    <a href="highslide/images/large/IMG_5579.jpg" class="highslide" 
            title="описание" 
            onclick="return hs.expand(this, [b]config11[/b] )">
        <img src="highslide/images/thumbs/IMG_5579.jpg"  alt="описание"/>
    </a>
    <a href="highslide/images/large/IMG_55742.JPG" class="highslide" 
            title="описание" 
            onclick="return hs.expand(this, [b]config11[/b] )">
        <img src="highslide/images/thumbs/IMG_55742.JPG"  alt="описание"/>
    </a>
    </div>
</div>

Похожие вопросы

Автообновление DIV блока через Javascript

17.03.2013 websot Шаблоны (TPL)

Как вывести постер в краткой новости?

28.04.2013 voltamper Шаблоны (TPL)

navigation.tpl отказывается дружить!

15.12.2013 deffos Общие вопросы, Шаблоны (TPL), Ламерские вопросы

Модальные окна в DLE 10.3

15.09.2014 G-3p Шаблоны (TPL)

Стандартные модальные окна DLE + доп. поля

07.10.2014 Саня Шаблоны (TPL)

Как запретить вывод блока на нескольких статических страницах?

01.12.2014 AleksMey Шаблоны (TPL)

Почему не работают табы при ajax full story?

17.02.2015 serg91100 Шаблоны (TPL), jQuery

Как вывести просмотры определенной новости ?

24.02.2015 akafaus Шаблоны (TPL)

Как сделать адаптивный слайдер через custom?

23.03.2015 Kaleb Шаблоны (TPL), jQuery

Последние события

Shandi | Почему не отображается картинка в галере ... ²

Shandi
Почему не отображается картинка в галерее?
Сегодня, 08:53

Мне как ламеру ничего не понятно:( Кто-то это исправляет за денужку?
TeraMoune | Как сделать водяной знак с заменой? ¹

TeraMoune
Как сделать водяной знак с заменой?
Вчера, 23:29

Картинки загружаются в разные директории в зависимости от длительного периода загрузок этих папок может быть десятки. Более того оригинальные изображения не всегда имеют безопасные имена и при загрузке часто переименовываются. Так что не факт, что оригиналы соответствуют загруженным копиям.
TeraMoune | Почему не отображается картинка в галере ... ²

TeraMoune
Почему не отображается картинка в галерее?
Вчера, 23:19

Потому что какой-то стиль может скрывает изображение. Проинспектируйте элемент, отыщите в древо html изображение и указав на него указатель в инспекторе кода посмотрите не наследуются ли какие-то посторонние стили.
Beton1205 | Как реализовать шифрование трафика? ⁴

Beton1205
Как реализовать шифрование трафика?
Вчера, 17:55

Делается очень просто. Грузим файлы на cdn, либо друглй сервак.
На сайте пишем простой скрипт, который будет получать реальные адреса, например адрес файла site.ru/video.mp4, скрипт долюен проверять, что с вашего адреса идет звпрос. И тупо скриптом выводим ссылку аля vashsite.site/video.mp4 и прокидукм ее mod rewrite
mondolfo | Как вывесит в comments.tpl картинку с но ... ⁷

mondolfo
Как вывесит в comments.tpl картинку с новости?
23-11-2024, 23:42

кто-нибудь решил эту?
Darkzone | Выбор категории для доп. поля? ⁴

Darkzone
Выбор категории для доп. поля?
22-11-2024, 17:08

Разъясните как вытащить id?
lutskboy | Вытащить все данные из определенного доп ... ¹

lutskboy
Вытащить все данные из определенного доп поля?
22-11-2024, 16:17

в adminer можно.

lutskboy | Выбор категории для доп. поля? ⁴

lutskboy
Выбор категории для доп. поля?
22-11-2024, 16:14

выбрать все кроме такого нет. можно с бд достать все ид через запятую и вставить в xfields.txt
js скрипт можно написать


<script>
    window.addEventListener('load', ()=> {
        $('#category').on('change', function() {
            var value = $(this).val();
            if ($.isArray(value)) {
            	ShowOrHideEx("xfield_holder_year", jQuery.inArray('1', value) != -1 || jQuery.inArray('2', value) != -1 );
            } else {
            	ShowOrHideEx("xfield_holder_year", value == 1 || value==2);
            }
        })
    });
</script>
year доп поле . 1 и 2 катег

Darkzone | Выбор категории для доп. поля? ⁴

Darkzone
Выбор категории для доп. поля?
22-11-2024, 14:39

Смотрите, Нужно чтоб обязательное к заполнению доп. поле при добавлении новости, выводилось во всех категориях, кроме двух. Так как количество категорий довольно большое, есть ли способ, не тыкать каждую категорию в которой будет отображаться доп.поле. Надеюсь я смог разъяснить.
lutskboy | Выбор категории для доп. поля? ⁴

lutskboy
Выбор категории для доп. поля?
22-11-2024, 13:52

где выводить? админка или сайт

наверх