Ver Mensaje Individual
  #1 (permalink)  
Antiguo 19/08/2013, 16:33
xoceunder
 
Fecha de Ingreso: junio-2012
Ubicación: En el Mundo
Mensajes: 766
Antigüedad: 12 años, 9 meses
Puntos: 10
duda en mostrar datos en php

ok es que tengo un script de galeria con albunes aqui esta una foto del ejemplo



y este es el codigo html

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  3. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  4. <title> Stu Nicholls | CSSplay | Cross Browser Multi Page Photograph Gallery</title>
  5. <meta name="Author" content="Stu Nicholls" />
  6.  
  7.  
  8. <style type="text/css">
  9.  
  10.  
  11.  
  12. a {color:#000;}
  13. a:hover {text-decoration:none;}
  14. a:visited {color:#000;}
  15.  
  16. /* slides styling */
  17.  
  18. .photo {width:635px; text-align:left; position:relative; margin:0 auto;}
  19.  
  20. .photo ul.topic {padding:0; margin:0; list-style:none; width:635px; height:auto; position:relative; z-index:10;}
  21.  
  22. .photo ul.topic li {display:block; width:125px; height:31px; float:left;}
  23. .photo ul.topic li a.set {display:block; font-size:11px; width:124px; height:30px; text-align:center; line-height:30px; color:#000; text-decoration:none; border:1px solid #fff; border-width:1px 1px 0 0; background:#ccc; font-family:verdana, arial, sans-serif;}
  24.  
  25. .photo ul.topic li a ul,
  26. .photo ul.topic li ul
  27. {display:none;}
  28.  
  29. .photo ul.topic li.active a
  30. {color:#000; background:#bbb;}
  31.  
  32. .photo ul.topic li a:hover,
  33. .photo ul.topic li:hover a
  34. {color:#fff; background:#aaa;}
  35.  
  36. .photo ul.topic li.active ul
  37. {display:block; position:absolute; left:0; top:31px; list-style:none; padding:0; margin:0; height:375px; background:#ddd; width:464px; padding:40px 60px; border:20px solid #bbb; z-index:1;}
  38.  
  39. .photo ul.topic li a:hover ul,
  40. .photo ul.topic li:hover ul
  41. {display:block; position:absolute; left:0; top:31px; list-style:none; padding:0; margin:0; height:375px; background:#ddd; width:464px; padding:40px 60px; border:20px solid #aaa; z-index:100;}
  42.  
  43. .photo ul.topic li ul li
  44. {display:inline; width:112px; height:87px; float:left; border:1px solid #fff; margin:1px;}
  45.  
  46. .photo ul.topic li ul li a
  47. {display:block; width:110px; height:85px; cursor:default; float:left; text-decoration:none; background:#444; border:1px solid #888;}
  48.  
  49. .photo ul.topic li ul li a img
  50. {display:block; width:100px; height:75px; border:5px solid #eee;}
  51.  
  52. .photo ul.topic li a:hover ul li a:hover,
  53. .photo ul.topic li:hover ul li a:hover
  54. {white-space:normal; position:relative;}
  55.  
  56. .photo ul.topic li a:hover ul li a:hover img,
  57. .photo ul.topic li:hover ul li a:hover img
  58. {position:absolute; left:-50px; top:-32px; width:200px; height:150px; border-color:#fff;}
  59.  
  60.  
  61. </head>
  62.  
  63.  
  64. <div class="photo">
  65. <ul class="topic">
  66.     <li><a class="set" href="#Portraits">Album 1<!--[if gte IE 7]><!--></a><!--<![endif]-->
  67.     <!--[if lte IE 6]><table><tr><td><![endif]-->
  68.         <ul>
  69.             <li><a href="lbox/portrait1.jpg"><img src="http://www.cssplay.co.uk/menu/lbox/portrait1a.jpg" alt="" title="" /></a></li>
  70.             <li><a href="lbox/portrait2.jpg"><img src="lbox/portrait2a.jpg" alt="" title="" /></a></li>
  71.         </ul>
  72.     <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  73.     </li>
  74.  
  75.     <li class="active"><a class="set" href="#Landscapes">Album 2<!--[if gte IE 7]><!--></a><!--<![endif]-->
  76.     <!--[if lte IE 6]><table><tr><td><![endif]-->
  77.         <ul>
  78.             <li><a href="lbox/landscape1.jpg"><img src="http://www.cssplay.co.uk/menu/lbox/landscape1a.jpg" alt="" title="" /></a></li>
  79.             <li><a href="lbox/landscape2.jpg"><img src="lbox/landscape2a.jpg" alt="" title="" /></a></li>
  80.             <li><a href="lbox/landscape3.jpg"><img src="lbox/landscape3a.jpg" alt="" title="" /></a></li>
  81.         </ul>
  82.     <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  83.     </li>
  84.     <li><a class="set" href="#Flowers">Album 3<!--[if gte IE 7]><!--></a><!--<![endif]-->
  85.     <!--[if lte IE 6]><table><tr><td><![endif]-->
  86.         <ul>
  87.             <li><a href="#flower1"><img src="http://www.cssplay.co.uk/menu/lbox/flower1.jpg" alt="" title="" /></a></li>
  88.             <li><a href="#flower2"><img src="lbox/flower2.jpg" alt="" title="" /></a></li>
  89.             <li><a href="#flower3"><img src="lbox/flower3.jpg" alt="" title="" /></a></li>
  90.             <li><a href="#flower4"><img src="lbox/flower4.jpg" alt="" title="" /></a></li>
  91.  
  92.         </ul>
  93.     <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  94.  
  95.     </li>
  96.     <li><a class="set" href="#Trees">Album 4<!--[if gte IE 7]><!--></a><!--<![endif]-->
  97.     <!--[if lte IE 6]><table><tr><td><![endif]-->
  98.         <ul>
  99.             <li><a href="#tree1"><img src="http://www.cssplay.co.uk/menu/lbox/tree1.jpg" alt="" title="" /></a></li>
  100.             <li><a href="#tree1"><img src="lbox/tree2.jpg" alt="" title="" /></a></li>
  101.             <li><a href="#tree1"><img src="lbox/tree3.jpg" alt="" title="" /></a></li>
  102.             <li><a href="#tree1"><img src="lbox/tree4.jpg" alt="" title="" /></a></li>
  103.  
  104.         </ul>
  105.     <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  106.     </li>
  107.     <li><a class="set" href="#Birds">Album 5<!--[if gte IE 7]><!--></a><!--<![endif]-->
  108.     <!--[if lte IE 6]><table><tr><td><![endif]-->
  109.  
  110.         <ul>
  111.             <li><a href="#bird1"><img src="http://www.cssplay.co.uk/menu/lbox/bird1.jpg" alt="" title="" /></a></li>
  112.             <li><a href="#bird2"><img src="lbox/bird2.jpg" alt="" title="" /></a></li>
  113.             <li><a href="#bird3"><img src="lbox/bird3.jpg" alt="" title="" /></a></li>
  114.             <li><a href="#bird4"><img src="lbox/bird4.jpg" alt="" title="" /></a></li>
  115.         </ul>
  116.  
  117.     <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  118.     </li>
  119. </ul>
  120. <br class="clear" />
  121. </div>
  122.  
  123.  
  124. </body>
  125. </html>

y el codigo php

Código PHP:
Ver original
  1. <?php
  2. include("includes/dbconnect.php");  // MySQL Connection Settings
  3.  
  4. $cn = mysql_connect($hostname,$username,$password);
  5. mysql_select_db($database, $cn);
  6.  
  7.     $query = mysql_query("SELECT *
  8.                           FROM `simplenews_articles`
  9.                           LIMIT 16", $cn);
  10.     while($row = mysql_fetch_array($query))
  11.     {
  12.         echo  '<ul><li>
  13.                  <p>'.$row['imagen'].'</p>
  14.                </li></ul>';
  15.     }
  16.  
  17. ?>

pero quiero separar los album para asi meter las fotos dentro de cada album