PDA

View Full Version : PHP Photo Album script v2.11 - dark background for thumbnail viewer



chuckyschl
09-20-2013, 10:19 AM
1) Script Title: PHP Photo Album script v2.11
2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/php-photoalbum.htm#.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
09-20-2013, 04:20 PM
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/showthread.php?66002-How-to-display-description-on-large-image-in-PHP-photo-album

http://www.dynamicdrive.com/forums/showthread.php?65828-PHP-Photo-Album-script-v2-11-Captions-Inside-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
09-21-2013, 10:08 AM
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)";
}