SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2005
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question anyone feel like helping (image viewer II)

    I'm not getting any help at dynamicdrive...maybe someone would be kind enough to help me here.

    i am looking to make a few changes to the script found here: http://www.dynamicdrive.com/dynamici...thumbnail2.htm

    basically, i want 2 small things added.
    1. add a default large image when the page is loaded (as it is now, only the thumbnails are shown onload).

    2. have the ability to set the max width / max height for the large images so they fit nicely within the loadarea div.

    here is main js code:

    Code:
    // -------------------------------------------------------------------
    // Image Thumbnail Viewer II- By Dynamic Drive, available at: http://www.dynamicdrive.com
    // Last updated: Feb 5th, 2007
    // -------------------------------------------------------------------
    
    var thumbnailviewer2={
    enableTitle: false, //Should "title" attribute of link be used as description?
    enableTransition: true, //Enable fading transition in IE?
    hideimgmouseout: false, //Hide enlarged image when mouse moves out of anchor link? (if enlarged image is hyperlinked, always set to false!)
    
    /////////////No need to edit beyond here/////////////////////////
    
    iefilterstring: 'progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.0 Duration=0.7)', //IE specific multimedia filter string
    iefiltercapable: document.compatMode && window.createPopup? true : false, //Detect browser support for IE filters
    preloadedimages:[], //array to preload enlarged images (ones set to display "onmouseover"
    targetlinks:[], //array to hold participating links (those with rel="enlargeimage:initType")
    alreadyrunflag: false, //flag to indicate whether init() function has been run already come window.onload
    
    loadimage:function(linkobj){
    var imagepath=linkobj.getAttribute("href") //Get URL to enlarged image
    var showcontainer=document.getElementById(linkobj.getAttribute("rev").split("::")[0]) //Reference container on page to show enlarged image in
    var dest=linkobj.getAttribute("rev").split("::")[1] //Get URL enlarged image should be linked to, if any
    var description=(thumbnailviewer2.enableTitle && linkobj.getAttribute("title"))? linkobj.getAttribute("title") : "" //Get title attr
    var imageHTML='<img src="'+imagepath+'" style="border-width: 0" />' //Construct HTML for enlarged image
    if (typeof dest!="undefined") //Hyperlink the enlarged image?
    imageHTML='<a href="'+dest+'">'+imageHTML+'</a>'
    if (description!="") //Use title attr of the link as description?
    imageHTML+='<br />'+description
    if (this.iefiltercapable){ //Is this an IE browser that supports filters?
    showcontainer.style.filter=this.iefilterstring
    showcontainer.filters[0].Apply()
    }
    showcontainer.innerHTML=imageHTML
    this.featureImage=showcontainer.getElementsByTagName("img")[0] //Reference enlarged image itself
    this.featureImage.onload=function(){ //When enlarged image has completely loaded
    if (thumbnailviewer2.iefiltercapable) //Is this an IE browser that supports filters?
    showcontainer.filters[0].Play()
    }
    this.featureImage.onerror=function(){ //If an error has occurred while loading the image to show
    if (thumbnailviewer2.iefiltercapable) //Is this an IE browser that supports filters?
    showcontainer.filters[0].Stop()
    }
    },
    
    hideimage:function(linkobj){
    var showcontainer=document.getElementById(linkobj.getAttribute("rev").split("::")[0]) //Reference container on page to show enlarged image in
    showcontainer.innerHTML=""
    },
    
    
    cleanup:function(){ //Clean up routine on page unload
    if (this.featureImage){this.featureImage.onload=null; this.featureImage.onerror=null; this.featureImage=null}
    this.showcontainer=null
    for (var i=0; i<this.targetlinks.length; i++){
    this.targetlinks[i].onclick=null
    this.targetlinks[i].onmouseover=null
    this.targetlinks[i].onmouseout=null
    }
    },
    
    addEvent: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
    this.iefiltercapable=(this.iefiltercapable && this.enableTransition) //True or false: IE filters supported and is enabled by user
    var pagelinks=document.getElementsByTagName("a")
    for (var i=0; i<pagelinks.length; i++){ //BEGIN FOR LOOP
    if (pagelinks[i].getAttribute("rel") && /enlargeimage:/i.test(pagelinks[i].getAttribute("rel"))){ //Begin if statement: Test for rel="enlargeimage"
    var initType=pagelinks[i].getAttribute("rel").split("::")[1] //Get display type of enlarged image ("click" or "mouseover")
    if (initType=="mouseover"){ //If type is "mouseover", preload the enlarged image for quicker display
    this.preloadedimages[this.preloadedimages.length]=new Image()
    this.preloadedimages[this.preloadedimages.length-1].src=pagelinks[i].href
    pagelinks[i]["onclick"]=function(){ //Cancel default click action
    return false
    }
    }
    pagelinks[i]["on"+initType]=function(){ //Load enlarged image based on the specified display type (event)
    thumbnailviewer2.loadimage(this) //Load image
    return false
    }
    if (this.hideimgmouseout)
    pagelinks[i]["onmouseout"]=function(){
    thumbnailviewer2.hideimage(this)
    }
    this.targetlinks[this.targetlinks.length]=pagelinks[i] //store reference to target link
    } //end if statement
    } //END FOR LOOP
    
    
    } //END init() function
    
    }
    
    
    if (document.addEventListener) //Take advantage of "DOMContentLoaded" event in select Mozilla/ Opera browsers for faster init
    thumbnailviewer2.addEvent(document, function(){thumbnailviewer2.alreadyrunflag=1; thumbnailviewer2.init()}, "DOMContentLoaded") //Initialize script on page load
    else if (document.all && document.getElementsByTagName("a").length>0){ //Take advantage of "defer" attr inside SCRIPT tag in IE for instant init
    thumbnailviewer2.alreadyrunflag=1
    thumbnailviewer2.init()
    }
    thumbnailviewer2.addEvent(window, function(){if (!thumbnailviewer2.alreadyrunflag) thumbnailviewer2.init()}, "load") //Default init method: window.onload
    thumbnailviewer2.addEvent(window, function(){thumbnailviewer2.cleanup()}, "unload")

    a thumbnail uses this link format:

    Code:
    <a href="http://www.nasa.gov/images/content/167040main_image_feature_738_ys_4.jpg" rel="enlargeimage::mouseover" rev="loadarea::http://www.dynamicdrive.com" title="This is an example">Thumbnail Example 1</a><br />
    <a href="http://www.nasa.gov/images/content/168177main_image_feature_749_ys_4.jpg" rel="enlargeimage::mouseover" rev="loadarea">Thumbnail Example 2</a><br />

    As shown, a thumbnail link looks something like this:

    Code:
    <a href="bulb.gif" rel="enlargeimage::mouseover" rev="loadarea">Thumbnail</a>
    Set the "href" attribute to the full URL to the enlarged image. Then, use the "rel" attribute to donate this link as a thumbnail link and how the enlarged image should be launched:

    rel="enlargeimage::mouseover"The two valid values for text following the delimiter are "mouseover" or "click".

    Moving on, use the "rev" attribute to specify within which container (ie: a DIV) the enlarged image should be shown, and optionally, the URL this image should be hyperlinked to:

    Code:
    rev="loadarea"
    In the above case, you're telling the script to load the enlarged image in the DIV (or some other element) on the page with ID="loadarea". Obviously remember to actually give this DIV such an ID declaration. If you want the enlarged image to be hyperlinked, extend the above declaration a delimiter followed by the desired URL:

    Code:
    rev="loadarea::http://www.dynamicdrive.com"
    This causes the image to be linked to the specified URL.

    Finally, in IE5.5+, an optional fading transition can be applied to the enlarged image when it's shown. Note however, in order for this feature to work, the container on your page showing the enlarged image must have an explicit width (and ideally height) declared. For example:

    Code:
    <div id="loadarea" style="width: 500px">
    This DIV will show my enlarged images!
    </div>
    This is simply a requirement of using IE's transition effects.


    Any help on this would be great. thanks.

    justin

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Well, you can start off with a default image by just putting it in the HTML:
    HTML Code:
    <div id="loadarea" style="width: 500px">
    <img src="default.jpg" alt="Some alt text">
    </div>
    Then you need to find a suitable spot to introduce some logic to ascertain whether resizing is necessary. This sort of code will resize an image based on whether it's bigger than a max width or height:
    Code Javascript:
      function resize(image) {
        var x = 500; // max width
        var y = 500; // max height
        var imageWidth = image.width;
        var imageHeight = image.height;
        if (imageWidth > x) {
          imageHeight = imageHeight * (x / imageWidth);
          imageWidth = x;
          if (imageHeight > y) {
            imageWidth = imageWidth * (y / imageHeight);
            imageHeight = y;
          }
        } else if (imageHeight > y) {
          imageWidth = imageWidth * (y / imageHeight);
          imageHeight = y;
          if (imageWidth > x) {
            imageHeight = imageHeight * (x / imageWidth);
            imageWidth = x;
          }
        }
        return [imageWidth, imageHeight];
      }
     
    var dimensions = resize(image);
    The argument passed to this function will have to be passed as an Image object, most likely the preloaded image from the preloading function. You'll have to add an onload function for when the image has finished preloading, so that when it has loaded, then the resizing function is called. The array it returns is then used for the HTML:

    HTML Code:
    var imageHTML='<img src="'+imagepath+'" style="border-width: 0" width="'+dimensions[0]+'" height="'+dimensions[1]+'" />' //Construct HTML for enlarged image
    I'd just like to say that like most Dynamic Drive scripts I've come across this one is quite horrible and unnecessarily complex. In fact, practically everything it does could be achieved with CSS only:
    http://cssplay.co.uk/menu/photo_album
    http://cssplay.co.uk/menu/photo_simple
    http://cssplay.co.uk/menu/gallery.html
    http://cssplay.co.uk/menu/scroll_gallery


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
  •