productos.php 5.1 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=0;
  13. var cat = 'Limpieza';
  14. $(".cambiarcat").click(function() {
  15. cat = $(this).attr('val');
  16. $(".cambiarcat.selected").removeClass('selected');
  17. $(this).addClass('selected');
  18. getData();
  19. });
  20. function getData() {
  21. $.get('listaprod.php', { cat : cat }).done(function(data) {
  22. $("#paginas_wrapper").html(data);
  23. curpag=0;
  24. $("#flechaatras").hide();
  25. $("#flechafwd").click(function() {
  26. if ( ! $(".pagina[num='"+(curpag+1)+"']").length )
  27. return;
  28. $(".pagina").hide();
  29. curpag++;
  30. if ( ! $(".pagina[num='"+(curpag+1)+"']").length )
  31. $("#flechafwd").hide();
  32. $("#flechaatras").show();
  33. $(".pagina[num='"+curpag+"']").show();
  34. $("#paginas_list li").css("opacity",0.5);
  35. $("#paginas_list li[num='"+curpag+"']").css("opacity",1);
  36. });
  37. $("#flechaatras").click(function() {
  38. $(".pagina[num='"+curpag+"']").hide();
  39. curpag--;
  40. if ( curpag < 0 )
  41. curpag=0;
  42. if(curpag==0)
  43. $("#flechaatras").hide();
  44. $("#flechafwd").show();
  45. $(".pagina[num='"+curpag+"']").show();
  46. $("#paginas_list li").css("opacity",0.5);
  47. $("#paginas_list li[num='"+curpag+"']").css("opacity",1);
  48. });
  49. $(".texto p").click(function(){
  50. expand = $(this).attr('prodid');
  51. getDesc();
  52. });
  53. });
  54. } //getData
  55. var expand="";
  56. getData();
  57. function getDesc(){
  58. $.get('vermas.php', {id : expand}).done(function(data){
  59. $("#descripcion_completa").html(data);
  60. $("#overlay-contact").css("display","block");
  61. $("#descripcion_completa").css("display", "block");
  62. $("#overlay-contact").css("height",$(document).height()+"px");
  63. $('#overlay-contact').click(function(){
  64. $('#descripcion_completa, #overlay-contact').hide();
  65. });
  66. $('#exit').click(function(){
  67. $('#descripcion_completa, #overlay-contact').hide();
  68. });
  69. });
  70. }
  71. $("#paginas_list li").click(function() {
  72. $("#paginas_list li").css("opacity",0.5);
  73. $(this).css("opacity",1);
  74. $(".pagina").hide();
  75. $(".pagina[num='"+$(this).attr('num')+"']").show();
  76. curpag=$(this).attr('num');
  77. alert(curpag);
  78. });
  79. });
  80. </script>
  81. </head>
  82. <body>
  83. <div id="top_wrapper">
  84. <div id="navbar" font-family="champagne">
  85. <ul id="navlist">
  86. <li><a href="index.php#nosotros">nosotros</a></li>
  87. <li><a href="index.php#actividades">actividades</a></li>
  88. <li><a href="index.php#top_wrapper"><img src="Images/icons/logo.png" style="width: 51px; height: 50px;" /></a></li>
  89. <li><a href="index.php#cursos">cursos</a></li>
  90. <li><a href="index.php#distribuidoras">donde comprar</a></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 selected" 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><a href='folleto2013.pdf'><h3 style="height:60px; color: white;">DESCARGAR<br />CATALOGO</h3></a></li>
  120. <li class="cambiarcat" val="tratamientos"><h3 style="height:140px; color: white;">TRATAMIENTOS<br />ESPECIFICOS</h3></li>
  121. </ul>
  122. </div>
  123. <div id ="paginas_wrapper">
  124. </div>
  125. <div id="overlay-contact">
  126. </div>
  127. <div id="descripcion_completa" >
  128. </div>
  129. </div>
  130. </body>
  131. </html>