Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje28-04-2011, 17:01 (UTC)    
Título del mensaje: [jQuery]Slider galeria

Hola amig@os, pasandome por el foro he visto que es muy hablado el tema de los sliders,
asi que me puse a crear uno lo mas sencillo posible para aportarselos
En esta pagina tienen el previo: http://proyectosadan.web44.net/OTROS/paginawebgratis/slideradan.html
A continuacion el code, debajo explico
Cita:

<style type="text/css">
.botones{padding:5px 7px 5px 7px;background-color:#000;cursor:pointer;color:#fff;}
.botones:hover{background-color:#ae4444;color:yellow;}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script>$(document).ready(function(){
//Script por adan-2994.es.tl
var tiempo=500;//esta variable es el tiempo que dura en aparecer la nueva imagen
var cuenta=1;//esta variable es importante no tokarla a menos que sepas
//Parte 1
/*Esta variable img e utiliza para precargar las imagenes*/
var img1=new Image();var img2=new Image();var img3=new Image();var img4 =new Image();
img1.src="http://s.ytimg.com/yt/img/pixel-vfl3z5WfW.gif";
img2.src="http://s0.2mdn.net/3161456/PID_1603377_backup.jpg";
img3.src="http://i3.ytimg.com/vi/FEFI-_Sg5G0/default.jpg";
img4.src="http://i1.ytimg.com/vi/LYKjC3U_FtI/default.jpg";
//Parte 2
/*Esta variable imag guarda la direccion de las imagenes si quieres agregar otra recuerda agregar tambien su enlace y el titulo*/
var imag=new Array();
imag[1]="http://i1.ytimg.com/vi/Xu7FRTd3Jg8/default.jpg";
imag[2]="http://s0.2mdn.net/3161456/PID_1603377_backup.jpg";
imag[3]="http://i3.ytimg.com/vi/FEFI-_Sg5G0/default.jpg";
imag[4]="http://i1.ytimg.com/vi/LYKjC3U_FtI/default.jpg";
var total=imag.length;//total es igual al numero de imagenes, empezando contando 0 tenemos 5
//Parte 3
var href=new Array();//variable para los enlaces, por cada imagen que tengas es necesario un enlace
href[1]="#tuenlace1";
href[2]="#tuenlace2";
href[3]="#tuenlace3";
href[4]="#tuenlace4";
//Parte 4
var titulo=new Array()//Estos son los titulos de las imagenes
titulo[1]="Haz ejercicio";
titulo[2]="Erase una vez...";
titulo[3]="Paletas de limon";
titulo[4]="...Y tu que piensas";

var pro=$("#proyector");
var url=$("#enlace");

function cambiaimagen(n){
if(n==undefined){
if(cuenta<total-1){//Si cuenta es menor a total-1 (recuerda que se cuenta desde 0 por eso resto 1) el valor cuenta se incrementa
cuenta++;
}else{cuenta=1;//si cuenta no era menor a total-1 entonces lo regresamos a 1 para que se vuelva a repetir
}
pro.animate({"opacity":0},tiempo,function(){pro.attr("src",imag[cuenta]);pro.animate({"opacity":1},tiempo);});url.attr("href",href[cuenta]);$("#titulo").html(titulo[cuenta]);
}else{
pro.animate({"opacity":0},tiempo,function(){pro.attr("src",imag[n]);pro.animate({"opacity":1},tiempo);});url.attr("href",href[n]);$("#titulo").html(titulo[n]);
}
}


bucle=setInterval(function(){cambiaimagen();},(tiempo+2500));//ala variable tiempo (500) le sumo 2500 para obtener 3000=3seg modifica a tu gusto

var estado=true;

$(".botones").click(function(){
var id=parseInt($(this).attr("id"));
cambiaimagen(id);estado=false;
$("#control").html("Reanudar");
espera();
});

function espera(){
if(estado==false){
window.clearInterval(bucle);
}else{bucle=setInterval(function(){cambiaimagen();},(tiempo+2500));}
}

$("#control").click(function(){
if($("#control").text()=="Reanudar"){$("#control").text(">>");estado=true;espera();}

});
pro.mouseenter(function(){$("#titulo").stop().animate({"opacity":0},tiempo);}).mouseleave(function(){$("#titulo").stop().animate({"opacity":1},tiempo);});


});</script>

<div id="madreslider" style="width:540;">
<div id="titulo" style="background-color:rgba(0, 0, 0, 0.5);position:relative;width:130px;top:20px;font-weight:bold;padding-left:12px;color:yellow;z-index:1;">Slide</div>
<a id="enlace" href="#primera" ><img id="proyector" src="http://i1.ytimg.com/vi/Xu7FRTd3Jg8/default.jpg" width="300px" height="100px" ></a><p>

<!--Parte 5-->
<a id="control" class="botones">>></a>
<a id="1" class="botones" style="">1</a>
<a id="2" class="botones" style="">2</a>
<a id="3" class="botones" style="">3</a>
<a id="4" class="botones" style="">4</a>

</div>


Para agregar mas imagenes tienes que respetar estos 5 pasos
Observa en el codigo donde dise Parte1 o 2 en color rojo

Esos son los lugares donde llevarias a cabo la adicion de nuevo codigo (color rojo oscuro son los cambios hechos)
Parte 1En esta parte tienes que agregar la url de tu imagen, llevando la cuenta del ultimo.Por ejemplo si deseamos agregar una imagen mas tenemos que aderir al codigo
Código:
var img1=new Image();var img2=new Image();var img3=new Image();var img4 =new Image(); [color=darkred]var img5=new Image();[/color]
img1.src="http://s.ytimg.com/yt/img/pixel-vfl3z5WfW.gif";
img2.src="http://s0.2mdn.net/3161456/PID_1603377_backup.jpg";
img3.src="http://i3.ytimg.com/vi/FEFI-_Sg5G0/default.jpg";
img4.src="http://i1.ytimg.com/vi/LYKjC3U_FtI/default.jpg";
[color=darkred]img5.src="nueva imagen";[/color]


Parte 2Esta parte es mas facil que la anterior..
tienes que agregar un nuevo valor que sera igual ala URL de tu imagen, teniendo en cuenta el ultimo que existia
Código:
...
imag[[color=green]4[/color]]="http://i3.ytimg.com/vi/FEFI-_Sg5G0/default.jpg";
[color=darkred]imag[[color=green]5[/color]]="tu imagen ";[/color]

Parte 3
Parte 4
Parte 5

El codigo en color marron es para que puedan modificar el tamaño asu gusto
Tuve problemas al editar este tema (en la explicacion de codigos) pero si tienen dudas consultenme

______________
COLECCION DE EMOTIKONOS PARA TU WEB PWG


Ultima edición por adan-2994 el Lun Sep 26, 2011 9:29 pm; editado 4 veces
Mensaje28-04-2011, 17:18 (UTC)    
Título del mensaje:

Buen aporte, gracias por el codigo, pero podrias poner una previa
Mensaje28-04-2011, 17:25 (UTC)    
Título del mensaje:

basichd escribió:
Buen aporte, gracias por el codigo, pero podrias poner una previa
Mensaje28-04-2011, 21:37 (UTC)    
Título del mensaje:

adan-2994 escribió:
basichd escribió:
Buen aporte, gracias por el codigo, pero podrias poner una previa


Oye me ha gustado mucho!!! creo que lo ocuparé para mi web! buen aporte
______________


https://radiovijaer.es.tl/
Mensaje28-04-2011, 22:07 (UTC)    
Título del mensaje:

Hola,
bueno el diseño de la galería no es muy lindo que digamos pero lo que más me importa a mi es que vos lo creaste desde 0 y la verdad eso es algo que no se ve mucho en PWG así que yo le pondría un 8/10
Además esta muy bien explicado. Te felicito.

Saludos!
______________
Mensaje28-04-2011, 22:23 (UTC)    
Título del mensaje:

kilometro6 escribió:
Hola,
bueno el diseño de la galería no es muy lindo que digamos pero lo que más me importa a mi es que vos lo creaste desde 0 y la verdad eso es algo que no se ve mucho en PWG así que yo le pondría un 8/10
Además esta muy bien explicado. Te felicito.

Saludos!

No confundamos..
yo les estoy dando el script funcionando, el diseño depende de su imaginacion,
si yo lo hubiera puesto en una pagina propia claro que le ponia mas interes..
Y que bueno que les guste
______________
COLECCION DE EMOTIKONOS PARA TU WEB PWG
Mensaje20-09-2011, 11:48 (UTC)    
Título del mensaje:

Hola, en la parte que se mencionan las variables que son las imágenes yo estoy poniendo la ruta de unas imágenes que tengo subidas a PWG y no se ven. ¿Por qué sucede ésto?

Gracias.

Un saludo.
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group