Javascript: изображение на клик, затем слайд большое изображение

0

Мне очень нравится этот образец ползунка ЗДЕСЬ! , Но я хочу назначить следующую/предыдущую команду onclick для отображения изображений на правой стороне следующим образом:

Изображение 174551 Вместо нажатия этих DOTS. Я хочу назначить onclick EVENT на изображениях (RED BOXES).

Как я могу настроить его.

Заранее спасибо!

  • 0
    Пожалуйста, предоставьте код, над которым вы работали. Пример www.codepen.io был бы потрясающим.
  • 0
    @derek_duncan ЗДЕСЬ сэр
Показать ещё 1 комментарий
Теги:

2 ответа

2
Лучший ответ

Я просто изменил переменную $navDots чтобы указать на изображения в строке 90 js.

var navDots = $('.nav-images');
this.$navDots = navDots.children( 'img' );

Затем используйте этот HTML:

<div class="nav-images">
      <img src="http://lorempixel.com/400/200/city" alt="img01" width="100px"/>
      <img src="http://lorempixel.com/400/200/business" alt="img02" width="100px"/>
      <img src="http://lorempixel.com/400/200/technics" alt="img03" width="100px"/>
      <img src="http://lorempixel.com/400/200/people" alt="img04" width="100px"/>
      <img src="http://lorempixel.com/400/200/nature" alt="img05" width="100px"/>
      <img src="http://lorempixel.com/400/200/sports" width="100px"/>
</div>

Надеюсь, поможет! Также см. Пример codepen !. http://codepen.io/anon/pen/corjw

Поделиться
  • 0
    Да, это работает!! Спасибо, сэр! ты спас мой день! последний вопрос.
  • 0
    и еще одна вещь, сэр .. как я могу удалить эти СЛЕДУЮЩИЕ / ПРЕДЫДУЩИЕ кнопки, сэр ?? Я удалил CSS, он работает, но когда я добираюсь до последнего изображения, затем возвращаюсь, он показывает СЛЕДУЮЩУЮ, но ЛЕВУЮ сторону
Показать ещё 1 комментарий
1

отказ

Пожалуйста, сделайте ссылку на неминифицированный источник плагина, чтобы вы могли напрямую изменить этот файл. В настоящее время плагин обрабатывает все элементы внутри области #cbp-fwslider. Возможно, не рекомендуется взломать снаружи, что и есть это решение...

Решение

Похоже, вы можете имитировать это, сокрыв точки (это то, что плагин использует по умолчанию), и используя ваши два элемента для запуска событий щелчка на точках. cbp-fwcurrent активная точка указывается cbp-fwcurrent, поэтому что-то вроде $('#cbp-fwslider.cbp-fwdots.cbp-fwcurrent') будет выбирать текущую точку. Используйте вызовы jQuery next() и prev(), проверьте, существует ли соответствующая точка, а затем выполните $el.trigger('click').

Структура кода (непроверенная)

$('#fwdButton').click(function() {
  var $dot = $('#cbp-fwslider .cbp-fwdots .cbp-fwcurrent'),
      $nextDot = $dot.next();
  if ($nextDot) {
    $nextDot.trigger('click');
  }
});

'

Поделиться
  • 0
    спасибо за ваш информативный ответ, сэр, и мой плохой за ссылку на не минимизированный источник ..
  • 0
    Пожалуйста! Никакого пота - людям легче отвечать на вопросы, когда все материалы легко доступны ...

Ещё вопросы

Сообщество Overcoder
Наверх
Меню