Форум

zlodeeev · #1 (**permalink**) 07.05.2013, 13:52

Есть простейший слайдер на 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 - класс который нужно включить по клику

tropiko · #2 (**permalink**) 07.05.2013, 19:34

Что-то такое получилось.

<!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>

Хтмлка и картинки из стандартного примера фоторамы

Форум

Справочник

Discord чат

Курсы javascript