Tener una sección dinamica

sirdaiz · #1 (**permalink**) 29/04/2011, 04:31

Hola me gustaria saber como puedo hacer esto:

http://www.especializadosenaviarios.com/

La parte de oferats me gustaria saber como se hace, cada 5 segundos se cambia de oferta

Gracias

Pablo Ayala · #2 (**permalink**) 29/04/2011, 07:35

Definitivamente es JQUERY.
Si ves el codigo fuente de la página hay fragmentos de codigo como:

Código Javascript:

Ver original<style type="text/css">
#special_slider ul, #special_slider li{
    margin:0;
    padding:0;
    list-style:none;
    }
#special_slider, #special_slider li{
    width:174px;
    height:80px;
    overflow:hidden;
    }
</style>
 
<script type="text/javascript">
$(document).ready(function(){
    var special_slider = new olcSlider({
            speed: 800,
            duration: 5000});
     special_slider.init("special_slider");
});
</script>

Intentalo... si no puedes, buscaremos la manera....

Saludos,

sirdaiz · #3 (**permalink**) 29/04/2011, 11:17

Hola, muchas gracias por tu respuesta mira he probado esto, me he bajado el .js de jquery y los tengo al mismo nivel del html

Código HTML:

Ver original<html>
<head>
 
<script src="jquery-1.5.2.min.js" type="text/javascript"></script> 
<style type="text/css">
#special_slider ul, 
#special_slider li{    margin:0;    padding:0;    list-style:none;    }
#special_slider, 
#special_slider li{    width:174px;    height:80px;    overflow:hidden;    }
</style> 
 
<script type="text/javascript">
$(document).ready(function(){    var special_slider = new olcSlider({            speed: 800,            duration: 5000});
special_slider.init("special_slider");});
</script>
</head>
 
<body>
 
<div id="special_block_right" class="block products_block exclusive blockspecials"><h4>
<a href="http://www.especializadosenaviarios.com/prices-drop.php" title="Ofertas">Ofertas</a></h4>
 
<div class="block_content">
    <div  id="special_slider">
        <ul style="">
    <li style="padding: 3px 0px 3px 0px;">
                 <a style="float:left" href="http://www.especializadosenaviarios.com/product.php?id_product=38"><img src="http://www.especializadosenaviarios.com/img/p/38-92-medium.jpg" alt="Incubadora Mg-70/100" title="Incubadora Mg-70/100" /></a>
                    
<div><h5><a href="http://www.especializadosenaviarios.com/product.php?id_product=38" title="Incubadora Mg-70/100">Incubadora Mg-70/100</a></h5>
                    
                                                    <div class="price-discount">720,00 €</div>                    
                            <div class="reduction">(-60.00&euro;)
                        </div>   
                     
                    <span class="price">660,00 €</span>
        </div>
                </li>
                <li style="padding: 3px 0px 3px 0px;">
                    <a style="float:left" href="http://www.especializadosenaviarios.com/product.php?id_product=41"><img src="http://www.especializadosenaviarios.com/img/p/41-108-medium.jpg" alt="Incubadora VRT- Manual" title="Incubadora VRT- Manual" /></a>
                    <div><h5><a href="http://www.especializadosenaviarios.com/product.php?id_product=41" title="Incubadora VRT- Manual">Incubadora VRT- Manual</a></h5>
                    
                                                    <div class="price-discount">155,00 €</div>                    
                            <div class="reduction">(-25.00&euro;)
                        </div>   
                     
                    <span class="price">130,00 €</span></div>
                </li>
                <li style="padding: 3px 0px 3px 0px;">
                    <a style="float:left" href="http://www.especializadosenaviarios.com/product.php?id_product=15"><img src="http://www.especializadosenaviarios.com/img/p/15-71-medium.jpg" alt="Bateria deJaulas de cria de 1 metro 4 alturas" title="Bateria de Jaulas de cria de 1 metro 4 alturas" /></a>
                    <div><h5><a href="http://www.especializadosenaviarios.com/product.php?id_product=15" title="Bateria de Jaulas de cria de 1 metro 4 alturas">Bateria de Jaulas de cria de 1...</a></h5>
                    
                                                    <div class="price-discount">295,00 €</div>                    
                            <div class="reduction">(-15.00&euro;)
                        </div> 
                        
                     
                    <span class="price">280,00 €</span></div></li>
 
    </ul>
        </div>
        <p>
            <a href="http://www.especializadosenaviarios.com/prices-drop.php" title="Ver Todas" class="button">Ver Todas</a>
        </p>
    </div>
</div>
 
 
 
</body>
 
</html>

Me aparece la primera imagen pero no cambia

Saludos

sirdaiz · #4 (**permalink**) 30/04/2011, 06:36

alguna ayuda ¿?

Pablo Ayala · #5 (**permalink**) 02/05/2011, 07:17

Hola, perdon... fines de semana no toco la compu y hasta ahora vi tu msj.

Ya analice tu codigo y te falto esto:
<script src="http://www.especializadosenaviarios.com/modules/blockspecialscarousel/js/olcSlider.js" type="text/javascript"></script>

Tambien, si puedes cambiar esta linea:
<script src="jquery-1.5.2.min.js" type="text/javascript"></script>

Por esta otra:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>

Saludos!!!!

sirdaiz · #6 (**permalink**) 04/05/2011, 02:07

Hola Pablo al final probe eso pero no funciono, estoy probando algo mas sencillo, tengo textos metidos dentro de un div, pero quiero que cada cierto tiempo cambie pero sigue sin funcionarme el codigo es este

Código HTML:

Ver original<html>
 
      <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
 
  
      <style type="text/css">
 
      #special_slider ul,
  
      #special_slider li{    margin:0;    padding:0;    list-style:none;    }
  
      #special_slider,
 
      #special_slider li{    width:174px;    height:80px;    overflow:hidden;    }
 
      </style>
 
      <script type="text/javascript">
 
      $(document).ready(function(){    var special_slider = new olcSlider({            speed: 800,            duration: 5000});
 
      special_slider.init("special_slider");});
 
      </script>
 
      </head>
 
      <body>
 
      <div id="special_block_right" class="block products_block exclusive blockspecials"><h4>
 
        <div class="block_content">
 
            <div  id="special_slider">
 
              <ul style="">
                    <li style="padding: 3px 0px 3px 0px;">
                        <div class="price-discount">Hola el precio final es:200,00 €</div>  
                    </li>
  
                    <li style="padding: 3px 0px 3px 0px;">
                        <div class="price-discount">Hola el precio inicial es:155,00 €</div>                    
                    </li>
 
                    <li style="padding: 3px 0px 3px 0px;">
                        <div class="price-discount">Hola el medio es:185,00 €</div>      
                    </li>
                </ul>
 
             </div>
 
          </div>
 
      </div>
 
      </body>
 
      </html>

Muchas gracias por tu ayuda

Saludos

Pablo Ayala · #7 (**permalink**) 04/05/2011, 15:20

Seguro?......
Yo copie tu codigo y lo probe... y si me funciono sin ningun problema....

sirdaiz · #8 (**permalink**) 04/05/2011, 15:25

Hola Ayala nuevamnt mil gracias, el ultimo codigo q escribi tengo 3 divs con textos diferentes dentro de otro div, si quiero que cambie cada cierto tiempo el contenido del div principal, no se si m entiendes lo q te quiero decir, probe el codigo ultimo y no m funciona ni en ie ni firefox

Saludos

InKarC · #9 (**permalink**) 04/05/2011, 20:03

Ese es uno de los efectos mas faciles de hacer en jQuery

Código Javascript:

Ver originalsetInterval(function(){
var moverse =  $("#contenedor").height() * -1;
$("#contenedor .cuadro:first").animate( {"margin-top":moverse},     300,    function(){$(this).css("margin-top",0).appendTo($(this).parent())}) }
,3000)

Si lo quieren ver funcionando con el CSS/HTML y con comentarios aqui esta:
http://jsfiddle.net/jhBPW/

InKarC · #10 (**permalink**) 04/05/2011, 20:14

Si quieren que sea una bola en vez de un cuadrado simplemente cambien el css

Código CSS:

Ver original#contenedor {
    width:300px;
    height:300px;
    overflow:hidden;
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
    border-radius: 150px;
}
 
.cuadro {
    width:100&#37;;
    padding-top:40%;
    height:60%;
    font-family:Arial, Helvetica, sans-serif;
    overflow:hidden;
    text-align:center;
}

jajaja Una rumba! http://jsfiddle.net/jhBPW/1/

Sirve en todos los ultimos exploradores! (si quieren que sirva en viejos solo es usar css3pie)

mmm... experimentando me doy cuenta que esto puede llegar a ser bastante interesante http://jsfiddle.net/3usGC/!

Pablo Ayala · #11 (**permalink**) 05/05/2011, 06:25

Hola probe el código de InKarC y tb me funciono... puedes tomar cualquier alternativa... si tomas la mia....

Asi debe quedar tu pagina:

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
      <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
<script src="http://www.especializadosenaviarios.com/modules/blockspecialscarousel/js/olcSlider.js" type="text/javascript"></script> 
  
      <style type="text/css">
 
      #special_slider ul,
  
      #special_slider li{    margin:0;    padding:0;    list-style:none;    }
  
      #special_slider,
 
      #special_slider li{    width:174px;    height:80px;    overflow:hidden;    }
 
      </style>
 
      <script type="text/javascript">
 
      $(document).ready(function(){    var special_slider = new olcSlider({            speed: 800,            duration: 5000});
 
      special_slider.init("special_slider");});
 
      </script>
 
      </head>
 
      <body>
 
      <div id="special_block_right" class="block products_block exclusive blockspecials"><h4>
 
        <div class="block_content">
 
            <div  id="special_slider">
 
              <ul style="">
                    <li style="padding: 3px 0px 3px 0px;">
                        <div class="price-discount">Hola el precio final es:200,00 €</div>  
                    </li>
  
                    <li style="padding: 3px 0px 3px 0px;">
                        <div class="price-discount">Hola el precio inicial es:155,00 €</div>                    
                    </li>
 
                    <li style="padding: 3px 0px 3px 0px;">
                        <div class="price-discount">Hola el medio es:185,00 €</div>      
                    </li>
                </ul>
 
             </div>
 
          </div>
 
      </div>
 
      </body>
 
      </html>

PD falta darle orden... jejeje

sirdaiz · #12 (**permalink**) 05/05/2011, 08:01

wow fabuloso, he probado los 2 y van perfectos, excepto falta un matiz pablo,es decir,te falto en el codigo agregar:

<li style="padding: 3px 0px 3px 0px;">

y sobra :

<script src="http://www.especializadosenaviarios.com/modul/blockspecialscarouseljsolcSlider.js" type="text/javascript"></script>

pero muchas gracias por tu ayuda pablo con eso ya puedo poner lo que quiera en el div,sin ti no se q hubiera hecho xD

Con la respuesta de Inkarc, otra respuesta muy buena y sobre todo los link muy buenos e intersantes para hacer cosas con jquery, muchas gracias

PD:ahi unos karma por vuestra ayuda

Saludos

InKarC · #13 (**permalink**) 05/05/2011, 13:01

Si va a usar la version que posteo Pablo Ayala lo mejor es que descargue el archivo javascript y lo monte en su servidor, ya que ese lo pueden quitar/cambiar en cualquier

Me refiero a este:

Código HTML:

Ver original<script src="http://www.especializadosenaviarios.com/modules/blockspecialscarousel/js/olcSlider.js" type="text/javascript"></script>

El objecto "olcSlider" esta en ese archivo por lo que si no lo linkea no funciona.

Pablo Ayala · #14 (**permalink**) 05/05/2011, 22:28

Cita:

Iniciado por InKarC

Si va a usar la version que posteo Pablo Ayala lo mejor es que descargue el archivo javascript y lo monte en su servidor, ya que ese lo pueden quitar/cambiar en cualquier

Me refiero a este:

Código HTML:

Ver original<script src="http://www.especializadosenaviarios.com/modules/blockspecialscarousel/js/olcSlider.js" type="text/javascript"></script>

El objecto "olcSlider" esta en ese archivo por lo que si no lo linkea no funciona.

Tienes toda la razon....

Saludos!

sirdaiz · #15 (**permalink**) 06/05/2011, 01:18

Bueno os voy a poner el codigo de Pablo e Inkarc, de los cuales los 2 me funcionan perfectamente por si a alguien le sirve

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
      <html xmlns="http://www.w3.org/1999/xhtml">
 
            <head>
  
              <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
 
     <script src="http://www.especializadosenaviarios.com/modules/blockspecialscarousel/js/olcSlider.js" type="text/javascript"></script>
 
            <style type="text/css">
 
            #special_slider ul,
 
            #special_slider li{    margin:0;    padding:0;    list-style:none;    }
 
            #special_slider,
 
            #special_slider li{    width:174px;    height:80px;    overflow:hidden;    }
 
            </style>
 
            <script type="text/javascript">
 
            $(document).ready(function(){    var special_slider = new olcSlider({            speed: 800,            duration: 5000});
  
            special_slider.init("special_slider");});
 
            </script>
 
            </head>
 
            <body>
  
            <div id="special_block_right" class="block products_block exclusive blockspecials"><h4>
 
              <div class="block_content">
 
                  <div  id="special_slider">
 
                    <ul style="">
 
                          <li style="padding: 3px 0px 3px 0px;">
 
                              <div class="price-discount">Hola el precio final es:200,00 €</div>  
 
                          </li>
  
                          <li style="padding: 3px 0px 3px 0px;">
  
                              <div class="price-discount">Hola el precio inicial es:155,00 €</div>                    
 
                          </li>
 
                            <li style="padding: 3px 0px 3px 0px;">
                              <div class="price-discount">Hola el medio es:185,00 €</div>      
 
                          </li>
 
                      </ul>
 
                   </div>
 
                </div>
 
            </div>
  
            </body>
  
            </html>

y el de Inkarc

Código HTML:

Ver original<html>
 
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
 
 <style type="text/css">
#contenedor, .cuadro {
    margin:0;
    padding:0;
}
 
#contenedor {
    width:300px;
    height:300px;
    overflow:hidden;
}
 
.cuadro {
    width:100%;
    height:100%;
    font-family:Arial, Helvetica, sans-serif;
    overflow:hidden;        
}
 </style>
 
            <script type="text/javascript">
            
            setInterval(function(){
var moverse =  $("#contenedor").height() * -1 //Cuanto se tiene que mover cada cuadro, o sea el alto del #contenedor multiplicado por -1 (para que se mueva para arriba)
 
    $("#contenedor .cuadro:first").animate(
        {"margin-top":moverse},  //que el margin-top sea el valor dado
        300, // lo que dura la animacion en milisegundos = 0.3 segundos
        function(){ // La funcion que se ejecuta cuando termina de animarse
        $(this).css("margin-top",0).appendTo($(this).parent())})  // Que el margin-top vuelva a 0 al terminarse y que lo coloca al final del padre
 
},3000)
 
</script>
 
</head>
<body>
<div id="contenedor">
<div class="cuadro" style="background-color:#F90">Contenido total</div>
<div class="cuadro" style="background-color:#CCC">Contenido total</div>
<div class="cuadro" style="background-color:#9C0">Contenido total</div>
<div class="cuadro" style="background-color:#FC0">Contenido total</div>
</div>
</body>
</html>

La única cuestión es que si algun dai la pagina donde aparece este codigo deja de funcionar,supongo que tampoco funcionaria la sección dinamica

Código HTML:

Ver original<script src="http://www.especializadosenaviarios.com/modules/blockspecialscarousel/js/olcSlider.js" type="text/javascript"></script>

Podria obtener la libreria olcSlider de otra forma?,es decir susituir ese codigo,especialmente www.especializadosenaviarios ya q no es pagina mia ni nada

Gracias nuevamente por vuestra ayuda

Saludos

babri · #16 (**permalink**) 06/05/2011, 02:32

yo estoy buscando algo parecido pero en vez de que vaya cambiando cada X segundos que lo haga cuando recargues la página, vaya que salga aleatoriamente pero lo que quiero que cambie es donde pone club coolaboro:

http://beta.coolaboro.com/pruebas/

que cambie la foto de la persona y su comentario.
a ver si me podéis echar un cablecito.
muchas gracias! :D

PD: ya la he hecho con jacascript ^^