Fotorama, замена изображений
Есть простейший слайдер на fotorama.js - самый верхний пример.
Есть задача, по клику на неком элементе заменить изображения слайдера, т.е. по сути переинициализировать скрипт слайдера. Но сложность в том, что этот скрипт при запуске из вот такого кода
<div class="fotorama right" data-width="525" data-height="350" data-fullscreenIcon="true">
<a href="#"><img></a>
<a href="#"><img></a>
...
<a href="#"><img></a>
</div>
делает код, с кучей вложенных дивов, и картинки в коде присутствуют только 4 штуки, а остальные сохранены где-то либо в самом js(ссылки просто докидывает, например), либо где-то в глубине этих дивов. Так вот как, с помощью js, при клике на что-либо переиницилизировать этот слайдер.
$('.fotorama').fotorama(); //Так он запускается на инициализацию
//=======
$('.fotorama').html('slider_init.html').fotorama(); // Так я думаю сделать, но факт догрузки html файлов с сервера не прельщает.
//=======
$('.fotorama.needed').fotorama(); // Либо загружать сразу все изображения и по необходимости запускать скрипт инита слайдера. .needed - класс который нужно включить по клику
|
Что-то такое получилось.
<!DOCTYPE html>
<html>
<head>
<title>Fotorama example</title>
<script src="jquery.js"></script>
<link rel="stylesheet" href="fotorama.css">
<script src="../fotorama.js"></script>
</head>
<body>
<div id="fotorama-id-1" data-width="499" data-height="333"></div>
<div id="fotorama-id-2" data-width="499" data-height="333"></div>
<p><button id="foto-other-id">Show second slider</button></p>
<script>
var imglist_1 = [
{img: 'i/01.jpg', thumb: 'i/thumbs/01.jpg', caption: 'One'},
{img: 'i/02.jpg', thumb: 'i/thumbs/02.jpg', caption: 'Two'},
{img: 'i/03.jpg', thumb: 'i/thumbs/03.jpg', caption: 'Three'}
],
imglist_2 = [
{img: 'i/04.jpg', thumb: 'i/thumbs/04.jpg', caption: 'One'},
{img: 'i/05.jpg', thumb: 'i/thumbs/05.jpg', caption: 'Two'},
{img: 'i/06.jpg', thumb: 'i/thumbs/06.jpg', caption: 'Three'}
],
fotorama = $('#fotorama-id-1').fotorama({
data : imglist_1
});
$('#foto-other-id').on('click', function(){
fotorama.remove();
fotorama = $('#fotorama-id-2').fotorama({
data : imglist_2
});
$(this).attr('disabled', 'disabled');
});
</script>
</body>
</html>
Хтмлка и картинки из стандартного примера фоторамы |
| Часовой пояс GMT +3, время: 07:55. |