Image Thumbnail Viewer

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
aussie_clint
Forum Commoner
Posts: 41
Joined: Mon Jul 31, 2006 9:14 am
Location: Brisbane, Australia
Contact:

Image Thumbnail Viewer

Post by aussie_clint »

hi


can any one tell me how to get the script to show the first image without haveing to drag the mouse over



http://computerambo.com.au/testing/photo.html

Code: Select all

<html>

<head>
<script type="text/javascript" src="thumbnailviewer2.js" defer="defer">

/***********************************************
* Image Thumbnail Viewer II script- © Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

</script>
</head>

<body>
<br>
<br>
<br>
<br>



<p>&nbsp;</p>
<table width="200" border="0">
  <tr>
    <td rowspan="4"><div id="loadarea" style="width: 300px"></div></td>
    <td><a href="image1.jpg" rel="enlargeimage::mouseover" rev="loadarea" ><img border="0" src="t_image1.jpg" width="50" height="50" style="margin-bottom: 5px"></a></td>
  </tr>
  <tr>
    <td><a href="image2.jpg" rel="enlargeimage::mouseover" rev="loadarea" ><img border="0" src="t_image2.jpg" width="50" height="50" style="margin-bottom: 5px"></a></td>
  </tr>
  <tr>
    <td><a href="image3.jpg" rel="enlargeimage::mouseover" rev="loadarea" ><img border="0" src="t_image3.jpg" width="50" height="50" style="margin-bottom: 5px"></a></td>
  </tr>
  <tr>
    <td><a href="image4.jpg" rel="enlargeimage::mouseover" rev="loadarea" ><img border="0" src="t_image4.jpg" width="50" height="50" style="margin-bottom: 5px"></a></td>
  </tr>
</table>
</body>
</html>
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

Well this is something you'd have to do in the code considering that it looks as though the code is creating the div containing the image (?) but you have to create an initialization function (I'm surprised that they don't have one) to set the image src, and call it onLoad or elsewhere.

By the way, not to be picky, you're code is kind of messy. Line breaks and forced paragraphs are a bad way to align items. Use styles. Also, all of the images use the same style... I'd define that in a style class.
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Post by pickle »

Showing the actual script code would also be helpful :wink:
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
aussie_clint
Forum Commoner
Posts: 41
Joined: Mon Jul 31, 2006 9:14 am
Location: Brisbane, Australia
Contact:

Post by aussie_clint »

poops sorry

Code: Select all

// -------------------------------------------------------------------
// Image Thumbnail Viewer II- By Dynamic Drive, available at: http://www.dynamicdrive.com
// Last updated: Feb 5th, 2007
// -------------------------------------------------------------------

var thumbnailviewer2={
enableTitle: true, //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")
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Post by pickle »

Wow that's a mess. Thanks for posting it & I'm sorry I asked ;)

That's an awfully lot of code for a relatively simple concept:

Code: Select all

function swapImage(imageName)
{
   document.getElementById('swapImage').src = imageName;
}

Code: Select all

...
<body>
<img src = "make_this_the_url_of_the_first_image" id = "swapImage">
...
<img src = "image_1_thumbnail.jpg" onmouseover = "swapImage('image_1.jpg');" />
...
</body>
...

That's pretty much all you have to do.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
aussie_clint
Forum Commoner
Posts: 41
Joined: Mon Jul 31, 2006 9:14 am
Location: Brisbane, Australia
Contact:

Post by aussie_clint »

Thanks heaps, thats so much better
Post Reply