[PETICIÓN] Script con Imágenes

[SilverWolf21]

Hola a todos, esta es mi petición:

Necesito un Script, que haga que las imagenes que yo ponga en mi web sean de X medidas (150 x 200, por ejemplo) y que al pulsar en una, se haga más grande y se centre en la pantalla, quedando la web un poco más oscura que la foto. ¿Se puede hacer?


Muchas gracias a todos ;)

[Jugoncan]

Yo he encontrado lo que dices pero sin hacer más oscura la página.
Aquí lo tienes: http://gemablog-.blogspot.com/2007/0...e-imgenes.html
La imagen de los niños esos que hay en la página es un ejemplo. Inconveniente: no funciona hasta que se termina de cargar la página, por lo menos en esa.

Saludos

[SilverWolf21]

No me funciona. Mira, este es el resultado que me da ami en mi pág (http://rseuskadi.zxq.net/imagenes) y no debería ser así...

Esto es lo que he hecho en el .css

<style type="text/css">

/* este es el rectángulo total de la ventana */
#thumbBox {
position: absolute;
left: 0;
top: 0;
width: auto;
padding: 10px; /* el ancho del borde */
padding-bottom: 0;
background: #313131; /* el color de fondo */
visibility: hidden;
z-index: 10;
cursor: hand;
cursor: pointer;
}
/* este es el rectángulo del pie de página */
#thumbBox .footerbar {
/* propiedades del texto "CERRAR" */
font: bold 16px Tahoma;
letter-spacing: 5px;
line-height: 1.1em;
color: white;
padding: 5px 0;
text-align: right;
/* propiedades que podemos agregar: background-color, border */
}
/* es el rectángulo interior que contendrá la imagen y el eventual título */
#thumbBox #thumbImage {
background-color: white; /* el color de fondo */
/* podemos agregar otras propiedades, por ejEMplo, para las fuentes de los textos */
}
/* es la advertencia de carga que se muestra antes de abrirse la ventana */
#thumbLoading {
position: absolute;
visibility: hidden;
border: 1px solid black; /* el borde */
background-color: #EFEFEF; /* el color de fondo */
padding: 5px; /* márgenes */
z-index: 5;
/* podemos agregar otras propiedades para las fuentes, etc */
}
</style>

Y esto en el .js

var thumbnailviewer={
enableTitle: true, //Should "title" attribute of link be used as description?
enableAnimation: true, //Enable fading animation?
definefooter: '<div class="footerbar">Cerrar</div>', //Define HTML for footer interface
defineLoading: ' Cargando imagen...', //Define HTML for "loading" div

/////////////No need to edit beyond here/////////////////////////

scrollbarwidth: 16,
opacitystring: 'filter:progid:DXImageTransform.Microsoft.alpha(opacity=10); -moz-opacity: 0.1; opacity: 0.1',
targetlinks:[], //Array to hold links with rel="thumbnail"

createthumbBox:function(){
//write out HTML for Image Thumbnail Viewer plus loading div
document.write('<div id="thumbBox" onClick="thumbnailviewer.closeit()"><div id="thumbImage"></div>'+this.definefooter+'</div>')
document.write('<div id="thumbLoading">'+this.defineLoading+'</div>')
this.thumbBox=document.getElementById("thumbBox")
this.thumbImage=document.getElementById("thumbImage") //Reference div that holds the shown image
this.thumbLoading=document.getElementById("thumbLoading") //Reference "loading" div that will be shown while image is fetched
this.standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body //create reference to common "body" across doctypes
},


centerDiv:function(divobj){ //Centers a div element on the page
var ie=document.all && !window.opera
var dom=document.getElementById
var scroll_top=(ie)? this.standardbody.scrollTop : window.pageYOffset
var scroll_left=(ie)? this.standardbody.scrollLeft : window.pageXOffset
var docwidth=(ie)? this.standardbody.clientWidth : window.innerWidth-this.scrollbarwidth
var docheight=(ie)? this.standardbody.clientHeight: window.innerHeight
var docheightcomplete=(this.standardbody.offsetHeight>this.standardbody.scrollHeight)? this.standardbody.offsetHeight : this.standardbody.scrollHeight //Full scroll height of document
var objwidth=divobj.offsetWidth //width of div element
var objheight=divobj.offsetHeight //height of div element
var topposition=(docheight>objheight)? scroll_top+docheight/2-objheight/2+"px" : scroll_top+10+"px" //Vertical position of div element: Either centered, or if element height larger than viewpoint height, 10px from top of viewpoint
divobj.style.left=docwidth/2-objwidth/2+"px" //Center div element horizontally
divobj.style.top=Math.floor(parseInt(topposition))+"px"
divobj.style.visibility="visible"
},

showthumbBox:function(){ //Show ThumbBox div
this.centerDiv(this.thumbBox)
if (this.enableAnimation){ //If fading animation enabled
this.currentopacity=0.1 //Starting opacity value
this.opacitytimer=setInterval("thumbnailviewer.opacityanimation()", 20)
}
},


loadimage:function(link){ //Load image function that gets attached to each link on the page with rel="thumbnail"
if (this.thumbBox.style.visibility=="visible") //if thumbox is visible on the page already
this.closeit() //Hide it first (not doing so causes triggers some positioning bug in Firefox
var imageHTML='[img]'+link.getAttribute([/img]' //Construct HTML for shown image
if (this.enableTitle && link.getAttribute("title")) //Use title attr of the link as description?
imageHTML+='
'+link.getAttribute("title")
this.centerDiv(this.thumbLoading) //Center and display "loading" div while we set up the image to be shown
this.thumbImage.innerHTML=imageHTML //Populate thumbImage div with shown image's HTML (while still hidden)
this.featureImage=this.thumbImage.getElementsByTagName("img")[0] //Reference shown image itself
this.featureImage.onload=function(){ //When target image has completely loaded
thumbnailviewer.thumbLoading.style.visibility="hidden" //Hide "loading" div
thumbnailviewer.showthumbBox() //Display "thumbbox" div to the world!
}
if (document.all && !window.createPopup) //Target IE5.0 browsers only. Address IE image cache not firing onload bug: panoramio.com/blog/onload-event/
this.featureImage.src=link.getAttribute("href")
this.featureImage.onerror=function(){ //If an error has occurred while loading the image to show
thumbnailviewer.thumbLoading.style.visibility="hidden" //Hide "loading" div, game over
}
},

setimgopacity:function(value){ //Sets the opacity of "thumbimage" div per the passed in value setting (0 to 1 and in between)
var targetobject=this.featureImage
if (targetobject.filters && targetobject.filters[0]){ //IE syntax
if (typeof targetobject.filters[0].opacity=="number") //IE6
targetobject.filters[0].opacity=value*100
else //IE 5.5
targetobject.style.filter="alpha(opacity="+value*100+")"
}
else if (typeof targetobject.style.MozOpacity!="undefined") //Old Mozilla syntax
targetobject.style.MozOpacity=value
else if (typeof targetobject.style.opacity!="undefined") //Standard opacity syntax
targetobject.style.opacity=value
else //Non of the above, stop opacity animation
this.stopanimation()
},

opacityanimation:function(){ //Gradually increase opacity function
this.setimgopacity(this.currentopacity)
this.currentopacity+=0.1
if (this.currentopacity>1)
this.stopanimation()
},

stopanimation:function(){
if (typeof this.opacitytimer!="undefined")
clearInterval(this.opacitytimer)
},


closeit:function(){ //Close "thumbbox" div function
this.stopanimation()
this.thumbBox.style.visibility="hidden"
this.thumbImage.innerHTML=""
this.thumbBox.style.left="-2000px"
this.thumbBox.style.top="-2000px"
},

cleanup:function(){ //Clean up routine on page unload
this.thumbLoading=null
if (this.featureImage) this.featureImage.onload=null
this.featureImage=null
this.thumbImage=null
for (var i=0; i<this.targetlinks.length; i++)
this.targetlinks[i].onclick=null
this.thumbBox=null
},

dotask:function(target, functionref, tasktype){ //assign a function to execute to an event handler (ie: onunload)
var tasktype=(window.addEventListener)? tasktype : "on"+tasktype
if (target.addEventListener)
target.addEventListener(tasktype, functionref, false)
else if (target.attachEvent)
target.attachEvent(tasktype, functionref)
},

init:function(){ //Initialize thumbnail viewer script by scanning page and attaching appropriate function to links with rel="thumbnail"
if (!this.enableAnimation)
this.opacitystring=""
var pagelinks=document.getElementsByTagName("a")
for (var i=0; i<pagelinks.length; i++){ //BEGIN FOR LOOP
if (pagelinks[i].getAttribute("rel") && pagelinks[i].getAttribute("rel")=="thumbnail"){ //Begin if statement
pagelinks[i].onclick=function(){
thumbnailviewer.stopanimation() //Stop any currently running fade animation on "thumbbox" div before proceeding
thumbnailviewer.loadimage(this) //Load image
return false
}
this.targetlinks[this.targetlinks.length]=pagelinks[i] //store reference to target link
} //end if statement
} //END FOR LOOP
//Reposition "thumbbox" div when page is resized
this.dotask(window, function(){if (thumbnailviewer.thumbBox.style.visibility=="visible") thumbnailviewer.centerDiv(thumbnailviewer.thumbBox)}, "resize")


} //END init() function

}

thumbnailviewer.createthumbBox() //Output HTML for the image thumbnail viewer
thumbnailviewer.dotask(window, function(){thumbnailviewer.init()}, "load") //Initialize script on page load
thumbnailviewer.dotask(window, function(){thumbnailviewer.cleanup()}, "unload")

Esto he utilizado para vincularlo alos css y js

<link rel="stylesheet" href="http://rseuskadi.zxq.net/thumbnailviewer.css" type="text/css" />
<script src="http://rseuskadi.zxq.net/thumbnailviewer.js" type="text/javascript"></script>

Saludos

[Jugoncan]

Bueno, espera, déjalo, jeje, gracias a Fracto ya tengo justo lo que buscabas, mira:
http://www.doknowevil.net/litebox/

Espero que te sirva y funcione, jeje
Saludos

[Adonis juarez]

http://www.cssplay.co.uk/menu/lightbox.html
visita esa direecion y en la parte inferios puedes descargarlo en zip

contesta si te sirvio...

[mauroc]

Estoy haciendo una web basandome en el curso y ya avance bastante. Quise agregarle este script para ver imagenes pero hay ciertas cosas que me generan dudas.
1. ¿Se puede cambiar el color para que quede mejor con mi web?
2. ¿Como le agrego o saco solapas?
3. ¿Como hago para que automaticamente me cargue las fotos de determinada carpeta y no tenga que escribir cada link?

Gracias.

Tambien busque y probe otros Scripts de internet, pero no parecen ser sencillos de usar/configurar. Me gustaría usar (si es que existe) uno donde con darle el link donde se encuentran las imagenes (su carpeta) y que este lo auto-configure al estilo MSN Spaces. O sea algo sencillo donde simplemente suba mis imagenes y estas se ordenen solas. Se que quizas paresca muy de vago pero ya que voy a subir una gran cantidad de fotos todas las semanas no puedo poner foto por foto, ya que seria una perdida de tiempo bastante grande.

[luisgomval]

Hola SilverWolf21

Ya probaste jquery yo hice algo similar a lo que tu quieres creo lo puedes ver en el siguiente vinculo usando jquery

http://www.visitelsalvador.com.sv/es.../gimagenes.php

El sitio de la gente de jquery es el siguiente:

http://plugins.jquery.com/project/Plugins/category/48

saludos y suerte.

[Canchal]

Bueno, espera, déjalo, jeje, gracias a Fracto ya tengo justo lo que buscabas, mira:
http://www.doknowevil.net/litebox/

Espero que te sirva y funcione, jeje
Saludos

Hola, he instalado este script en mi pagina y queda genial, me funciona todo perfecto menos una cosilla que no logro adivinar porque no funicona bien, y es que no me sale ni el next ni prev para pasar de imagenes. Lo demás todo perfecto.
Alguien sabe como puedo solucionar estos?