Фотогалерея

lapwing · October 5, 2010

Здравствуйте! Увидел интересную галерею http://dev.herr-schuessler.de/jquery/popeye/demo.html. Пример №2.Пробую прикрутить. На сайте есть раздел вроде доски объявлений - хотелось бы чтобы к каждой записи выводился блок фотографий. Проблема в том, что фото выводятся только к последней записи. Убрал у тега ul стиль ppy-imglist - фото выводятся к каждой записи (конечно криво, но они есть). Поэтому возникла догадка, что при каждом последующем выводе записи из БД блок фотографий просто накладывается на предыдущий. Верно ли? И как это можно исправить?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title></title>

<link rel="stylesheet" type="text/css" href="http://www.harthaus.ru/main.css" media="screen"  />
<link rel="stylesheet" type="text/css" href="http://www.harthaus.ru/ppy/css/popeye/jquery.popeye.css" media="screen" />
	<link rel="stylesheet" type="text/css" href="http://www.harthaus.ru/ppy/css/popeye/jquery.popeye.style.css" media="screen" />

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
	<script type="text/javascript" src="http://www.harthaus.ru/ppy/lib/popeye/jquery.popeye-2.0.4.min.js"></script>

</head>
<body>
<div id="wrap">
<div id="content">
<?php include_once('../blocks/sidebar.php');?>
 <div id="maincontent">
 <?php
include_once("../../connection.php");

$result = mysql_query('SELECT heading,message,tel,name,path1big,path1small,path2big,path2small 
									   FROM information WHERE operid = "s_kv" ORDER BY informid DESC 
									   LIMIT '.$start_pos.','.$perpage) 
				or die('error Что то не выбирает');
while($row = mysql_fetch_array($result))
{
printf("

<div id='page-margins'>
	<div class='example'>
		<h3>".$row['heading']."</h3>
		<div class='ppy' id='ppy2'>
			<ul class='ppy-imglist'>
				<li><a href='".$row['path1big']."'><img src='".$row['path1small']."' alt='Продажа квартир' /></a></li>
				<li><a href='".$row['path2big']."'><img src='".$row['path2small']."' alt='Продажа квартир' /></a></li>

			</ul>
			<div class='ppy-outer'>
				<div class='ppy-stage'>
					<div class='ppy-counter'>
						<strong class='ppy-current'></strong> / <strong class='ppy-total'></strong> 
					</div>
				</div>
				<div class='ppy-nav'>
					<div class='nav-wrap'>
						<a class='ppy-next' title='Следующая'>Следующая</a>
						<a class='ppy-prev' title='Предыдущая'>Предыдущая</a>
						<a class='ppy-switch-enlarge' title='Увеличить'>Увеличить</a>
						<a class='ppy-switch-compact' title='Закрыть'>Закрыть</a>
					</div>
				</div>
			</div>
		</div>
		<p>".$row['message']."<br /> </p>
		<p>".$row['name']." Тел.".$row['tel']."<br /> </p>

   </div>
  </div>
<br />");
}
?>
 </div>		
<?php include_once('../blocks/p_sidebar.php');?>
</div
<br style="clear:both;" />
<?php include_once('../blocks/footer.php');?>		
</div>
<!-- [example js] begin -->
<script type="text/javascript">
	<!--//<![CDATA[

	$(document).ready(function () {
		var options2 = {
			caption:	false,
			navigation: 'permanent',
			direction:  'left'
		}
		var options3 = {
			caption:	'permanent',
			opacity:	1
		}

		$('#ppy1').popeye();
		$('#ppy2').popeye(options2);
		$('#ppy3').popeye(options3);
	});

	//]]>-->
</script>
<!-- [example js] end -->
</body>
</html>

Стили

.example{
	margin:		 0 0 2em 0;
	border-bottom:  1px solid #ddd;
}
#page-margins {
	width:		  500px;
	margin:		 0 auto;
	padding:		0 0 3em 0;
}

.ppy-imglist {

	width:		  100%;
	display:		block;
	overflow:	   hidden;

}
.ppy-imglist li {

	padding:		10px;
	border:		 1px solid #f0f0f0;
	border-radius:		  5px;
	-moz-border-radius:	 5px;
	-khtml-border-radius:   5px;
	-webkit-border-radius:  5px;
	background:	 #FFF;
	list-style:	 none;
	float:		  left;
	display:		block;
	margin:		 0 10px 10px 0;
}
.ppy-imglist li a img {

	display:		block;
	border:		 0;
} 
/* popeye example 2 */
#ppy2.ppy-active {
	width:		  224px;
	float:		  right;
	margin:		 0 0 10px 20px;
}

#ppy2 .ppy-outer {
	padding:		0 46px 0 0;

}
#ppy2 .ppy-stagewrap {
	padding:		7px;
	border-radius:		  5px 0 5px 5px;
	-moz-border-radius:	 5px 0 5px 5px;
	-webkit-border-radius:  5px 0 5px 5px;
	background:	 #cleaff;
	background:	 rgba(193,234,255,0.7);
}

#ppy2 .ppy-stage {
	width:			  160px;
	height:			 160px;
	border:			 2px solid #fff;
	border-radius:		  3px;
	-moz-border-radius:	 3px;
	-webkit-border-radius:  3px;
	background-color:	   #777;
}

#ppy2 .ppy-counter {
	background:		 #FFF;
	color:			  #333;
	padding:			0 5px;
	font-size:		  0.8em;
	position:		   absolute;
	bottom:			 0;
	right:			  0;
	opacity:			0.7; 
	border-radius:		  5px 0 0 0;
	-moz-border-radius:	 5px 0 0 0;
	-khtml-border-radius:   5px 0 0 0;
	-webkit-border-radius:  5px 0 0 0; 
}

#ppy2 .ppy-loading {
	background-image:   url(../../gfx/popeye/loading2.gif);
	background-repeat:  no-repeat;
	background-position:center;
}

#ppy2 .ppy-nav {
	border-radius:		  0 5px 5px 0;
	-moz-border-radius:	 0 5px 5px 0;
	-webkit-border-radius:  0 5px 5px 0;
	background:	 #76c6ee;
	background:	 -webkit-gradient(
		linear,
		left top,
		right bottom,
		color-stop(0, rgb(118,198,238)),
		color-stop(1, rgb(45,158,214))
	);
	background:	 -moz-linear-gradient(
		left top,
		rgb(118,198,238) 0%,
		rgb(45,158,214) 100%
	);
	border-left:	1px solid #6ab1d5;
	width:		  45px;
	position:	   absolute;
	top:			4px;
	right:		  0;
}

#ppy2 .nav-wrap {
	padding:		5px 0;
}

#ppy2 .ppy-nav a {
	display:		block;
	overflow:	   hidden;
	text-indent:	-900em;
	height:		 22px;
	padding:		5px;
	border-radius:		  0 5px 5px 0;
	-moz-border-radius:	 0 5px 5px 0;
	-webkit-border-radius:  0 5px 5px 0;
	width:		  30px;
}

#ppy2 .ppy-prev {
	background:	 url(../../gfx/popeye/prev3.png) no-repeat center;
}

#ppy2 .ppy-next {
	background:	 url(../../gfx/popeye/next3.png) no-repeat center;
}

#ppy2 .ppy-switch-enlarge {
	background:	 url(../../gfx/popeye/enlarge4.png) no-repeat center;
}

#ppy2 .ppy-switch-compact {
	background:	 url(../../gfx/popeye/compact4.png) no-repeat center;
}

#ppy2 .ppy-nav a:hover {
	background-color:   #378eba;
	cursor:		 pointer;
	opacity:		0.8;
}

Searcher · October 6, 2010

Может есть ссылка на вашу работу?

lapwing · October 6, 2010

Вот ссылка http://www.harthaus.ru/apartament/. Предыдущая запись тоже с фото и когда я убираю у ul ppy-imglist они выводятся, пробовал последовательно убирать в ppy-imglist строки, но ничего не меняется. Подскажите верный путь.

Searcher · October 6, 2010

Первое, что бросается в глаза: один и тот же идентификатор page-margins несколько раз. Как вы себе представляете обращение к конкретному объекту по id, если таких объектов много? id - уникальный идентификатор, не может быть на странице двух одинаковых id.

...собственно, как и ppy2 у вас много раз повторяется

Копаться в этом плагине особо времени нет, но боюсь он не предназначен для многократного использования на странице, возможно потребуется его подкорректировать дл этого...

lapwing · October 7, 2010

Пытался разобраться, ни хренасики не получается. А если на коммерческой основе? Сколько это будет стоить?

Sign In

Фотогалерея

Question

lapwing

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

Searcher

Link to comment

Share on other sites

lapwing

Link to comment

Share on other sites

Searcher

Link to comment

Share on other sites

lapwing

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information