galeria de imagenes en javascript cogiendolas de la bd
Maria
02 de Enero del 2005
Mi pregunta es la siguiente.
Tengo un trozo de codigo en javascript donde se implementa una galeria de imagenes, las imagenes son fijas y tienen un nombre determinado: imagenes1.gif,...
y las grandes (que aparece cuando se pincha en la pequeña) imagenesGran1.gif,...
Ahora lo que quiero hacer es coger las imagenes de la base de datos.
Es decir accedo a la base de datos, hago la consulta en la que recogo el nombre de las imagenes y pongo el nombre de la imagen donde estaba el anterior. Pero esto no funciona.
Ahora paso el código de la galeria en javascript.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Catalogo Ramos</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<br>
<a href="home_main.htm" target="mainFrame"><img src="imagenes/home1.gif" width="30" heigth="30" border="2" align="right"></a>
<center><b style="font-size:20pt;color:navy;">CATÃLOGO RAMOS</b></center>
<center><img src="imagenes/lineahojas.gif"></center>
<script language="JavaScript">
var dir = "imagenes/ramos/imagenes";
//directorio donde estarán las imágenes pequeñas
var dirGran = "imagenes/ramos/imagenesGran";
//directorio donde estarán las imágenes en grande
var tImagen = ".gif";
// tipo de archivo de las imágenes
var anCapa = "70%";
// Anchura del cuadro donde se muestran las imágenes pequeñas.Puede ser en porcentaje ("70%") o absoluto (200)
var imas = 20;
//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()
var imagenesGran = new Array()
document.write('<div id="tot" style="width:100%;height:100%">')
document.write ('<div id="fuera" style="position:relative; height:10px; width:' + anCapa + '; margin:auto; overflow:hidden">')
document.write ('<div id="imgs" style="position:absolute; width:0px;">')
var conNS = 1
++++++++++++++++++++++++++++++++++++++++++++++++
//aqui es donde debo acceder a la base de datos
//recoger la imagen
//y en lugar de dir+m+tImagen
//poner dir+imagen (la imagen de la BD)
for (m=1; m<= imas ; m++){
imagenes[m] = new Image()
imagenes[m].src = dir + m + tImagen
imagenesGran[m] = new Image()
imagenesGran[m].src = dirGran + 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()">')
}
document.write('</div></div>');
var anFue,anImgs
function reDimensiona(an,al,pos,cual){
conNS++
if(an < 10) {an = cual.width}
if (an > al) {forma = 'apaisada'}
if (an < al) {forma = 'retrato'}
if(forma == 'apaisada'){
if(an > maxAncho){
porcientoAnchura = parseInt(maxAncho/an*100)
cual.width = maxAncho
cual.height = porcientoAnchura*al/100
an = cual.width; al = cual.height
}
}
else if (forma == 'retrato'){
if (al > maxAlto){
porcientoAltura = maxAlto/al*100
cual.height = maxAlto
cual.width = porcientoAltura*an/100
an = cual.width; al = cual.height
}
}
An = parseInt(document.getElementById('imgs').style.width)
Al = parseInt(document.getElementById('fuera').style.height)
document.getElementById('imgs').style.width = (An + an) + "px"
anImgs = document.getElementById('imgs').style.width
if(al > Al){
document.getElementById('fuera').style.height = al + "px"
}
imagenes[pos].width = an
if(pos == imagenes.length -1){
if(navigator.appName == "Netscape"){
tamCapaNS()
}
}
}
function tamCapa(){
document.getElementById('fuera').style.width = anCapa
anchoVentana = document.body.scrollWidth
if(typeof(anCapa) == 'string'){
if(anCapa.charAt(anCapa.length-1) == "%"){
perico2 = new Number(parseInt(anCapa))
perico = parseInt((perico2 * anchoVentana)/100)
}
else{
perico = new Number(parseInt(anCapa))
}
}
if (document.getElementById('fuera').offsetWidth > parseInt(anImgs)){
document.getElementById('fuera').style.width = anImgs
document.getElementById('imgs').style.left = 0
document.getElementById('flechas').style.display = 'none'
}
else{
document.getElementById('flechas').style.display = 'inline'
Ret = false
}
centra()
}
function tamCapaNS(){
if (anFue > parseInt(anImgs)){
document.getElementById('fuera').style.width = anImgs
document.getElementById('flechas').style.display = 'none'
}
}
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','')
posi = posi.replace('pt','')
posi = new Number(posi)
posi2 += imagenes[cur].width
cur++
lfuera = document.getElementById('fuera').offsetWidth
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
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
cur--
lfuera = document.getElementById('fuera').offsetWidth
limgs = document.getElementById('imgs').offsetWidth - posi2
document.getElementById('imgs').style.left = posi
}
}
}
function centra(){
if(navigator.appName != "Netscape"){
anchoVentana = document.body.scrollWidth
document.getElementById('fuera').style.left =(anchoVentana - document.getElementById('fuera').offsetWidth)/2
}
}
var opa = 100
function bajaOpacidad(){
if(opa >= 0){
cambia()
opa -=10
setTimeout('bajaOpacidad()',10)
}
else{presImagen()}
}
function cambia(){
if (navigator.appName == "Microsoft Internet Explorer"){
document.visor.filters.alpha.opacity = opa
}
else{
document.visor.style.MozOpacity = opa + "%"
}
}
var camb
function presImagen(){
document.visor.src= imagenesGran[camb].src
subeOpacidad()
}
function subeOpacidad(){
if(opa <= 100){
cambia()
opa += 10
setTimeout('subeOpacidad()',10)
}
}
window.onload = function(){tamCapa();document.body.style.overflow = 'hidden'}
window.onresize = tamCapa
</script>
<style type="text/css">
<!--
strong, img {
font-weight: bolder;
cursor:pointer;
cursor: hand;
}
#fuera{
border: 2px solid #990000;
background-color: #990000;
top: 10px;
}
#tot{
border: 1px solid #CC0033;
}
#visor {
filter: alpha(opacity=100);
cursor: default;
}
-->
</style>
</head>
<body background="imagenes/fondoflores.jpg" >
<br>
<center>
<p><strong><img src="imagenes/fizq.gif" width="100" height="22" align="absmiddle" onmousedown="mueveRet()" id="fi">
<img src="imagenes/fder.gif" width="100" height="22" align="absmiddle" onmousedown="mueveAv()" id="fd">
</strong></p>
<p align="center"><strong><img id="visor" name="visor" src="imagenes/ramos/imagenesGran1.gif" ></strong></p>
<p><strong > </strong>
<p>* Si no disponemos de las flores deseadas usaremos flores de similar categorÃa.
<script language="javascript">
document.write('</div>')
</script>
</body>
</html>
++++++++++++++++++++++++++++++++++
Mi pregunta exactamente es si puedo integrar jsp en el código javascript, como se integra y si se puede hacer en el <head>
Si alguien sabe la respuesta se lo agradeceria mucho, es que me hace falta para el proyecto fin de carrera y me urge ya que lo tengo que entregar en enero.
Muchas gracias.
Tengo un trozo de codigo en javascript donde se implementa una galeria de imagenes, las imagenes son fijas y tienen un nombre determinado: imagenes1.gif,...
y las grandes (que aparece cuando se pincha en la pequeña) imagenesGran1.gif,...
Ahora lo que quiero hacer es coger las imagenes de la base de datos.
Es decir accedo a la base de datos, hago la consulta en la que recogo el nombre de las imagenes y pongo el nombre de la imagen donde estaba el anterior. Pero esto no funciona.
Ahora paso el código de la galeria en javascript.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Catalogo Ramos</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<br>
<a href="home_main.htm" target="mainFrame"><img src="imagenes/home1.gif" width="30" heigth="30" border="2" align="right"></a>
<center><b style="font-size:20pt;color:navy;">CATÃLOGO RAMOS</b></center>
<center><img src="imagenes/lineahojas.gif"></center>
<script language="JavaScript">
var dir = "imagenes/ramos/imagenes";
//directorio donde estarán las imágenes pequeñas
var dirGran = "imagenes/ramos/imagenesGran";
//directorio donde estarán las imágenes en grande
var tImagen = ".gif";
// tipo de archivo de las imágenes
var anCapa = "70%";
// Anchura del cuadro donde se muestran las imágenes pequeñas.Puede ser en porcentaje ("70%") o absoluto (200)
var imas = 20;
//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()
var imagenesGran = new Array()
document.write('<div id="tot" style="width:100%;height:100%">')
document.write ('<div id="fuera" style="position:relative; height:10px; width:' + anCapa + '; margin:auto; overflow:hidden">')
document.write ('<div id="imgs" style="position:absolute; width:0px;">')
var conNS = 1
++++++++++++++++++++++++++++++++++++++++++++++++
//aqui es donde debo acceder a la base de datos
//recoger la imagen
//y en lugar de dir+m+tImagen
//poner dir+imagen (la imagen de la BD)
for (m=1; m<= imas ; m++){
imagenes[m] = new Image()
imagenes[m].src = dir + m + tImagen
imagenesGran[m] = new Image()
imagenesGran[m].src = dirGran + 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()">')
}
document.write('</div></div>');
var anFue,anImgs
function reDimensiona(an,al,pos,cual){
conNS++
if(an < 10) {an = cual.width}
if (an > al) {forma = 'apaisada'}
if (an < al) {forma = 'retrato'}
if(forma == 'apaisada'){
if(an > maxAncho){
porcientoAnchura = parseInt(maxAncho/an*100)
cual.width = maxAncho
cual.height = porcientoAnchura*al/100
an = cual.width; al = cual.height
}
}
else if (forma == 'retrato'){
if (al > maxAlto){
porcientoAltura = maxAlto/al*100
cual.height = maxAlto
cual.width = porcientoAltura*an/100
an = cual.width; al = cual.height
}
}
An = parseInt(document.getElementById('imgs').style.width)
Al = parseInt(document.getElementById('fuera').style.height)
document.getElementById('imgs').style.width = (An + an) + "px"
anImgs = document.getElementById('imgs').style.width
if(al > Al){
document.getElementById('fuera').style.height = al + "px"
}
imagenes[pos].width = an
if(pos == imagenes.length -1){
if(navigator.appName == "Netscape"){
tamCapaNS()
}
}
}
function tamCapa(){
document.getElementById('fuera').style.width = anCapa
anchoVentana = document.body.scrollWidth
if(typeof(anCapa) == 'string'){
if(anCapa.charAt(anCapa.length-1) == "%"){
perico2 = new Number(parseInt(anCapa))
perico = parseInt((perico2 * anchoVentana)/100)
}
else{
perico = new Number(parseInt(anCapa))
}
}
if (document.getElementById('fuera').offsetWidth > parseInt(anImgs)){
document.getElementById('fuera').style.width = anImgs
document.getElementById('imgs').style.left = 0
document.getElementById('flechas').style.display = 'none'
}
else{
document.getElementById('flechas').style.display = 'inline'
Ret = false
}
centra()
}
function tamCapaNS(){
if (anFue > parseInt(anImgs)){
document.getElementById('fuera').style.width = anImgs
document.getElementById('flechas').style.display = 'none'
}
}
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','')
posi = posi.replace('pt','')
posi = new Number(posi)
posi2 += imagenes[cur].width
cur++
lfuera = document.getElementById('fuera').offsetWidth
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
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
cur--
lfuera = document.getElementById('fuera').offsetWidth
limgs = document.getElementById('imgs').offsetWidth - posi2
document.getElementById('imgs').style.left = posi
}
}
}
function centra(){
if(navigator.appName != "Netscape"){
anchoVentana = document.body.scrollWidth
document.getElementById('fuera').style.left =(anchoVentana - document.getElementById('fuera').offsetWidth)/2
}
}
var opa = 100
function bajaOpacidad(){
if(opa >= 0){
cambia()
opa -=10
setTimeout('bajaOpacidad()',10)
}
else{presImagen()}
}
function cambia(){
if (navigator.appName == "Microsoft Internet Explorer"){
document.visor.filters.alpha.opacity = opa
}
else{
document.visor.style.MozOpacity = opa + "%"
}
}
var camb
function presImagen(){
document.visor.src= imagenesGran[camb].src
subeOpacidad()
}
function subeOpacidad(){
if(opa <= 100){
cambia()
opa += 10
setTimeout('subeOpacidad()',10)
}
}
window.onload = function(){tamCapa();document.body.style.overflow = 'hidden'}
window.onresize = tamCapa
</script>
<style type="text/css">
<!--
strong, img {
font-weight: bolder;
cursor:pointer;
cursor: hand;
}
#fuera{
border: 2px solid #990000;
background-color: #990000;
top: 10px;
}
#tot{
border: 1px solid #CC0033;
}
#visor {
filter: alpha(opacity=100);
cursor: default;
}
-->
</style>
</head>
<body background="imagenes/fondoflores.jpg" >
<br>
<center>
<p><strong><img src="imagenes/fizq.gif" width="100" height="22" align="absmiddle" onmousedown="mueveRet()" id="fi">
<img src="imagenes/fder.gif" width="100" height="22" align="absmiddle" onmousedown="mueveAv()" id="fd">
</strong></p>
<p align="center"><strong><img id="visor" name="visor" src="imagenes/ramos/imagenesGran1.gif" ></strong></p>
<p><strong > </strong>
<p>* Si no disponemos de las flores deseadas usaremos flores de similar categorÃa.
<script language="javascript">
document.write('</div>')
</script>
</body>
</html>
++++++++++++++++++++++++++++++++++
Mi pregunta exactamente es si puedo integrar jsp en el código javascript, como se integra y si se puede hacer en el <head>
Si alguien sabe la respuesta se lo agradeceria mucho, es que me hace falta para el proyecto fin de carrera y me urge ya que lo tengo que entregar en enero.
Muchas gracias.
tunait
02 de Enero del 2005
Este script está sacado de http://javascript.tunait.com/javascript/index.asp?s=galeriaimagenes
Por favor, mantengan los créditos de los autores, es lo mÃnimo que se pide.
saludos
Por favor, mantengan los créditos de los autores, es lo mÃnimo que se pide.
saludos