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

[Sudba]

Здравствуйте, подскажите, нашел в интернете решение готовое.
Но нужно вызывать слайдшоу кликом по ссылке.
То есть: есть текст в нем есть ссылка, нажали на нее - появилось слайдшоу, а сам сайт немного потемнел, чтобы выделить именно картинки.
Как бы такое организовать?

 

[Aglok]

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

 

[Sudba]

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

я немного не понимаю((( Можете написать код, какой нужен на сайт вставить?

 

[Aglok]

Так ты покажи вначале какой у тебя код. От этого уже будем прыгать. Или ты проверяешь телепатические способности?

 

[Solus_Rex]

я немного не понимаю((( Можете написать код, какой нужен на сайт вставить?

Посмотрите в поиске по фразе "popup окно" или "модальное окно".
Например вот:
Для просмотра ссылки Войди или Зарегистрируйся

Вот пример оттуда, слайдер работает:
Для просмотра ссылки Войди или Зарегистрируйся

 

[Sudba]

Посмотрите в поиске по фразе "popup окно" или "модальное окно".
Например вот:
Для просмотра ссылки Войди или Зарегистрируйся

Вот пример оттуда, слайдер работает:
Для просмотра ссылки Войди или Зарегистрируйся

Так ты покажи вначале какой у тебя код. От этого уже будем прыгать. Или ты проверяешь телепатические способности?

Я выбрал вот такой Для просмотра ссылки Войди или Зарегистрируйся чтобы можно было стрелочками фото менять вручную.

 

[Aglok]

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

 

[Jekins]

Кто-то знает плагин такой карусели, но с поддержкой тач устройств и что-бы можно было не только изображения ставить, а и html контент?

 

[Bannikow]

Кто-то знает плагин такой карусели, но с поддержкой тач устройств и что-бы можно было не только изображения ставить, а и html контент?

ввв.internet-technologies.ru/articles/article_2279.html возьмите и доработайте немного напильником

 

[Alexsmm]

ввв.internet-technologies.ru/articles/article_2279.html возьмите и доработайте немного напильником

у меня он так и не заработал, правда мы немного его "пилили"