Productos.php 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html>
  3. <head>
  4. <title>ESPECIFICOS Buenos Aires</title>
  5. <link type="text/css" rel="Stylesheet" href="Productos.css" />
  6. <link type="text/css" rel="Stylesheet" href="Especificos.css" />
  7. <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  8. <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  9. <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  10. <script>
  11. $(document).ready(function() {
  12. curpag=1;
  13. $.getJSON('listaprod.php', { cat : 'Limpieza' }).done(function(data) {
  14. var count = data['count'];
  15. var prod = data['productos'];
  16. if (count > 3) {
  17. alert("error > 3");
  18. }
  19. var productos = [] ;
  20. $.each(prod, function(i, item) {
  21. var proddiv = $('<div/>', {
  22. class: 'producto',
  23. html: item['html']
  24. });
  25. var img = "Images/producto.jpg";
  26. productos.push(proddiv);
  27. });
  28. var lista_prod = $('<div/>', {
  29. id: 'lista_productos',
  30. html: productos
  31. });
  32. var pagina = $('<div/>', {
  33. id: 0, //incrementar
  34. class: 'pagina',
  35. html: lista_prod
  36. });
  37. $("#paginas_wrapper").append(pagina);
  38. });
  39. $(".next").click(function() {
  40. if ( ! $(".pagina[num='"+(curpag+1)+"']").length )
  41. return;
  42. $(".pagina").hide();
  43. curpag++;
  44. $(".pagina[num='"+curpag+"']").show();
  45. $("#paginas_list li").css("opacity",0.5);
  46. $("#paginas_list li[num='"+curpag+"']").css("opacity",1);
  47. });
  48. $(".prev").click(function() {
  49. $(".pagina[num='"+curpag+"']").hide();
  50. curpag--;
  51. if ( curpag < 1 )
  52. curpag=1;
  53. $(".pagina[num='"+curpag+"']").show();
  54. $("#paginas_list li").css("opacity",0.5);
  55. $("#paginas_list li[num='"+curpag+"']").css("opacity",1);
  56. });
  57. $("#paginas_list li").click(function() {
  58. $("#paginas_list li").css("opacity",0.5);
  59. $(this).css("opacity",1);
  60. $(".pagina").hide();
  61. $(".pagina[num='"+$(this).attr('num')+"']").show();
  62. curpag=$(this).attr('num');
  63. alert(curpag);
  64. });
  65. });
  66. </script>
  67. </head>
  68. <body>
  69. <div id="top_wrapper">
  70. <div id="navbar" font-family="champagne">
  71. <ul id="navlist">
  72. <li><a href="Especificos.html#nosotros">nosotros</a></li>
  73. <li><a href="#productos">productos</a></li>
  74. <li><a href="#actividades">actividades</a></li>
  75. <li><a href="#top_wrapper"><img src="Images/LOGO.png" /></a></li>
  76. <li><a href="#cursos">cursos</a></li>
  77. <li><a href="#distribuidoras">donde comprar</a></li>
  78. <li>contacto</li>
  79. </ul>
  80. </div>
  81. </div>
  82. <div id="productos_wrapper">
  83. <br />
  84. <div id="productosbar">
  85. <ul id ="categorias">
  86. <a href=""><li><h3>LIMPIEZA</h3></li></a>
  87. <li><h3>MÁSCARAS</h3></li>
  88. <li><h3>ÁCIDO<br />HIALURÓNICO</h3></li>
  89. <li><h3>PEELING</h3></li>
  90. <li><h3>CORPORALES</h3></li>
  91. <li><h3>HOMBRES</h3></li>
  92. <li><h3>PROTECCIÓN<br />INTENSIVA</h3></li>
  93. <li><h3>MONODOSIS</h3></li>
  94. <li><h3>ACTIVOS<br />CONCENTRADOS</h3></li>
  95. </ul>
  96. </div>
  97. <div id ="paginas_wrapper">
  98. <!-- <div num="" class="pagina" >
  99. <div class="nav" style="display: inline; float: left; height: 30px; margin-top: 170px;">
  100. <label for="img-1" class="prev">&#x2039;</label>
  101. </div>
  102. <div id="lista_productos">
  103. <div id="producto" style="float:left;">
  104. <div style="float : left; width:15%;">
  105. <img src="Images/producto.jpg">
  106. </div>
  107. <div style="float : left; width: 74%;">
  108. <h4> <php echo $nombre; ?> </h4>
  109. <br> <php echo $desc; ?> <br><br>
  110. <u>Ver más</u>
  111. </div>
  112. </div>
  113. </div>
  114. <div class="nav" style="float: right; height: 30px; margin-top: 170px;">
  115. <label for="img-3" class="next">&#x203a;</label>
  116. </div>
  117. </div>
  118. <ul id="paginas_list">
  119. </ul>-->
  120. </div>
  121. </div>
  122. </body>
  123. </html>