Скрипт слайдшоу

Тема в разделе "JavaScript", создана пользователем Sudba, 14 сен 2015.

Модераторы: ZiX
  1. Sudba

    Sudba

    Регистр.:
    6 дек 2007
    Сообщения:
    885
    Симпатии:
    45
    Здравствуйте, подскажите, нашел в интернете решение готовое.
    Но нужно вызывать слайдшоу кликом по ссылке.
    То есть: есть текст в нем есть ссылка, нажали на нее - появилось слайдшоу, а сам сайт немного потемнел, чтобы выделить именно картинки.
    Как бы такое организовать?
     
  2. Aglok

    Aglok ∞³

    Регистр.:
    9 янв 2012
    Сообщения:
    162
    Симпатии:
    46
    Создаёшь событие onclick по клику мыши затемняешь фон document.body.style.backgroundColor = '#ccc', и запускаешь функцию отвечающую за слайдшоу. При закрытии вешаешь обработчик на кнопку закрыть и убираешь стиль document.body.style.backgroundColor = '';
     
  3. Sudba

    Sudba

    Регистр.:
    6 дек 2007
    Сообщения:
    885
    Симпатии:
    45
    я немного не понимаю((( Можете написать код, какой нужен на сайт вставить?
     
  4. Aglok

    Aglok ∞³

    Регистр.:
    9 янв 2012
    Сообщения:
    162
    Симпатии:
    46
    Так ты покажи вначале какой у тебя код. От этого уже будем прыгать. Или ты проверяешь телепатические способности?
     
  5. Solus_Rex

    Solus_Rex

    Регистр.:
    15 янв 2012
    Сообщения:
    425
    Симпатии:
    182
    Посмотрите в поиске по фразе "popup окно" или "модальное окно".
    Например вот:
    http://dbmast.ru/rotator-kontenta-v-modalnom-okne

    Вот пример оттуда, слайдер работает:
    http://dbmast.ru/files/rotomodal/demo.html
     
  6. Sudba

    Sudba

    Регистр.:
    6 дек 2007
    Сообщения:
    885
    Симпатии:
    45
    Я выбрал вот такой http://pcvector.net/scripts/slideshow_and_scroller/316-slaydshou-s-jmpressjs.html чтобы можно было стрелочками фото менять вручную.
     
  7. Aglok

    Aglok ∞³

    Регистр.:
    9 янв 2012
    Сообщения:
    162
    Симпатии:
    46
    1. Вставляешь у себя на странице скрипт.
    Код:
            $(function(){
                $('.showSlider').on('click', function(){
    
                     //Добавляем полупрозрачный фон затемнения
                    $('body').append('<div id="fade"></div>'); //div контейнер будет прописан перед тегом </body>.
                    $('#fade').css({
                        'display': 'none',
                        'background': 'rgba(85, 85, 85, 0.8)',
                        'position': 'fixed',
                        'left': 0,
                        'top': 0,
                        'width': '100%',
                        'height': '100%',
                        'z-index': 9999,
                        'filter' : 'alpha(opacity=80)'
                    }).fadeIn(); //полупрозрачность слоя, фильтр для тупого IE
                    $( '#jms-slideshow' ).jmslideshow();
                    $( '#jms-slideshow' ).css({
                                'display' : 'block',
                                'z-index': 99999,
                                'position': 'absolute',
                                'left': Math.round($('.jms-slideshow').width() / 8) ,
                                'top': Math.round($('.jms-slideshow').height() / 4)
                    });
                });
                
                //Закрываем окно и фон затемнения
            $(document).on('click', 'a.close, #fade', function() { //закрытие по клику вне окна, т.е. по фону...
                $('#fade , .jms-slideshow').fadeOut(function() {
                $('#fade, a.close').remove();  //плавно исчезают
            });
            return false;
           });
    
            });
    2. Это ссылка, по клику появляется слайдер. Во всех ссылках устанавливай класс showSlider. Если кликнуть в не слайдера - он закрывается.
    Код:
    <a class="showSlider" href="#">Показать слайдер</a>
    3. Убери со страницы код который показывает сразу же слайдер:
    Код:
                $(function() {
                    $( '#jms-slideshow' ).jmslideshow();
                });
    4. В файле style.css нужно поменять на:
    Код:
    .jms-slideshow {
        position: relative;
        width: 80%;
        /*max-width: 1400px;*/
        /*min-width: 640px;*/
        margin: 20px auto;
        height: 460px;
        display:none;
    }
     
    Последнее редактирование: 16 сен 2015
  8. Jekins

    Jekins Писатель

    Регистр.:
    4 мар 2015
    Сообщения:
    9
    Симпатии:
    0
    Кто-то знает плагин такой карусели, но с поддержкой тач устройств и что-бы можно было не только изображения ставить, а и html контент?
    [​IMG]
     
  9. Bannikow

    Bannikow Создатель

    Регистр.:
    2 апр 2014
    Сообщения:
    15
    Симпатии:
    1
    ввв.internet-technologies.ru/articles/article_2279.html возьмите и доработайте немного напильником
     
  10. Alexsmm

    Alexsmm Постоялец

    Регистр.:
    2 окт 2015
    Сообщения:
    105
    Симпатии:
    8
    у меня он так и не заработал, правда мы немного его "пилили"