Увеличенный полноэкранный API слайдера - PullRequest
Новая
       19

Увеличенный полноэкранный API слайдера

0 голосов
/ 22 марта 2012

http://buildinternet.com/project/supersized/

У меня проблемы с выяснением JavaScript, который идет вместе с этим плагином jquery.То, что я пытаюсь сделать, это объединить это с большим количеством плагинов js, а именно с плагином гармошки, который у меня есть.Конечная цель состоит в том, чтобы два экземпляра Supersized работали на одном экране с одинаковыми элементами управления и разными изображениями.Я знаю, трудно представить, но вот пример.

Тело - это полноэкранный фон с суперразмером, изображение - image1.jpg, черно-белое.Затем у меня есть маленький div, шириной 960 пикселей в центре тела, с аккордеоном из всех изображений, которые я хочу, но в цвете.Поэтому, когда вы меняете аккордеон, вы меняете фон.Поэтому, когда у вас есть изображение image1.jpg в поле аккордеона, фон тела будет image1.jpg черно-белым.

Так что у меня возникли проблемы, потому что js для суперразмера, кажется, определяет только предварительный и следующий эскиз, а не ВСЕ миниатюры.Так что в теории мне нужно было бы выяснить, как отключить все миниатюры, а затем выяснить, как изменить изображения этих миниатюр, чтобы они по-прежнему управляли переходами слайдов, но на самом деле не миниатюрами для фона.Таким образом, я могу вместо этого установить слайды аккордеона на эти миниатюры, но пусть они управляют как аккордеоном, так и фоном.

Я уверен, что сейчас я очень запутываюсь, так что если у вас есть какие-либовопросы, задавайте.Благодаря.

1 Ответ

1 голос
/ 18 апреля 2012

Посмотрим, правильно ли я понял ваш вопрос,

Если вы ищете способ изменить фоновое изображение (используемое суперразмером) при нажатии на элемент div или что-то еще, то есть много способов сделать это.

Следующий код может вам помочь, он заменит название активного слайд-изображения на '-bw' в конце.

например: щелчок по элементу div с названием класса «click-me» изменит фоновое изображение с «image.jpg» на «image-bw.jpg» 

function changeBg() {
  var $supersizedImg = $("#supersized .activeslide img"),
      imgSrc = $supersizedImg.attr('src');
  imgSrcArray = imgSrc.split('/'); //split the image source by '/'
  fullFileName = imgSrcArray[imgSrcArray.length - 1]; //get the file name
  fileName = fullFileName.split('.'); //split that file name by '.'
  fileName[0] = fileName[0] + '-bw'; //grab the first array element(which is filename without extension and add a '-bw' in the end)
  fileName = fileName.join('.'); //join the new file name with its extension with a '.'
  imgSrcArray[imgSrcArray.length - 1] = fileName; //add the new file name the the last element of imgSrcArray. 
  imgSrcArray = imgSrcArray.join('/'); //join the whole url by '/'
  $supersizedImg.attr('src', imgSrcArray); //add the new url to the img src of supersized
}

$('.click-me').on('click', changeBg); //call changeBg function when a div is clicked

надеюсь, это поможет.

...