[SOLUCIONADO] Slide no funciona :S

Masane · #1 (**permalink**) 21/06/2013, 02:53

Buenas a todos:

Tengo una web con un slide que funcionaba perfectamente, pero me puse a meterle un formulario en el sidebar que apareciera con un efecto jquery y que manda un presupuesto por email.

Desde que empecé con el formulario ya no se ejecuta el slide, pero no sé exactamente desde cuándo ha dejado de funcionar.

HEADER:

Código HTML:

<!--[if lt IE 7]>
<script type="text/javascript" src="js/jquery/jquery.js"></script>
<script type="text/javascript" src="js/jquery/jquery.dropdown.js"></script>
<![endif]-->

<script type="text/javascript" src="lightbox/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="lightbox/js/lightbox.js"></script>

<!--GALERÍA DINAMICA LIGHTBOX-->
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript">     
    var pre = jQuery.noConflict();
    pre(document).ready(function(){        
      pre("#boton_presupuestos").click(function(){
        pre("#boton_presupuestos").fadeOut(350, function(){         
          pre("#foto3").fadeOut(350, function(){
             pre("#foto2").fadeOut(350, function(){
               pre("#foto1").fadeOut(350, function(){  
                 document.getElementById("presupuesto").className = "presupuesto";            
                 pre("#presupuesto").slideDown("slow");
               });
              });
            });
          });
        });        
      });
  </script>
  
  <script type="text/javascript">     
    function validarPresupuesto() {
      // Revisar los datos obligatorios
     var mensaje = "";
     
     if (document.getElementById("nombre").value.length == 0)
     {
       mensaje = "Debe indicar su nombre";    
       document.getElementById("nombre").style.backgroundColor = "#FFFF99";
     }
     
     if (document.getElementById("email").value.length == 0)
     {
       document.getElementById("email").style.backgroundColor = "#FFFF99";
       if (mensaje == "")
       {
         mensaje = "Debe indicar su e-mail";
       }
       else
       {
         mensaje += " y su e-mail";
       }    
     }
     
     if (mensaje != "")
     {
       alert(mensaje);
     }
     else
     {
       document.getElementById("presupuesto").submit();
     } 
    }           
  </script>

<?php
  
  if ($current == "inicio")
  {       
?>

	<script>    
    $(function() {
		
			$("#slide > div:gt(0)").hide();
	
			setInterval(function() { 
			  $('#slide > div:first')
			    .fadeOut(1000)
			    .next()
			    .fadeIn(1000)
			    .end()
			    .appendTo('#slide');
			},  3000);
			
		});
	</script>
<?php
  }
?>   

<?php
  if ($current == "colores")
  {   
?>

<?php 
include("inc/config.php");    
$i = 1;
$j = 1;
$sql = "SELECT `ID`, `Referencia`, `ColorHex` FROM `Color` WHERE `Paleta` = 'Interior'";
$result = mysql_query($sql,$link);
$numColors = mysql_num_rows($result);
$numRelleno = 10 - $numColors%10;
print".wp$i {\n";
print "\theight: 48px;\n";
print "}\n";
print "\n";
print "\t.wp$i div {\n";
print "\t\twidth: 100%;\n";
print "\t\tmargin-bottom: 10px; }\n";

while (list($id, $referencia, $color) = mysql_fetch_row($result)) {

	if ($j == 11) {
		$i++;
		$j = 1;
		print".wp$i {\n";
		print "\theight: 48px; }\n";
		print "\n";
		print "\t.wp$i div {\n";
		print "\t\twidth: 100%;\n";
		print "\t\tmargin-bottom: 10px; }\n";
	}

	print ".g$i$j {\n";
	print "\twidth: 48px;\n";
	print "\tbackground-color: #$color;\n";
	print "\tline-height: 0px;\n";
	print "\tfont-size: 0;\n";
	print "\tfont-weight: bold;\n";
	print "\tfont-family: \"HelveticaNeue-Light\", \"Helvetica Neue Light\", \"Helvetica Neue\", Helvetica, Arial, sans-serif; }\n";
	print "\n";
	print "\t.g$i$j:hover {\n";
	print "\t\twidth: 46px;\n";
	print "\t\tbackground-color: #FFF;\n";
	print "\t\tline-width: 48px;\n";
	print "\t\tborder-style: dashed;\n";
	print "\t\tborder-width: thin;\n";
	print "\t\tborder-color: #999;\n";
	print "\t\ttext-align: center;\n";
	print "\t\tcolor: #999;\n";
	print "\t\tfont-size: 13px; }\n";
	$j++;
}
for ($counter = 1;$counter <= $numRelleno;$counter++) {
	print ".g$i$j { width: 48px; }\n";
	$j++;
}

?>
<?php } ?>
</style>
</head>

SLIDE:

Código HTML:

<div id="slide">
        <div><img src="images/slide/photos/0.jpg" width="551" height="235" alt="Azulejos artesanos" /></div>
        <div><img src="images/slide/photos/1.jpg" width="551" height="235" alt="Azulejos artesanos" /></div>
        <div><img src="images/slide/photos/2.jpg" width="551" height="235" alt="Azulejos artesanos" /></div>
        <div><img src="images/slide/photos/3.jpg" width="551" height="235" alt="Azulejos artesanos" /></div>
        <div><img src="images/slide/photos/4.jpg" width="551" height="235" alt="Azulejos artesanos" /></div>
</div>

Lo que ocurre es que el slide no hace las transiciones, sólo se ve la última imagen (que está sobre el resto de las imágenes del slide).

Gracias a todos por vuestro tiempo.

Masane · #2 (**permalink**) 25/06/2013, 01:12

¿Alguien ha visto algo que yo me haya saltado? :S ...

Tengo otra web con el mismo slide y funciona muy bien, pero en esta, al mezclarlo con el otro script no funciona ¬¬ ...

Necesito ayuda ;_;

Masane · #3 (**permalink**) 25/06/2013, 01:24

Hoy me he levantado de la cama inspirada y cambiando una cosa de sitio lo he conseguido arreglar XD ....

Al final era cosa del $(document).ready(function()) etc...

He metido ambas funciones dentro de este ready y listo, ya funciona ;) .

Para los que se encuentren con el mismo problema alguna vez, dejo aquí lo que he hecho:

Código Javascript:

Ver original<script type="text/javascript">     
    $(document).ready(function(){
      // Función que muestra el formulario de presupuestos        
      $("#boton_presupuestos").click(function(){
        $("#boton_presupuestos").fadeOut(350, function(){         
          $("#foto3").fadeOut(350, function(){
             $("#foto2").fadeOut(350, function(){
               $("#foto1").fadeOut(350, function(){  
                 document.getElementById("presupuesto").className = "presupuesto";            
                 $("#presupuesto").slideDown("slow");
               });
              });
            });
          });
        });
        
      // Función que carga el slide        
      $(function() {                
            $("#slide > div:gt(0)").hide();     
            setInterval(function() { 
              $('#slide > div:first')
                .fadeOut(1000)
                .next()
                .fadeIn(1000)
                .end()
                .appendTo('#slide');
            },  3000);                                  
        });
              
    });
  </script>

Gracias a todos de todas formas por echar un ojillo ;) .