productos.php 4.6 KB

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