Advanced Search

Results 1 to 3 of 3

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

  1. #1
    Join Date
    Sep 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,677
    Thanks
    43
    Thanked 3,126 Times in 3,092 Posts
    Blog Entries
    12

    Default

    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
    Last edited by jscheuer1; 09-20-2013 at 04:55 PM. Reason: add demo link
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,708
    Thanks
    2
    Thanked 388 Times in 383 Posts

    Default

    modifying the existing code

    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

    Code:
    .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)";
    }
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Similar Threads

  1. Photo Album script v2.0/Image Thumbnail viewer II
    By ghammond in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 06-06-2008, 08:09 PM
  2. Photo Album/Image Thumbnail Viewer II/Light Box Combo
    By vestagirl in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 05-07-2008, 12:04 AM
  3. Photo Album 2.0 + Image Thumbnail Viewer
    By Foundas in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 04-23-2008, 10:48 AM
  4. Replies: 1
    Last Post: 02-13-2007, 02:22 PM
  5. CSS photo album/ thumbnail viewer help
    By snsimon36 in forum CSS
    Replies: 0
    Last Post: 11-27-2006, 02:52 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •