productos.php 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
  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. <script src="js/jquery-1.10.2.js"></script>
  10. <script>
  11. $(document).ready(function() {
  12. curpag=0;
  13. var cat = 'Limpieza';
  14. $(".cambiarcat").click(function() {
  15. cat = $(this).attr('val');
  16. getData();
  17. });
  18. function getData() {
  19. $.get('listaprod.php', { cat : cat }).done(function(data) {
  20. $("#paginas_wrapper").html(data);
  21. curpag=0;
  22. $("#flechaatras").hide();
  23. $("#flechafwd").click(function() {
  24. if ( ! $(".pagina[num='"+(curpag+1)+"']").length )
  25. return;
  26. $(".pagina").hide();
  27. curpag++;
  28. if ( ! $(".pagina[num='"+(curpag+1)+"']").length )
  29. $("#flechafwd").hide();
  30. $("#flechaatras").show();
  31. $(".pagina[num='"+curpag+"']").show();
  32. $("#paginas_list li").css("opacity",0.5);
  33. $("#paginas_list li[num='"+curpag+"']").css("opacity",1);
  34. });
  35. $("#flechaatras").click(function() {
  36. $(".pagina[num='"+curpag+"']").hide();
  37. curpag--;
  38. if ( curpag < 0 )
  39. curpag=0;
  40. if(curpag==0)
  41. $("#flechaatras").hide();
  42. $("#flechafwd").show();
  43. $(".pagina[num='"+curpag+"']").show();
  44. $("#paginas_list li").css("opacity",0.5);
  45. $("#paginas_list li[num='"+curpag+"']").css("opacity",1);
  46. });
  47. $(".texto p").click(function(){
  48. expand = $(this).attr('prodid');
  49. getDesc();
  50. });
  51. });
  52. } //getData
  53. var expand="";
  54. getData();
  55. function getDesc(){
  56. $.get('vermas.php', {id : expand}).done(function(data){
  57. $("#descripcion_completa").html(data);
  58. $("#overlay-contact").css("display","block");
  59. $("#descripcion_completa").css("display", "block");
  60. $("#overlay-contact").css("height",$(document).height()+"px");
  61. $('#overlay-contact').click(function(){
  62. $('#descripcion_completa, #overlay-contact').hide();
  63. });
  64. $('#exit').click(function(){
  65. $('#descripcion_completa, #overlay-contact').hide();
  66. });
  67. });
  68. }
  69. $("#paginas_list li").click(function() {
  70. $("#paginas_list li").css("opacity",0.5);
  71. $(this).css("opacity",1);
  72. $(".pagina").hide();
  73. $(".pagina[num='"+$(this).attr('num')+"']").show();
  74. curpag=$(this).attr('num');
  75. alert(curpag);
  76. });
  77. });
  78. </script>
  79. </head>
  80. <body>
  81. <div id="top_wrapper">
  82. <div id="navbar" font-family="champagne">
  83. <ul id="navlist">
  84. <li><a href="Especificos.html#nosotros">nosotros</a></li>
  85. <li><a href="#productos">productos</a></li>
  86. <li><a href="#actividades">actividades</a></li>
  87. <li><a href="#top_wrapper"><img src="Images/icons/logo.png" style="width: 51px; height: 50px;" /></a></li>
  88. <li><a href="#cursos">cursos</a></li>
  89. <li><a href="#distribuidoras">donde comprar</a></li>
  90. <li>contacto</li>
  91. </ul>
  92. </div>
  93. </div>
  94. <div id="productos_descripcion" class="seccion">
  95. <h1><span>NUESTRO COMPROMISO</span></h1>
  96. <p>
  97. ESPECIFICOS Buenos Aires se compromete a garantizar productos de confianza,
  98. ultra-eficaces, tecnología de avanzada y control de calidad permanente bajo
  99. normas internacionales de bioseguridad. Texturas aterciopeladas, principios
  100. activos de gran pureza, vehículos especializados que conforman productos
  101. vanguardistas con delicadas fragancias.
  102. <br/><br/>
  103. <img src="Images/icons/compromiso.png">
  104. </p>
  105. </div>
  106. <div id="productos_wrapper">
  107. <br />
  108. <div id="productosbar">
  109. <ul id ="categorias">
  110. <li class="cambiarcat" val="limpieza"><h3>LIMPIEZA</h3></li>
  111. <li class="cambiarcat" val="mascaras"><h3>MÁSCARAS</h3></li>
  112. <li class="cambiarcat" val="acido hialuronico"><h3>ÁCIDO<br />HIALURÓNICO</h3></li>
  113. <li class="cambiarcat" val="peeling"><h3>PEELING</h3></li>
  114. <li class="cambiarcat" val="corporales"><h3>CORPORALES</h3></li>
  115. <li class="cambiarcat" val="hombres"><h3>HOMBRES</h3></li>
  116. <li class="cambiarcat" val="proteccion intensiva"><h3>PROTECCIÓN<br />INTENSIVA</h3></li>
  117. <li class="cambiarcat" val="monodosis"><h3>MONODOSIS</h3></li>
  118. <li class="cambiarcat" val="activos concentrados"><h3>ACTIVOS<br />CONCENTRADOS</h3></li>
  119. <li val="tratamientos"><h3 style="height:140px; color: white;">TRATAMIENTOS<br />ESPECIFICOS</h3></li>
  120. </ul>
  121. </div>
  122. <div id ="paginas_wrapper">
  123. </div>
  124. <div id="overlay-contact">
  125. </div>
  126. <div id="descripcion_completa" >
  127. </div>
  128. </div>
  129. </body>
  130. </html>
  131. <!--
  132. </div>
  133. <div class="nav" style="float: right; height: 30px; margin-top: 170px;">
  134. <label for="img-3" class="next">&#x203a;</label>
  135. </div>
  136. </div>
  137. <ul id="paginas_list">
  138. </ul>-->