API слайдера Fotorama

[slo_nik]

Доброе утро.
 
Пытаюсь разобраться с API Fotorama.
Задача следующая.
Есть исходные изображения, которые подгружаются в слайдер при первой загрузке страницы. Надо при изменении выпадающего списка менять сами изображения в слайдере.
В документации написано, что это можно сделать при помощи метода load(), но при этом надо соблюсти закономерности, которые применялись при изначальной загрузки изображений data().

 

Попробовал сделать так:

  $(function(){/* загрузка изображений при первом заходе на страницу*/      $('.fotorama').fotorama({         data: [           {img: 'images/7.jpg', thumb: 'images/7.jpg'},           {img: 'images/8.jpg', thumb: 'images/8.jpg'},           {img: 'images/9.jpg', thumb: 'images/9.jpg'},           {img: 'images/10.jpg', thumb: 'images/10.jpg'},         ]      })/* замена предыдущих изображений, #field - это выпадающий список */      $('#field').on('change',function(){        var fotoDiv = $('.fotorama').fotorama()        fotoDiv.load([            {img: 'images/1.jpg', thumb: 'images/1.jpg'},            {img: 'images/2.jpg', thumb: 'images/2.jpg'},            {img: 'images/3.jpg', thumb: 'images/3.jpg'},            {img: 'images/4.jpg', thumb: 'images/4.jpg'},        ])      })  })

Но так ничего не работает, изображения не меняются, ошибок консоль никаких не показывает.

 

В чём моя ошибка? Или я не так понял, что написано в документации?

Edited November 10, 2015 by slo_nik

[hypnocolor]

Да, не так получаете объект АПИ. Вот вам рабочий пример: http://jsfiddle.net/hypnocolor/4ukav0Lj/. И превью для фотографий Фоторама сама генерит, поэтому можно их не уточнять вообще при указании загружаемых фоток. Только если вам не нужны свои какие-то особенные превью, конечно.

[slo_nik]

Благодарю, всё заработало.

 

Получается, что изначально была ошибка в этой строке? Не в том месте?

 

 

var fotoDiv = $('.fotorama').fotorama()

Edited November 10, 2015 by slo_nik

[hypnocolor]

Благодарю, всё заработало.

Получается, что изначально была ошибка в этой строке? Не в том месте?

var fotoDiv = $('.fotorama').fotorama()

 

Нет, этой строки вообще не должно было быть. Вы тут второй раз пытаетесь инициализировать фотораму, а нужно было сначала инициализировать её один раз с указанием загружаемых данных и прочих опций, потом из уже инициализированной фоторамы получить объект АПИ через .data(), и вот с ним уже манипуляции производить. http://fotorama.io/customize/api/— в самом начале статьи пример кода, с помощью которого можно получить доступ к АПИ.

[slo_nik]

 

Благодарю, всё заработало.

Получается, что изначально была ошибка в этой строке? Не в том месте?

var fotoDiv = $('.fotorama').fotorama()

 

Нет, этой строки вообще не должно было быть. Вы тут второй раз пытаетесь инициализировать фотораму, а нужно было сначала инициализировать её один раз, потом из уже инициализированной фоторамы получить объект АПИ через .data, и вот с ним уже манипуляции производить. http://fotorama.io/customize/api/— в самом начале статьи пример кода, с помощью которого можно получить доступ к АПИ.

 

 

Тогда мне не понятна разница между var fotorama = fotoramaDiv.data('fotorama') - var $fotorama = fotoramaDiv.data('fotorama') и  var fotoramaDiv = $('.bill').fotorama() -  var $fotoramaDiv = $('.bill').fotorama()

 

Что именно даёт "$"  перед fotoranaDiv? Работает с ним и без него...

Edited November 10, 2015 by slo_nik

[hypnocolor]

Тогда мне не понятна разница между var fotorama = fotoramaDiv.data('fotorama') - var $fotorama = fotoramaDiv.data('fotorama') и  var fotoramaDiv = $('.bill').fotorama() -  var $fotoramaDiv = $('.bill').fotorama()

 

Что именно даёт "$"  перед fotoranaDiv? Работает с ним и без него...

 

Ну в данном случае это для наглядности. $ перед именем переменной символизирует, что в ней хранится объект jQuery. А в другой переменной, которая без доллара и с которой, в итоге, и нужно работать — объект АПИ, полученный из объекта jQuery

[slo_nik]

 

Тогда мне не понятна разница между var fotorama = fotoramaDiv.data('fotorama') - var $fotorama = fotoramaDiv.data('fotorama') и  var fotoramaDiv = $('.bill').fotorama() -  var $fotoramaDiv = $('.bill').fotorama()

 

Что именно даёт "$"  перед fotoranaDiv? Работает с ним и без него...

 

Ну в данном случае это для наглядности. $ перед именем переменной символизирует, что в ней хранится объект jQuery. А в другой переменной, которая без доллара и с которой, в итоге, и нужно работать — объект АПИ, полученный из объекта jQuery

 

 

Вот постоянно в этом путаюсь)))

Благодарю за ответ, буду вникать в написанное Вами.

[hypnocolor]

Не за что, вникнете. Практика решает все вопросы

[slo_nik]

Не за что, вникнете. Практика решает все вопросы

Не сомневаюсь, чем больше строк кода, тем больше понимаешь)))