GALERÍA SLIDER CON n FOTOS (APAISADA)
Una galería slider sencilla se basa en una div (larga de más le puedo dar
2000 o 5000px, según lo que calculé de fotos (id=tira) y un marco con css
overflow:hidden. El ancho del marco debe ser múltiplo del ancho de las fotos
+ el margen entre ellas.
Las div bajo las fotos tb tienen overflow:hidden y altura fija, así si me paso hacia abajo con el texto no empujo a +mas info. El número de divs float con foto en tira debe ponerse en la var nf, la cantidad de fotos en el marco en fpm y el ancho de la diapositiva (ancho de foto ) en af.
Explicación del jquery:
k es el contador de fotos e inicia en cero, lim es el número maximo de deslizamientos a izquierda (L06). L07 y L08 ubican la flecha derecha (position:absolute) a la derecha de marco y a su altura (se debe sumar 35 por ser el margen izq de marco, jquery no lo toma en cuenta en position().left. L09 y L10 aseguran deshabilitar la flecha derecha (¡al ppio, no puede correrse para ese lado!) El bloque L11-L21 es la funcion que corre a izquierda, L12 decide si estás en la punta de la tira ( o sea si k llega a la diferencia entre el numero de fotos de la tira y las que entran en el marco. Si no llego L13 la corre (animate) en af que es el ancho de la foto (no importa el margen de ella) L14 aumenta k en uno, L15-L16 activan la flecha derecha, por si estaba desactivada si está al límite L18-L19 desactivan la flecha izq y no mueven nada. La función L23 ovbiamente hace todo hacia el otro lado.
Las div bajo las fotos tb tienen overflow:hidden y altura fija, así si me paso hacia abajo con el texto no empujo a +mas info. El número de divs float con foto en tira debe ponerse en la var nf, la cantidad de fotos en el marco en fpm y el ancho de la diapositiva (ancho de foto ) en af.
Explicación del jquery:
k es el contador de fotos e inicia en cero, lim es el número maximo de deslizamientos a izquierda (L06). L07 y L08 ubican la flecha derecha (position:absolute) a la derecha de marco y a su altura (se debe sumar 35 por ser el margen izq de marco, jquery no lo toma en cuenta en position().left. L09 y L10 aseguran deshabilitar la flecha derecha (¡al ppio, no puede correrse para ese lado!) El bloque L11-L21 es la funcion que corre a izquierda, L12 decide si estás en la punta de la tira ( o sea si k llega a la diferencia entre el numero de fotos de la tira y las que entran en el marco. Si no llego L13 la corre (animate) en af que es el ancho de la foto (no importa el margen de ella) L14 aumenta k en uno, L15-L16 activan la flecha derecha, por si estaba desactivada si está al límite L18-L19 desactivan la flecha izq y no mueven nada. La función L23 ovbiamente hace todo hacia el otro lado.
<head>
<script src="../scripts/jquery-3.6.4.min.js"></script>
<script>
$(document).ready(function(){
var af = 165; /*ancho diapo (movimiento de deslizamiento en + ó - */
var fpm = 5; /* cantidad de fotos por marco */
var nf = 7; /* total de fotos */
/*-------------------fin parametros------------------------------*/
var k = 0; /*contador de deslizamiento*/
06 var lim=nf-fpm; /*limite de desplazamiento a izq*/
07 $("#fder").css("top",$("#marco").position().top); /*ajusta posicion vertical de flecha derecha */
08 $("#fder").css("left",$("#marco").position().left + $("#marco").outerWidth() + 35); /*ajusta posicion hor de flecha derecha +35 margen*/
09 $("#izq").css("cursor","pointer"); /*inicialmente solo activo el izq*/
10 $("#der").css({ opacity: 0.5 }); /*inicialmente solo activo el izq*/
11 $("#izq").click(function(){
12 if (k < lim){
13 $("#tira").animate({right:'+=' + af},500);
14 k += 1;
15 $("#der").css("cursor","pointer");
16 $("#der").css({ opacity: 1 });
17 }else{
18 $("#izq").css("cursor","default");
19 $("#izq").css({ opacity: 0.5 });
20 }
21 });
23 $("#der").click(function(){
if (k > 0){
$("#tira").animate({right:'-=' + af},500);
k -= 1;
$("#izq").css("cursor","pointer");
$("#izq").css({ opacity: 1 });
}else{
$("#der").css("cursor","default");
$("#der").css({ opacity: 0.5 });
}
});
});
</script>
<style>
.prensa
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-align: left;
color:#666;
padding-left:5px;
padding-right:5px;
height:120px;
overflow:hidden;
}
.prensamas a{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#0099ff;
padding-left:5px;
background-color:#FFF;
}
.imgase{
margin-right:10px;
width:165px;
height:168px;
}
.flecha{
padding-top:80px;
position:absolute;
z-index:100;
}
.flecha img{
width:20px;
height:26;
cursor:pointer;
}
.diapo{
float:left;
width:165px;
}
#marco{
width:825px;
overflow:hidden;
margin-left:25px;
}
#tira{
padding-top:0px;
position:relative;
z-index:10;
width:2000px;
}
</style>
</head>
<body>
<div class="flecha" id="fizq">
<img src="flecha_izq.jpg" id="izq" >
</div>
<div id="marco">
<!-- inicio tira de fotos -->
<div id="tira">
<div class="diapo">
<img src="img-gal/tec-java-gal1-prensa01.jpg" class="imgase">
<div class="prensa">
Hola esta es la explicacion de que se trata la cosa aqui se da una explicación general
en a lo sumo 9 renglones, porque más abajo ponemos un hipervínculo que permite ir al artículo
completo.
</div>
<div class="prensamas"><a href="#">+ Más info</a></div>
</div>
<div class="diapo">
<img src="img-gal/tec-java-gal1-prensa02.jpg" class="imgase">
<div class="prensa">
Sirviendo vasitos<br/> de que se trata la cosa aqui se da una explicación general
en a lo sumo 9 renglones, porque más abajo ponemos un hipervínculo que permite ir al artículo
completo.
</div>
<div class="prensamas"><a href="#">+ Más info</a></div>
</div>
</div>
******************se repite la div class="diapo" una por cada foto******************
<!-- fin tira de fotos -->
</div>
<div class="flecha" id="fder">
<img src="flecha_der.jpg" id="der" style="cursor:default;">
</div>
<div style="clear:both"></div>
</body>