Desplazar contenido tipo marquee o scroller (slider dentro de un div)

pcarvajal · #1 (**permalink**) 09/11/2007, 23:37

Deliberadamente he puesto 15 fotos de 40x40 en un div de 40x400.
La idea es que en una misma línea se muestren todas las fotos, pero tienen que quedar 10 visibles y las otras 5 no.
Lo que quiero hacer es que cuando el usuario ponga el mouse encima de "<--" o "-->" avanze o retroceda según corresponda y me vaya mostrando todas las imagenes. No se si me expliqué bien.

Cita:

<--
<div style="height: 40px; width: 400px;">
<img src="foto1.jpg" height="40" width="40"> 
.
.
.
<img src="foto15.jpg" height="40" width="40"> 
</div>
-->

marcopoloaz06 · #2 (**permalink**) 09/11/2007, 23:50

Puedes usar Código ya echo no es Necesario ke lo agas puedes usar este gran ejemplo de jQuery ke es eXelente y muy Fácil de Hacer
http://gmarwaha.com/jquery/jcarousellite/index.php#demo
=)

pcarvajal · #3 (**permalink**) 10/11/2007, 07:46

Por lo que vi, ese ejemplo funciona con php o es idea mia??
Es que vi simbolos extraños en el codigo y me asusté

Eso es precisamente lo que quiero hacer (pero cuando llegue al final de la secuencia ese sea el tope y no que continue con la primera como lo hace el)
Yo quiero algo parecido pero bieeeeeeen simplecito (para novatos en javascript como yo), cosa de poder entender el código.
Se podrá?

JavierB · #4 (**permalink**) 10/11/2007, 07:52

Hola pcarvajal

En la página de tunait (¡Hola!

) tienes algunos códigos que te pueden servir:

http://www.tunait.com/javascript/

Saludos,

pcarvajal · #5 (**permalink**) 10/11/2007, 14:33

Revisé la pagina de tunait y encontré que este script se ajustaba medianamente a lo que quiero hacer:
http://www.tunait.com/javascript/ind...aleriaimagenes

El problema es que las imágenes deben llevar por nombre de archivo números correlativos, y los mios llevan nombres propios.
El asunto es que a pesar de tratar de adaptarlo a lo que quiero hacer (que es solo el desliz de imagenes dentro de un div) me arroja muchisimos errores y se me ha hecho bastante dificil tratar de meterle mano.
Aqui les dejo el codigo:

Cita:

<SCRIPT LANGUAGE="JavaScript">
var cur = 1, posi2=0,Av=true,Ret=false,dif
function mueveAv(){
Ret = true
if(Av == true){
// document.getElementById('fi').title = ''
posi = document.getElementById('imgs').style.left.replace ('px','')
alert(posi);
posi = posi.replace('pt','')
posi = new Number(posi)
posi2 += 41
cur++
lfuera = document.getElementById('fuera').offsetWidth
alert (lfuera);
limgs = document.getElementById('imgs').offsetWidth - posi2
if(limgs <= lfuera){
dif = lfuera-limgs
pepe = document.getElementById('imgs').offsetWidth - lfuera
document.getElementById('imgs').style.left = eval('-' + pepe)
Av = false
// document.getElementById('fd').title = 'No hay más imágenes'
}
else{
// posi -= imagenes[cur].width
posi -= 41
document.getElementById('imgs').style.left = posi}
}
}

function mueveRet(){
if(Ret == true){
Av = true
// document.getElementById('fd').title = ''
if (cur == 2) {
document.getElementById('imgs').style.left = 0
Ret = false
// document.getElementById('fi').title = 'No hay más imágenes'
}
else{
posi = document.getElementById('imgs').style.left.replace ('px','')
posi = posi.replace('pt','')
posi = new Number(posi)
// posi += imagenes[cur].width
// posi2 -= imagenes[cur].width

posi += 41
posi2 -= 10

cur--
lfuera = document.getElementById('fuera').offsetWidth
limgs = document.getElementById('imgs').offsetWidth - posi2
document.getElementById('imgs').style.left = posi
}
}
}

</SCRIPT>

<BODY>
<div id="fuera" style="position:relative; height:45px; width:600px; margin:auto; overflow:visible; border:1px;">
<div id="imgs" style="position:absolute; width:0px;"></div>
<img src="foto_uno.jpg" height="40" width="40"> 
.
.
.
<img src="foto_quince.jpg" height="40" width="40"> 
</div>
<br><div id="flechas"><a href='#' onmousedown="mueveRet()" id="fi">←</a> <a href='#' onmousedown="mueveAv()" id="fd">→</a></div>
</BODY>

De verdad les agradecería bastante si pudieran meter mano en el codigo y puedieran ayudarme. Estaré atento a sus respuestas.
Saludos!

tunait · #6 (**permalink**) 10/11/2007, 16:09

Hola pcarvajal

Te digo las modificaciones que puedes hacer para que se base en los nombre de archivo que tú le indiques en un array.

fíjate en las primeras líneas del script, agrega lo que te dejo en verde

Código:

var imas = 8 //cantidad de imágenes totales
var maxAncho = 120 //define la anchura máxima de la imagen
var maxAlto = 70 //define la altura máxima de la imagen

var _imagenes = new Array(
	0,
	'pepe.gif',
	'12.gif',
	'13.gif',
	'14.gif',
	'5.gif',
	'pancracio.jpg',
	'7.gif',
	'8.gif'
)
var imagenes = new Array()
var imagenesGran = new Array()

El 0 (cero) debe permanecer intacto.

y modifica (agrega) lo que te marco en verde y elimina lo que te marco en rojo unas líneas más abajo

Código:

var conNS = 1
for (m=1; m<= imas ; m++){
	imagenes[m] = new Image()
	imagenes[m].src = dir + _imagenes[m] + tImagen
	imagenesGran[m] = new Image()
	imagenesGran[m].src = dirGran + _imagenes[m] + tImagen
	document.write ('<img src="' + imagenes[m].src )
	document.write ('" onload="if(conNS <= imas){reDimensiona(this.width,this.height,' + m + ',this)}" onclick="camb =' + m + '; bajaOpacidad()">')
}

Con eso te buscará las imágenes por el nombre de archivo. Si tienes algún problema avisa

un saludo

pcarvajal · #7 (**permalink**) 10/11/2007, 17:01

perdona por mi ignorante pregunta pero, ese codigo que has puesto se lo agrego al codigo que puse más arriba?
algo asi?

Cita:

<SCRIPT LANGUAGE="JavaScript">
var imas = 8 //cantidad de imágenes totales
var maxAncho = 120 //define la anchura máxima de la imagen
var maxAlto = 70 //define la altura máxima de la imagen

var _imagenes = new Array(
0,
'pepe.gif',
'12.gif',
'13.gif',
'14.gif',
'5.gif',
'pancracio.jpg',
'7.gif',
'8.gif'
)
var imagenes = new Array()
var imagenesGran = new Array()

var conNS = 1
for (m=1; m<= imas ; m++){
imagenes[m] = new Image()
imagenes[m].src = dir + _imagenes[m]
imagenesGran[m] = new Image()
imagenesGran[m].src = dirGran + _imagenes[m]
document.write ('<img src="' + imagenes[m].src )
document.write ('" onload="if(conNS <= imas){reDimensiona(this.width,this.height,' + m + ',this)}" onclick="camb =' + m + '; bajaOpacidad()">')
}

var cur = 1, posi2=0,Av=true,Ret=false,dif
function mueveAv(){
Ret = true
if(Av == true){
// document.getElementById('fi').title = ''
posi = document.getElementById('imgs').style.left.replace ('px','')
alert(posi);
posi = posi.replace('pt','')
posi = new Number(posi)
posi2 += 41
cur++
lfuera = document.getElementById('fuera').offsetWidth
alert (lfuera);
limgs = document.getElementById('imgs').offsetWidth - posi2
if(limgs <= lfuera){
dif = lfuera-limgs
pepe = document.getElementById('imgs').offsetWidth - lfuera
document.getElementById('imgs').style.left = eval('-' + pepe)
Av = false
// document.getElementById('fd').title = 'No hay más imágenes'
}
else{
// posi -= imagenes[cur].width
posi -= 41
document.getElementById('imgs').style.left = posi}
}
}

function mueveRet(){
if(Ret == true){
Av = true
// document.getElementById('fd').title = ''
if (cur == 2) {
document.getElementById('imgs').style.left = 0
Ret = false
// document.getElementById('fi').title = 'No hay más imágenes'
}
else{
posi = document.getElementById('imgs').style.left.replace ('px','')
posi = posi.replace('pt','')
posi = new Number(posi)
// posi += imagenes[cur].width
// posi2 -= imagenes[cur].width

posi += 41
posi2 -= 10

cur--
lfuera = document.getElementById('fuera').offsetWidth
limgs = document.getElementById('imgs').offsetWidth - posi2
document.getElementById('imgs').style.left = posi
}
}
}

</SCRIPT>

<BODY>
<div id="fuera" style="position:relative; height:45px; width:600px; margin:auto; overflow:visible; border:1px;">
<div id="imgs" style="position:absolute; width:0px;"></div>
<img src="foto_uno.jpg" height="40" width="40"> 
.
.
.
<img src="foto_quince.jpg" height="40" width="40"> 
</div>
<br><div id="flechas"><a href='#' onmousedown="mueveRet()" id="fi">←</a> <a href='#' onmousedown="mueveAv()" id="fd">→</a></div>
</BODY>

Te lo pregunto porque por lo poco que entiendo, alli armas un arreglo con las imagenes, y eso no es lo que hago yo (te explico: en el div imgs que puse lo armo desde una bae de datos con ASP, por lo que pasarle los nombres al arreglo en JS sería mas engorroso de hacer.)
Por otra parte, las variable imagenesGran tu la usas par mostrar las imagenes en grande, pero esa caracteristica de tu scrit yo la pasé por alto porque no la necesito. Lo unico que necesito es el "slide de las imagenes", es por eso ademas que te insisto con lo del div armado dentro del body y no dentro de Js. (espero no estar abusando demasiado de tu buena voluntad, y de antemano gracias por haber contestado)

tunait · #8 (**permalink**) 10/11/2007, 17:17

Cita:

Iniciado por pcarvajal

perdona por mi ignorante pregunta pero, ese codigo que has puesto se lo agrego al codigo que puse más arriba?

er.. no, al código original.

Cita:

Te lo pregunto porque por lo poco que entiendo, alli armas un arreglo con las imagenes, y eso no es lo que hago yo (te explico: en el div imgs que puse lo armo desde una bae de datos con ASP, por lo que pasarle los nombres al arreglo en JS sería mas engorroso de hacer.)

Pero en eso no hay problema, no tienes más que escribir el array con asp desde la base de datos

Cita:

Por otra parte, las variable imagenesGran tu la usas par mostrar las imagenes en grande, pero esa caracteristica de tu scrit yo la pasé por alto porque no la necesito. Lo unico que necesito es el "slide de las imagenes", es por eso ademas que te insisto con lo del div armado dentro del body y no dentro de Js. (espero no estar abusando demasiado de tu buena voluntad, y de antemano gracias por haber contestado)

no te preocupes

. El tema de armar el contendor con las imágenes dentro del body está bien pero ya necesita que le ponga un poco más de atención y en estos momentos me estoy con el pijama y el osito de peluche lista para irme a dormir

que me caigo de sueño. Mañana me lo miro con más calma y te digo algo

Un saludo

pcarvajal · #9 (**permalink**) 10/11/2007, 17:26

vaya comprendo, la verdad es que estoy forzado a armarlo desde asp porque desconozco los nombres de las imagenes, asi que no me queda de otra.
Espero puedas hecharle una miradita cuabdo puedas por favor.

y gracias de nuevo por todo

pcarvajal · #10 (**permalink**) 12/11/2007, 16:28

alo.. ayuda por favor

pcarvajal · #11 (**permalink**) 13/11/2007, 09:30

osea.. nadie puede ayudarme???

pcarvajal · #12 (**permalink**) 14/11/2007, 06:36

ayuda por favor