PDA

View Full Version : need help editing thumbnailviewer.js



dmccaulley
02-25-2007, 11:51 PM
Image Thumbnail Viewer

http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm

ok... here is what I am tryign to do. The script works fine, but I want to modify it slightly.

Check this URL: http://www.dirkverbeuren.com/mediapictures.php

on that page scroll down to the "promo pics" section and click the second (middle) picture. I used the "title" atribute to put in a credit on the image, however be default it shows the info right under the picture itself. What I am trying to do is get that info to display in the footer with "CLOSE X" and align it to the left.

Can anyone help me with this? its driving me nuts!

thetestingsite
02-26-2007, 12:02 AM
Find this in the code and add the parts in red.



createthumbBox:function(){
//write out HTML for Image Thumbnail Viewer plus loading div
document.write('<div id="thumbBox" onClick="thumbnailviewer.closeit()"><div id="thumbImage"></div>')

if (this.enableTitle && link.getAttribute("title")) {//Use title attr of the link as description?

document.write(link.getAttribute("title"));

}

document.write(this.definefooter+'</div>')

document.write('<div id="thumbLoading">'+this.defineLoading+'</div>')


Not tested, but should work.


Added later: Also; to make sure it doesn't add the link underneath the picture, find this part and take out the parts in red.



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 src="'+link.getAttribute("href")+'" style="'+this.opacitystring+'" />' //Construct HTML for shown image
if (this.enableTitle && link.getAttribute("title")) //Use title attr of the link as description?
imageHTML+='<br />'+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)

dmccaulley
02-26-2007, 01:02 AM
i tried those changes you suggested. The second bit by itself will remove the title info from beign displayed (I had actualyl found that earlier today and tested it). The problem I have now is with the other change you mentioned... when I view the page it shows up totally blank. When I revert back to the default code it displays fine. Any idea whats up with that?

thetestingsite
02-26-2007, 01:49 AM
Your page is in violation of Dynamic Drive's usage terms (http://www.dynamicdrive.com/notice.htm), which, among other things, states that the credit notice inside script must stay intact. Please reinstate the notice first.

I noticed that after viewing your page again. Anyways, I found my mistake, and corrected it. Here is the modified code (still needs CSS modification, but either you or another member could help you out with that.)



// -------------------------------------------------------------------
// Image Thumbnail Viewer Script- By Dynamic Drive, available at: http://www.dynamicdrive.com
// Last updated: Jan 22nd, 2007
// -------------------------------------------------------------------

var thumbnailviewer={
enableTitle: true, //Should "title" attribute of link be used as description?
enableAnimation: true, //Enable fading animation?
definefooter: '<div class="footerbar">CLOSE X</div>', //Define HTML for footer interface
defineLoading: '<img src="loading.gif" /> Loading Image...', //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>')

if (this.enableTitle) {
document.write('<div id="caption"></div>');
}

document.write('</div><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 src="'+link.getAttribute("href")+'" style="'+this.opacitystring+'" />' //Construct HTML for shown image

if (this.enableTitle && link.getAttribute("title")) { //Use title attr of the link as description?

document.getElementById('caption').innerHTML = link.getAttribute("title") + this.definefooter;
}

else {
document.getElementById('caption').innerHTML = this.definefooter;
}

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")


And this is thumbnailviewer.css:



#thumbBox{ /*Outermost DIV for thumbnail viewer*/
position: absolute;
left: 0;
top: 0;
width: auto;
padding: 10px;
padding-bottom: 0;
background: #313131;
visibility: hidden;
z-index: 10;
cursor: hand;
cursor: pointer;
}

#caption {
color: white;
text-align: left;
}

#thumbBox .footerbar{ /*Footer DIV of thumbbox that contains "close" link */
font: bold 16px Tahoma;
letter-spacing: 5px;
line-height: 1.1em;
color: white;
padding: 5px 0;
text-align: right;
}


#thumbBox #thumbImage{ /*DIV within thumbbox that holds the enlarged image */
background-color: white;
}

#thumbLoading{ /*DIV for showing "loading" status while thumbbox is being generated*/
position: absolute;
visibility: hidden;
border: 1px solid black;
background-color: #EFEFEF;
padding: 5px;
z-index: 5;
}


That is thumbnailviewer.js. Hope this helps.

dmccaulley
02-26-2007, 02:48 AM
hmm, still no luck. Now it just opens the image in the browser window, and in the lower left hand corner on IE it shows an error on the page. Im about to pull my hair out on this one, lol... its had me stumped all day. Any other ideas?

I really appreciate you trying to help me out with this. thank you.

thetestingsite
02-26-2007, 02:59 AM
Odd, I have tried it in IE6, IE7, FF 2.0.0.1 and FF 2.0.0.2 (Win XP Home and Pro). It seems to work fine for me in all of those browsers (and operating systems). Can you create a test page and post a link to it (or PM it to me) so that I can see if maybe there is something else conflicting with it?

dmccaulley
02-26-2007, 03:05 AM
right now this link has the modified .js and .css you posted here...

http://www.dirkverbeuren.com/mediapictures.php

I figured I would leave it up there so you could view the source or anything else you might need.

btw, i dont see an option ot PM anywhere... sorry.

thetestingsite
02-26-2007, 03:10 AM
I noticed in your source (actually in thumbnailviewer.js), on the last few lines you have this.



//Initialize script on page load
thumbnailviewer.dotask(window, function(){thumbnailviewer.cleanup()}, "unload")And this is thumbnailviewer.css:


Notice the part in red, you need to take that out being as that is not part of the code at all.

This should fix your problem. Hope this helps.

dmccaulley
02-26-2007, 03:16 AM
DOH! I didnt even notice that last line! I just copied and pasted to quick, must have picked that up by mistake. It seems to be working now. Now I just need to edit the css file so I should be up and running 100% in a few mins. Thanks so much for the help man. I really appreciate it!

thetestingsite
02-26-2007, 03:19 AM
No problem, but one thing that you need to do is reinstate the credit notice in your source. This credit will look like this:



/***********************************************
* Image Thumbnail Viewer Script- &#169; Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/


As to give proper credit to those who actually created this script.

dmccaulley
02-26-2007, 05:18 AM
just did that, altho I dont remember taking out the credits... i never do that. Either way its back in.

I do have one last question. If you go back to the page and click on that one picture (2nd one under "promo pics") you will now see the credit displayed correctly. How can I get the credit text to display on the same line as the CLOSE text... right now the credit text is actually above it, and it is making the footer larger than it needs to be. I assume this is just a fix in the css but I cant seem to get it to line up.

thanks agian!