28.01.2013 04:58:57
Простая галерея на jQuery
Не плохая галерея, можно использовать для фотографий пользователей чата.
Демонстрация: http://rx.at.ua/chat-file/demo_code/gallery_nax.htm
Код:
Не забудьте, что 1.jpg - оригинальное изображение, 1-th.jpg - уменьшенное изображение.
Демонстрация: http://rx.at.ua/chat-file/demo_code/gallery_nax.htm
Код:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-8">
<style>
body{
background-color: #000; /* Цвет фона веб-страницы */
}
h1 {
background-color: RGB(249, 201, 16); /* Цвет фона под заголовком */
}
p {
background-color: maroon; /* Цвет фона под текстом параграфа */
color: red; /* Цвет текста */
}
#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;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript" src="http://rx.at.ua/chat-file/js_code/jquery.touch-gallery-1.0.0.min.js"></script>
</head>
<body>
<div id="content">
<div class="content_top">
</div>
<div class="content_center">
<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>
<script type="text/javascript">
$('#gallery a').touchGallery();
</script>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-8">
<style>
body{
background-color: #000; /* Цвет фона веб-страницы */
}
h1 {
background-color: RGB(249, 201, 16); /* Цвет фона под заголовком */
}
p {
background-color: maroon; /* Цвет фона под текстом параграфа */
color: red; /* Цвет текста */
}
#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;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript" src="http://rx.at.ua/chat-file/js_code/jquery.touch-gallery-1.0.0.min.js"></script>
</head>
<body>
<div id="content">
<div class="content_top">
</div>
<div class="content_center">
<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>
<script type="text/javascript">
$('#gallery a').touchGallery();
</script>
</body>
</html>
Не забудьте, что 1.jpg - оригинальное изображение, 1-th.jpg - уменьшенное изображение.