PHP Photo Album script v2.11 - dark background for thumbnail viewer

[chuckyschl]

1) Script Title: PHP Photo Album script v2.11
2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...m#.Ujwf53A78aE
3) Describe problem:

As written in the headline, want to grey out the rest of the page when the larger image in the thumbnail viewer is shown - an usual effect nowadays. Any ideas?

Thanks, Chuck

[jscheuer1]

One option is to replace the native larger image viewer with a Lightbox type script. My favorites for this are FancyBox 1.3.4, or SlimBox 2, both for jQuery. But other Lightbox type scripts can be used. And, since all of these Lightbox type scripts allow for captions, and most allow for galleries, once we get into this we can have the descriptions/captions for the thumbnails also be the captions in the larger view, and if you like have the larger view have next/previous capability to cycle through the entire album.

Once we settle on the Lightbox type script to use, and I get a bit of time - like over the weekend, I can show how it's down. You can also look at these threads:

http://www.dynamicdrive.com/forums/s...HP-photo-album

http://www.dynamicdrive.com/forums/s...nside-Lightbox

The other option of course would be to simply stick in an overlay div for the existing larger image viewer. If that's all you really want, that might be easier. Still it would take a little time. I have to run now.

Let me know what appeals to you most, so that I know what to work on when I get back.

Oh, and here's a demo of one way this can be done using FancyBox 1.3.4:

http://www.reddotcuisine.com/gallery.html

[vwphillips]

modifying the existing code

/////////Following is thumbnailviewer(), a plugin to PHP Photo Album for enlarging thumbnail images/////////////////

var thumbnailviewer={
enableAnimation: true, //Enable fading animation?
fadeDuration: 500, //duration of fade animation in milliseconds
definefooter: '<div class="footerbar">CLOSE X</div>', //Define HTML for footer interface
defineLoading: '<img src="loading.gif" /> Loading Image...', //Define HTML for "loading" div
maskclass:'mask',

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

opacitystring: 'filter:progid:DXImageTransform.Microsoft.alpha(opacity=10); -moz-opacity: 0.1; opacity: 0.1',
animateobj: {curdegree:0, starttime:null, opacitytimer:null},

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.sbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body //create reference to common "body" across doctypes
    var msk=document.createElement('DIV'),mk=msk.cloneNode(false);
    mk.style.position='absolute';
    msk.style.visibility=mk.style.visibility='hidden';
    mk.style.bottom=mk.style.right='0px';
    mk.style.width=mk.style.height='0px';
    mk.style.border='solid red 1px';
    document.body.appendChild(mk);
    msk.style.position='fixed';
    msk.style.left=msk.style.top='0px';
    msk.style.width='100%';
    this.mk=mk;
    this.msk=msk;
    msk.onclick=function(){ thumbnailviewer.closeit(); }
},


centerDiv:function(divobj){ //Centers a div element on the page
	var winattrs={x:window.pageXOffset || this.sbody.scrollLeft, y:window.pageYOffset || this.sbody.scrollTop, w:window.innerWidth || this.sbody.clientWidth, h:window.innerHeight || this.sbody.clientHeight}
	this.winattrs=winattrs
	var divattrs={w:divobj.offsetWidth, h:divobj.offsetHeight}
	divobj.style.left=winattrs.x + winattrs.w/2 - divattrs.w/2 + "px"
	divobj.style.top=winattrs.y + (winattrs.h>divattrs.h? winattrs.h/2 - divattrs.h/2 : 10) + "px"
	divobj.style.visibility="visible"
    if (this.maskclass){
     if (!this.msk.className){
      this.msk.className=this.maskclass;
      document.body.appendChild(this.msk);
      document.body.appendChild(this.mk);
     }
     this.msk.style.height=this.mk.offsetTop+'px';
     this.msk.style.visibility='visible';
    }
},

showthumbBox:function(fit2screen){ //Show ThumbBox div
	if (fit2screen && parseInt(this.featureImage.offsetWidth)>(this.winattrs.w-70)){
		this.featureImage.style.width=this.winattrs.w-70+"px"
	}
	thumbnailviewer.thumbLoading.style.visibility="hidden" //Hide "loading" div
	if (this.enableAnimation) //if animation enabled, hide image first before applying opacity
		this.featureImage.style.visibility="hidden"
	this.centerDiv(this.thumbBox)
	if (this.enableAnimation){ //If fading animation enabled
		this.animateobj.curdegree=0
		this.featureImage.style.visibility="visible"
		this.animateobj.starttime=new Date().getTime() //get time just before animation is run
		this.animateobj.opacitytimer=setInterval("thumbnailviewer.opacityanimation()", 10)
	}
},


loadimage:function(imgsrc, imgw, imgh){ //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 styled=(this.enableAnimation? this.opacitystring+';' : '') +(imgw && imgh? 'width:'+parseInt(imgw)+'px; height:'+parseInt(imgh)+'px;' : '')
	var imageHTML='<img src="'+imgsrc+'" style="'+styled+'" />' //Construct HTML for shown image
	this.centerDiv(this.thumbLoading, imgw, imgh) //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
	if (this.featureImage.complete)
		thumbnailviewer.showthumbBox(imgw=="fit2screen"? true : false)
	else{
		this.featureImage.onload=function(){ //When target image has completely loaded
			thumbnailviewer.showthumbBox(imgw=="fit2screen"? true : false) //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=imgsrc
	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
	}
},

setopacity:function(el, value){
	el.style.opacity=value
	if (typeof el.style.opacity!="string"){ //if it's not a string (ie: number instead), it means property not supported
		el.style.MozOpacity=value
		if (el.filters){
			el.style.filter="progid:DXImageTransform.Microsoft.alpha(opacity="+ value*100 +")"
		}
	}
},


opacityanimation:function(){ //Gradually increase opacity function
var elapsed=new Date().getTime()-this.animateobj.starttime //get time animation has run
	if (elapsed<this.fadeDuration){
		this.setopacity(this.featureImage, this.animateobj.curdegree)
	}
	else{
		clearInterval(this.animateobj.opacitytimer)
		this.setopacity(this.featureImage, 1)
	}
	this.animateobj.curdegree=(1-Math.cos((elapsed/this.fadeDuration)*Math.PI)) / 2

},

closeit:function(){ //Close "thumbbox" div function
	if (typeof this.animateobj.opacitytimer!="undefined")
		clearInterval(this.animateobj.opacitytimer)
	this.thumbBox.style.left="-4000px"
	this.thumbBox.style.top="-4000px"
	this.msk.style.visibility=this.thumbBox.style.visibility="hidden"
	this.thumbImage.innerHTML=""
}

}

thumbnailviewer.createthumbBox() //Output HTML for the image thumbnail viewer

window.onresize=function(){
	if (thumbnailviewer && thumbnailviewer.thumbBox.style.visibility=="visible")
		thumbnailviewer.centerDiv(thumbnailviewer.thumbBox)
}

additional css

.mask {
  background-Color:#FFFFCC;z-Index:5;
/* Moz */
  opacity: .5;
/* IE5-7 */
  filter: alpha(opacity=50);
/* IE8 */
   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}