productos.php 4.3 KB

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