Информация к новости
  • Просмотров: 633
  • Автор: sulicompany
  • Дата: 20-12-2012, 20:04
 (голосов: 0)
20-12-2012, 20:04

24 Простая галерея на jQuery

Категория: Программирование » jQuery


1. CSS

#gallery {
	width: 528px;
	overflow: hidden;
	margin: 0 auto;
	background: #f8f8f8;
	border: 1px solid #c7c7c7;
	border-radius: 5px;
}
#gallery a {
	display: block;
	float: left;
	color: #fff;
	width: 150px;
	height: 150px;
	margin: 8px;
	padding: 4px;
	border: 1px solid #c7c7c7;
	border-radius: 3px;
}

2. Подключение jQuery

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>

3. Подключение jQuery Touch Gallery Min

<script type="text/javascript" src="" /></script>

4. HTML

<!--1.jpg - оригинальное изображение, 1-th.jpg - уменьшеное изображение -->
<div id="gallery">
	<a href="1.jpg"><img src="1-th.jpg" /></a>
	<a href="2.jpg"><img src="2-th.jpg" /></a>
	<a href="3.jpg"><img src="3-th.jpg" /></a>
	<a href="4.jpg"><img src="4-th.jpg" /></a>
	<a href="5.jpg"><img src="5-th.jpg" /></a>
	<a href="6.jpg"><img src="6-th.jpg" /></a>
	<a href="7.jpg"><img src="7-th.jpg" /></a>
	<a href="8.jpg"><img src="8-th.jpg" /></a>
	<a href="9.jpg"><img src="9-th.jpg" /></a>
</div>
<!--1.jpg - оригинальное изображение, 1-th.jpg - уменьшеное изображение -->

5. javascript

<script type="text/javascript">
	$('#gallery a').touchGallery();
</script>

javascript нужно добавить перед закрывающим тегом </body>