Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.02.2016, 10:46
Новичок на форуме
Отправить личное сообщение для Kate93 Посмотреть профиль Найти все сообщения от Kate93
 
Регистрация: 02.02.2016
Сообщений: 2

Динамическая галлерея
Здравствуйте!

Подскажите, пожалуйста, как можно сделать такую галлерею, чтобы при помощи JS пользовтель мог удалять из нее не нужные ему картинки, а потом кнопкой "Восстановить" все изображения восстанавливались. Кнопка "Восстановить" одна для всей галлереи.

Например, есть следующий код:
<section id="least">
<ul class="least-gallery">
<li>
<a class="photo" href="images/big/1.jpg">
<img class="red small" src="images/small/1.jpg" alt="" width="160" height="160" />
</a>
</li>
<li>
<a class="photo" href="images/big/2.jpg">
<img class="small" src="images/small/2.jpg" alt="" width="160" height="160" />
</a>
</li>
<li>
<a class="photo" href="images/big/3.jpg">
<img class="small" src="images/small/3.jpg" alt="" width="160" height="160" />
</a>
</li>
</ul>
</section>
<a href="#" class="but1"/>Восстановить</a>

Последний раз редактировалось Kate93, 02.02.2016 в 10:50.
Ответить с цитированием
  #2 (permalink)  
Старый 02.02.2016, 12:39
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

Например
<section id="least">
	<ul class="least-gallery" id="ulGallery">
	<li>
	<a class="photo" href="images/big/1.jpg">
	<img class="red small" src="images/small/1.jpg" alt="" width="160" height="160" />
	</a>
    <button>Delete</button>
	</li>
	<li>
	<a class="photo" href="images/big/2.jpg">
	<img class="small" src="images/small/2.jpg" alt="" width="160" height="160" />
	</a>
    <button>Delete</button>
	</li>
	<li>
	<a class="photo" href="images/big/3.jpg">
	<img class="small" src="images/small/3.jpg" alt="" width="160" height="160" />
	</a>
    <button>Delete</button>
	</li>
	</ul>
	</section>
	<a href="#" class="but1" id="restoreLink">Восстановить</a>



	<script>
	
	var gallery = document.getElementById('ulGallery');
	li = gallery.getElementsByTagName('li');
	for ( var i = 0; i < li.length; i++)
	{
		li[i].addEventListener('click',function(e){
			var e = e || window.event;
			target = e.target || e.srcElement;
			target.parentNode.style.display = 'none';					
		},
		true
		)
	}
	
	var restore = document.getElementById('restoreLink');
	restore.addEventListener('click',function(e){
		var e = e || window.event;
		for ( var i = 0; i < li.length ; i++)
		{
			li[i].style.display = 'block';	
		}
		e.preventDefault();
	},false)
	

	</script>
Ответить с цитированием
  #3 (permalink)  
Старый 02.02.2016, 16:10
Новичок на форуме
Отправить личное сообщение для Kate93 Посмотреть профиль Найти все сообщения от Kate93
 
Регистрация: 02.02.2016
Сообщений: 2

Спасибо большое)
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
динамическая диаграмма mortido Общие вопросы Javascript 0 03.06.2015 12:37
Динамическая карта изображений andreybugakov Элементы интерфейса 4 29.01.2012 22:57
Динамическая выборка jQuery boro-da Элементы интерфейса 5 05.01.2012 03:14
Динамическая отрисовка графики на js manny Элементы интерфейса 5 01.12.2011 04:20
Динамическая ссылка nematod Общие вопросы Javascript 2 13.09.2011 14:08