Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.05.2013, 13:52
Аватар для zlodeeev
Кандидат Javascript-наук
Отправить личное сообщение для zlodeeev Посмотреть профиль Найти все сообщения от zlodeeev
 
Регистрация: 11.07.2012
Сообщений: 113

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 - класс который нужно включить по клику
__________________
Saying that Java is nice because it works on all OS's is like saying that anal sex is nice because it works on all genders...
Ответить с цитированием
  #2 (permalink)  
Старый 07.05.2013, 19:34
Аватар для tropiko
Аспирант
Отправить личное сообщение для tropiko Посмотреть профиль Найти все сообщения от tropiko
 
Регистрация: 23.06.2011
Сообщений: 44

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

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


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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
jquery-gp-gallery.js - разное отображение подгружаемых изображений frutality jQuery 1 09.09.2012 18:15
Прокрутка изображений gen552 Элементы интерфейса 6 01.04.2011 13:11
замена изображений в jquery при наведении zlokiz jQuery 0 05.08.2010 22:17
Скролл мини изображений I-Trap Элементы интерфейса 1 25.11.2009 22:03
Замена изображений в меню Олег Васильев Элементы интерфейса 6 10.07.2009 11:38