productos.php 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <!doctype html>
  3. <head>
  4. <title>ESPECIFICOS Buenos Aires</title>
  5. <link type="text/css" rel="Stylesheet" href="css/productos.css" />
  6. <link type="text/css" rel="Stylesheet" href="css/especificos.css" />
  7. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  8. <script src="js/jquery-1.10.2.js"></script>
  9. <script>
  10. $(document).ready(function() {
  11. curpag=0;
  12. var cat = 'Limpieza';
  13. $(".cambiarcat").click(function() {
  14. cat = $(this).attr('val');
  15. $(".cambiarcat.selected").removeClass('selected');
  16. $(this).addClass('selected');
  17. getData();
  18. });
  19. function getData() {
  20. $.get('listaprod.php', { cat : cat }).done(function(data) {
  21. $("#paginas_wrapper").html(data);
  22. curpag=0;
  23. $("#flechaatras").hide();
  24. $("#flechafwd").click(function() {
  25. if ( ! $(".pagina[num='"+(curpag+1)+"']").length )
  26. return;
  27. $(".pagina").hide();
  28. curpag++;
  29. if ( ! $(".pagina[num='"+(curpag+1)+"']").length )
  30. $("#flechafwd").hide();
  31. $("#flechaatras").show();
  32. $(".pagina[num='"+curpag+"']").show();
  33. $("#paginas_list li").css("opacity",0.5);
  34. $("#paginas_list li[num='"+curpag+"']").css("opacity",1);
  35. });
  36. $("#flechaatras").click(function() {
  37. $(".pagina[num='"+curpag+"']").hide();
  38. curpag--;
  39. if ( curpag < 0 )
  40. curpag=0;
  41. if(curpag==0)
  42. $("#flechaatras").hide();
  43. $("#flechafwd").show();
  44. $(".pagina[num='"+curpag+"']").show();
  45. $("#paginas_list li").css("opacity",0.5);
  46. $("#paginas_list li[num='"+curpag+"']").css("opacity",1);
  47. });
  48. $(".texto p").click(function(){
  49. expand = $(this).attr('prodid');
  50. getDesc();
  51. });
  52. });
  53. } //getData
  54. var expand="";
  55. getData();
  56. function getDesc(){
  57. $.get('vermas.php', {id : expand}).done(function(data){
  58. $("#descripcion_completa").html(data);
  59. $("#overlay-contact").css("display","block");
  60. $("#descripcion_completa").css("display", "block");
  61. $("#overlay-contact").css("height",$(document).height()+"px");
  62. $('#overlay-contact').click(function(){
  63. $('#descripcion_completa, #overlay-contact').hide();
  64. });
  65. $('#exit').click(function(){
  66. $('#descripcion_completa, #overlay-contact').hide();
  67. });
  68. });
  69. }
  70. $("#paginas_list li").click(function() {
  71. $("#paginas_list li").css("opacity",0.5);
  72. $(this).css("opacity",1);
  73. $(".pagina").hide();
  74. $(".pagina[num='"+$(this).attr('num')+"']").show();
  75. curpag=$(this).attr('num');
  76. alert(curpag);
  77. });
  78. });
  79. </script>
  80. </head>
  81. <body>
  82. <div id="top_wrapper">
  83. <div id="navbar" font-family="champagne">
  84. <ul id="navlist">
  85. <li><a href="index.php#nosotros">nosotros</a></li>
  86. <li><a href="index.php#actividades">actividades</a></li>
  87. <li><a href="index.php#top_wrapper"><img src="Images/icons/logo.png" style="width: 51px; height: 50px;" /></a></li>
  88. <li><a href="index.php#cursos">cursos</a></li>
  89. <li><a href="index.php#distribuidoras">donde comprar</a></li>
  90. </ul>
  91. </div>
  92. </div>
  93. <div id="productos_descripcion" class="seccion">
  94. <h1><span>NUESTRO COMPROMISO</span></h1>
  95. <p>
  96. ESPECIFICOS Buenos Aires se compromete a garantizar productos de confianza,
  97. ultra-eficaces, tecnología de avanzada y control de calidad permanente bajo
  98. normas internacionales de bioseguridad. Texturas aterciopeladas, principios
  99. activos de gran pureza, vehículos especializados que conforman productos
  100. vanguardistas con delicadas fragancias.
  101. <br/><br/>
  102. <img src="Images/icons/compromiso.png">
  103. </p>
  104. </div>
  105. <div id="productos_wrapper">
  106. <br />
  107. <div id="productosbar">
  108. <ul id ="categorias">
  109. <li class="cambiarcat selected" val="limpieza"><h3>HIGIENE</h3></li>
  110. <li class="cambiarcat" val="mascaras"><h3>MÁSCARAS</h3></li>
  111. <li class="cambiarcat" val="acido hialuronico"><h3>ÁCIDO<br />HIALURÓNICO</h3></li>
  112. <li class="cambiarcat" val="peeling"><h3>PEELING</h3></li>
  113. <li class="cambiarcat" val="corporales"><h3>CORPORALES</h3></li>
  114. <li class="cambiarcat" val="hombres"><h3>HOMBRES</h3></li>
  115. <li class="cambiarcat" val="proteccion intensiva"><h3>PROTECCIÓN<br />INTENSIVA</h3></li>
  116. <li class="cambiarcat" val="monodosis"><h3>MONODOSIS</h3></li>
  117. <li class="cambiarcat" val="activos concentrados"><h3>ACTIVOS<br />CONCENTRADOS</h3></li>
  118. <li><a href='folleto2013.pdf'><h3 style="height:60px; color: white;">DESCARGAR<br />CATALOGO</h3></a></li>
  119. <li class="cambiarcat" 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>