Advanced Search

Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: need help editing thumbnailviewer.js

  1. #1
    Join Date
    Feb 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default need help editing thumbnailviewer.js

    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!

  2. #2
    Join Date
    Sep 2006
    Location
    St. George, UT
    Posts
    2,769
    Thanks
    3
    Thanked 157 Times in 155 Posts

    Default

    Find this in the code and add the parts in red.

    Code:
    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.

    Code:
    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)

  3. #3
    Join Date
    Feb 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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?

  4. #4
    Join Date
    Sep 2006
    Location
    St. George, UT
    Posts
    2,769
    Thanks
    3
    Thanked 157 Times in 155 Posts

    Default

    Your page is in violation of Dynamic Drive's usage terms, 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.)

    Code:
    // -------------------------------------------------------------------
    // 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:

    Code:
    #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.

  5. #5
    Join Date
    Feb 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  6. #6
    Join Date
    Sep 2006
    Location
    St. George, UT
    Posts
    2,769
    Thanks
    3
    Thanked 157 Times in 155 Posts

    Default

    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?

  7. #7
    Join Date
    Feb 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  8. #8
    Join Date
    Sep 2006
    Location
    St. George, UT
    Posts
    2,769
    Thanks
    3
    Thanked 157 Times in 155 Posts

    Default

    I noticed in your source (actually in thumbnailviewer.js), on the last few lines you have this.

    Code:
    //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.

  9. #9
    Join Date
    Feb 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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!

  10. #10
    Join Date
    Sep 2006
    Location
    St. George, UT
    Posts
    2,769
    Thanks
    3
    Thanked 157 Times in 155 Posts

    Default

    No problem, but one thing that you need to do is reinstate the credit notice in your source. This credit will look like this:

    Code:
    /***********************************************
    * 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.
    Last edited by thetestingsite; 02-26-2007 at 02:26 AM.

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
  •