Форум программистов, компьютерный форум, киберфорум
Наши страницы
jQuery
Войти
Регистрация
Восстановить пароль
 
Octaus
0 / 0 / 0
Регистрация: 03.05.2015
Сообщений: 4
1

Меню со слайдером на jQuery

03.05.2015, 10:53. Просмотров 326. Ответов 6
Метки нет (Все метки)

Здравствуйте! Подскажите, пожалуйста, как можно сделать меню со слайдером как на сайте creativaplus.ru. Нужно чтобы при клике по ссылке слева всплывала соответствующая картинка с описанием. Есть ли какие готовые решения с уже написанными скриптами?
0
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
03.05.2015, 10:53
Ответы с готовыми решениями:

Выпадающее меню перекрывается слайдером контента
День добрый, начал разбирать bootsrap 3 и наткнулся на проблему... Вообщем есть выпадающее меню, а...

Меню jquery
Добрый, Задача: - при загрузке старницы меню должно свернуться через 10с. - Если на меню фокус...

Меню на jquery 1.3.2
Нашёл симпотичное меню...

jQuery меню и Joomla
Доброго всем времени суток! Как я понимаю, меню jQuery, а именно создание его пунктов и...

Мега меню на Jquery
Всем привет думаю быть может поможете с отличным вопросом.Дело в том что у меня на странице здесь...

6
Lazy_Den
3035 / 2678 / 1353
Регистрация: 15.01.2014
Сообщений: 5,907
03.05.2015, 11:23 2
Цитата Сообщение от Octaus Посмотреть сообщение
как можно сделать
Именно самому сделать? Просто можно взять практически любой слайдер, где есть навигация по слайдам. Только там обычно ссылки представлены в виде маленьких превьюшек или "точек", а вы можете стилями преобразовать это в меню ссылок.
1
Octaus
0 / 0 / 0
Регистрация: 03.05.2015
Сообщений: 4
03.05.2015, 11:51  [ТС] 3
Цитата Сообщение от Lazy_Den Посмотреть сообщение
Именно самому сделать? Просто можно взять практически любой слайдер, где есть навигация по слайдам. Только там обычно ссылки представлены в виде маленьких превьюшек или "точек", а вы можете стилями преобразовать это в меню ссылок.
Есть слайдер с переключающимися превьюшками, но вот в меню ссылок преобразовать никак не получается.
0
Lazy_Den
3035 / 2678 / 1353
Регистрация: 15.01.2014
Сообщений: 5,907
03.05.2015, 11:55 4
P.S. Вот вам пара примеров, как можно сделать без сторонних плагинов:
Вариант первый. Пути к изображениям привязываем атрибутом data-* к каждой ссылке меню.
Кликните здесь для просмотра всего текста
HTML5
1
2
3
4
5
6
7
8
<ul class="slide_nav">
    <li><a href="" data-img="http://lorempixel.com/200/200/sports/1/">Slide 1</a></li>
    <li><a href="" data-img="http://lorempixel.com/200/200/sports/2/">Slide 2</a></li>
    <li><a href="" data-img="http://lorempixel.com/200/200/sports/3/">Slide 3</a></li>
</ul>
<div class="slide_output">
    <img src="" alt="" />
</div>
Javascript
1
2
3
4
5
6
7
var slideLink = $('.slide_nav a'),
    outputImg = $('.slide_output img');
slideLink.on('click', changeSlide).eq(0).click();
function changeSlide(e){
    e.preventDefault();
    outputImg.attr('src', $(this).data('img'));
}
Вариант второй. Связываем изображения и ссылки по индексу.
Кликните здесь для просмотра всего текста
HTML5
1
2
3
4
5
6
7
8
9
10
<ul class="slide_nav">
    <li><a href="">Slide 1</a></li>
    <li><a href="">Slide 2</a></li>
    <li><a href="">Slide 3</a></li>
</ul>
<div class="slide_output">
    <img src="http://lorempixel.com/200/200/sports/1/" alt="" />
    <img src="http://lorempixel.com/200/200/sports/2/" alt="" />
    <img src="http://lorempixel.com/200/200/sports/3/" alt="" />
</div>
Javascript
1
2
3
4
5
6
7
8
var slideLink = $('.slide_nav a'),
    outputImg = $('.slide_output img');
outputImg.eq(0).addClass('active');
slideLink.on('click', function(e){
    e.preventDefault();
    outputImg.removeClass('active');
    outputImg.eq($(this).index('.slide_nav a')).addClass('active');
});
0
Octaus
0 / 0 / 0
Регистрация: 03.05.2015
Сообщений: 4
03.05.2015, 12:07  [ТС] 5
Цитата Сообщение от Lazy_Den Посмотреть сообщение
P.S. Вот вам пара примеров, как можно сделать без сторонних плагинов:
Вариант первый. Пути к изображениям привязываем атрибутом data-* к каждой ссылке меню.
Кликните здесь для просмотра всего текста
HTML5
1
2
3
4
5
6
7
8
<ul class="slide_nav">
    <li><a href="" data-img="http://lorempixel.com/200/200/sports/1/">Slide 1</a></li>
    <li><a href="" data-img="http://lorempixel.com/200/200/sports/2/">Slide 2</a></li>
    <li><a href="" data-img="http://lorempixel.com/200/200/sports/3/">Slide 3</a></li>
</ul>
<div class="slide_output">
    <img src="" alt="" />
</div>
Javascript
1
2
3
4
5
6
7
var slideLink = $('.slide_nav a'),
    outputImg = $('.slide_output img');
slideLink.on('click', changeSlide).eq(0).click();
function changeSlide(e){
    e.preventDefault();
    outputImg.attr('src', $(this).data('img'));
}
Вариант второй. Связываем изображения и ссылки по индексу.
Кликните здесь для просмотра всего текста
HTML5
1
2
3
4
5
6
7
8
9
10
<ul class="slide_nav">
    <li><a href="">Slide 1</a></li>
    <li><a href="">Slide 2</a></li>
    <li><a href="">Slide 3</a></li>
</ul>
<div class="slide_output">
    <img src="http://lorempixel.com/200/200/sports/1/" alt="" />
    <img src="http://lorempixel.com/200/200/sports/2/" alt="" />
    <img src="http://lorempixel.com/200/200/sports/3/" alt="" />
</div>
Javascript
1
2
3
4
5
6
7
8
var slideLink = $('.slide_nav a'),
    outputImg = $('.slide_output img');
outputImg.eq(0).addClass('active');
slideLink.on('click', function(e){
    e.preventDefault();
    outputImg.removeClass('active');
    outputImg.eq($(this).index('.slide_nav a')).addClass('active');
});
Спасибо за ответ. А можно ли в этот слайдер http://www.jssor.com/demos/tab-slider.html вставить что-то вроде меню вместо превьюшек слева?
0
Lazy_Den
3035 / 2678 / 1353
Регистрация: 15.01.2014
Сообщений: 5,907
03.05.2015, 12:13 6
Цитата Сообщение от Octaus Посмотреть сообщение
что-то вроде меню вместо превьюшек слева
Вы разве не видете, что там как раз меню, а не превью. Третий пример - это уже практически готовое решение для вашей задачи. Внешний вид этого меню дорабатывается стилями.
0
Octaus
0 / 0 / 0
Регистрация: 03.05.2015
Сообщений: 4
03.05.2015, 12:17  [ТС] 7
Цитата Сообщение от Lazy_Den Посмотреть сообщение
Вы разве не видете, что там как раз меню, а не превью. Третий пример - это уже практически готовое решение для вашей задачи. Внешний вид этого меню дорабатывается стилями.
Понял, спасибо большое.
0
03.05.2015, 12:17
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
03.05.2015, 12:17

Консультация по меню на jQuery
Здравствуйте, уважаемые Форумчане! В поиске сейчас разобраться сложно, по этому не нашел подходящую...

Навигационное меню Jquery
Добрый день, уважаемые форумчане! Третий день не могу подключить навигационное меню, как тут...

Выпадающее меню на JQuery
Ребята, чувствую себя идиотом, но уже перестал что-либо понимать. Есть такой простенький...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
7
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Рейтинг@Mail.ru