Помогите разобраться с циклом while.

lapwing

Новичок
Помогите разобраться с циклом while.

Здравствуйте! Честно признаюсь понравилась галерея http://dev.herr-schuessler.de/jquery/popeye/demo.html. Решил прикрутить себе. Задача - вывод фоток к каждой записи. Вот код.
PHP:
<!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>
Фотки почему то выводятся один раз - с последней записью. Заголовок, сообщение, телефон, имя, т.е. все остальное предыдущих записей выводится нормально, только без фотографий. Подскажите почему?
 

Boriso

Новичок
полезная информация тут http://phpfaq.ru/debug

для начала добавьте перед циклом while вывод текста запроса, например, вот так:
echo ('<h1>SELECT heading,message,tel,name,path1big,path1small,path2big,path2small FROM information WHERE operid = "s_kv" ORDER BY informid DESC LIMIT '.$start_pos.','.$perpage.'</h1>');


а потом попробуйте запрос отдельно в phpmyadmin запустить и посмотреть, что возвращает
 

lapwing

Новичок
Я попробовал сделать так
Код:
while($row = mysql_fetch_array($result))
{
echo "это{$row['heading']}!"; echo"<br />";
echo "это{$row['path1big']}!";echo"<br />";
echo "это{$row['path1small']}!";echo"<br />";
}
Нормально выводит сначала заголовок записи а затем путь вида http://www.site.ru/images/img1.jpg и http://www.site.ru/images/img1_small.jpg и так для всех записей, т.е. по идее фотки должны выводиться а есть только к последней записи.
 

Boriso

Новичок
тогда ошибка, скорее всего, будет крыться в стиле "<ul class='ppy-imglist'>"

чтобы проверить
а) попробуйте посмотреть на сам HTML код и убедиться, что тэги img присутствуют;
б) временно уберите ссылки на стили и скрипты - картинки должны появиться
 

lapwing

Новичок
Убрал ссылку на стиль ppy-imglist, картинки появились, просто одна под другой.
Я уже сам подумал, что дело возможно в том, что картинки выводятся в ТО ЖЕ САМОЕ место, т.е. каждая последующая запись перекрывает предыдущую - такое возможно?
Если не трудно, посмотрите лист стилей - как это исправить?
Код:
.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;
}
Я уже пытался, но запутался.
 

Boriso

Новичок
Сохраните файл как html, потом поэкспериментируйте с определениями поведения классов: ".ppy-imglist", ".ppy-imglist li" и ".ppy-imglist li a img".

Удаляйте строчки и смотрите, на что будет влиять. Или подождите, может быть кто-нибудь хорошо css знает и сразу подскажет.

P.S. Описание стилей есть тут http://www.w3schools.com/css/css_reference.asp (там же и онлайн проверка поведения элементов).
 
Сверху