Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Динамическая галлерея (https://javascript.ru/forum/events/61044-dinamicheskaya-gallereya.html)

Kate93 02.02.2016 10:46

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

Подскажите, пожалуйста, как можно сделать такую галлерею, чтобы при помощи 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>

destus 02.02.2016 12:39

Например
<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>

Kate93 02.02.2016 16:10

Спасибо большое)


Часовой пояс GMT +3, время: 13:08.