Test Index · Photo Borders · Table of sliced images - Rounded corners · Sliced images and manually linked · Overlap Images · Create a Watermark · Gif Png Transparency · Buttons-Image Links · Image Names · Image Theft · Lake Applet · Other applets · Slideshow1 · Slideshow2 · Slideshow3 · Galleries · DD Thumbnail Viewer · image map · xara thumbnail · Random Image · LOGO BRANDING · Animated Image · photo with sound

Implement the Thumbnail Viewer

The demonstration on this page is designed to show how the Thumbnail Viewer Script offered on Dynamic Drive is implemented on CSB and Trellix websites. A bit of tweaking is required. If you are not using CSB or Trellix, REMOVE the ^gEMDIR/ from the script and use the script as otherwise noted! Thanks Steve for pointing me to it. It is now a favorite!

Prepare your images. You should have two for each image. A thumbnail size, and a full size image. Always remember to limit the image size for the web! Check the size of your finished image. Images should be "optimized so that they load faster. Images should be between 1kb and 60kb in size (smaller is good as long as the quality remains!). When you insert images that are not optimized, the webpage will load VERY SLOWLY! Most Photo programs have a compression/optimize/make ready for website feature. Try your HELP section in the program.

DEMO: Mouseover, then click a thumbnail or link!

text style link: My Cat Oscar

THE CODE BELOW IS MODIFIED FOR USE IN CSB:

Also modified to allow a floating tooltip when you mouseover the thumbnail image or text link!

The version at Dynamic Drive does NOT offer that nice item!

Download ORIGINAL Script from Dynamic Drive

There are 3 parts of the Dynamic Drive script.

We will only need two parts for CSB/Trellix and none of it is put into the HEAD section!

1) DD's step 1 and 2 are combined in this step.

To capture the code, press Select All then COPY the contents.

Paste code into an insert > HTML (webgem in Trellix) near the top of your web page.

This part of the script needs no further modification.

Select All
<style type="text/css"> #showimage{ position:absolute; visibility:hidden; border: 1px solid gray; } #dragbar{ cursor: hand; cursor: pointer; background-color: #EFEFEF; min-width: 100px; /*NS6 style to overcome bug*/ } #dragbar #closetext{ font-weight: bold; margin-right: 1px; } </style> <script type="text/javascript"> /*********************************************** * Image Thumbnail viewer- © Dynamic Drive (www.dynamicdrive.com) * Last updated Sept 26th, 03'. This notice must stay intact for use * Visit http://www.dynamicdrive.com/ for full source code * Modified for use in CSB and Trellix by Samantha Conway * MUST change gEMDIR to GEMDIR before using the 2nd part - the linking codes!!! * Also added floating tooltip to the text link and thumbnail! ***********************************************/ var ie=document.all var ns6=document.getElementById&&!document.all function ietruebody(){ return (document.compatMode && document.compatMode!="BackCompat" && !window.opera)? document.documentElement : document.body } function enlarge(which, e, position, imgwidth, imgheight){ if (ie||ns6){ crossobj=document.getElementById? document.getElementById("showimage") : document.all.showimage if (position=="center"){ pgyoffset=ns6? parseInt(pageYOffset) : parseInt(ietruebody().scrollTop) horzpos=ns6? pageXOffset+window.innerWidth/2-imgwidth/2 : ietruebody().scrollLeft+ietruebody().clientWidth/2-imgwidth/2 vertpos=ns6? pgyoffset+window.innerHeight/2-imgheight/2 : pgyoffset+ietruebody().clientHeight/2-imgheight/2 if (window.opera && window.innerHeight) //compensate for Opera toolbar vertpos=pgyoffset+window.innerHeight/2-imgheight/2 vertpos=Math.max(pgyoffset, vertpos) } else{ var horzpos=ns6? pageXOffset+e.clientX : ietruebody().scrollLeft+event.clientX var vertpos=ns6? pageYOffset+e.clientY : ietruebody().scrollTop+event.clientY } crossobj.style.left=horzpos+"px" crossobj.style.top=vertpos+"px" crossobj.innerHTML='<div align="right" id="dragbar"><span id="closetext" onClick="closepreview()">Close</span> </div><img src="'+which+'">' crossobj.style.visibility="visible" return false } else //if NOT IE 4+ or NS 6+, simply display image in full browser window return true } function closepreview(){ crossobj.style.visibility="hidden" } function drag_drop(e){ if (ie&&dragapproved){ crossobj.style.left=tempx+event.clientX-offsetx+"px" crossobj.style.top=tempy+event.clientY-offsety+"px" } else if (ns6&&dragapproved){ crossobj.style.left=tempx+e.clientX-offsetx+"px" crossobj.style.top=tempy+e.clientY-offsety+"px" } return false } function initializedrag(e){ if (ie&&event.srcElement.id=="dragbar"||ns6&&e.target.id=="dragbar"){ offsetx=ie? event.clientX : e.clientX offsety=ie? event.clientY : e.clientY tempx=parseInt(crossobj.style.left) tempy=parseInt(crossobj.style.top) dragapproved=true document.onmousemove=drag_drop } } document.onmousedown=initializedrag document.onmouseup=new Function("dragapproved=false") </script> <div id="showimage"></div>

2) Choose how you want to link to the large images.

The DEMO above used 4 codes: 1 text link (A) and 3 image links (B) codes shown below.

Use either A or B for EACH LINK you want to display in your "gallery".

A. TEXT LINK to LARGE PHOTO Text link >>>> My Cat Oscar

To capture the code, press Select All then COPY the contents.

MUST change each gEMDIR to GEMDIR before using code!

(If you are not using CSB or Trellix, REMOVE the ^gEMDIR/ from the script!)

Select All
<a href="^gEMDIR/oscar.jpg" title="Oscar, the youngest and most spoiled cat!" onClick="return enlarge('^gEMDIR/oscar.jpg',event,'center',300,375)"> My Cat Oscar</a>

Paste the code into an insert > HTML (webgem in Trellix) where you want the text link.

Put only your large image into the WEBCOMPONENT part of the window.

(Not using CSB/Trellix? Use FTP, etc to upload images to your own website)

B. THUMBNAIL PHOTO to LARGE PHOTO This one has a border>>

To capture the code, press Select All then COPY the contents.

MUST change each gEMDIR to GEMDIR before using code!

Select All
<a href="^gEMDIR/oscar.jpg" onClick="return enlarge('^gEMDIR/oscar.jpg',event)"> <img src="^gEMDIR/tn_oscar.jpg" border="0" alt="Oscar, the youngest and most spoiled cat!" title="Oscar, the youngest and most spoiled cat!"></a>

Paste code into an insert > HTML (webgem in Trellix) where you want the thumbnail.

This time put your large and image into the WEBCOMPONENT part of the window.

(Not using CSB/Trellix? Use FTP, etc to upload images to your own website)

NOTES:

^GEMDIR/ - Not using CSB/Trellix? Remove this and use FTP or file manager to upload image files to your webspace directly. Then enter the full path to the image.

^GEMDIR/ - Using CSB/Trellix? MUST have this in ALL CAPS for the code to work. CSB will upload the files to your webspace for you if you use this and put the images into webcomponents!

oscar.jpg - change the LARGE image names to match yours.

Oscar, the youngest and most spoiled cat! - the image description in both alt and title tags

(FYI: Internet Explorer uses ALT tag, Firefox uses TITLE tag to produce the tooltip for images!)

tn_oscar.jpg - change the THUMBNAIL image names to match yours.

border ="2" style="border-color=#6600CC" - add a border around your thumbnail image with a simple change here! This border DOES show in Mozilla!

,'center',250,88 - Note the following code examples. The last three parameters are optional and should only be set if you wish the enlarged image to be centered on the page (,'center',250,88),

This optional code can be used with the TEXT and the THUMBNAIL codes as shown below!

The color changes, etc can effect functionality! Use the Select All above and modify!

TEXT LINK CODE:

<a href="^GEMDIR/oscar.jpg" title="Oscar, the youngest and most spoiled cat!" onClick="return enlarge('^GEMDIR/oscar.jpg',event)">My Cat Oscar</a>

TEXT LINK CODE, large image is centered:

My Cat Oscar</a>

THUMBNAIL IMAGE LINK CODE:

THUMBNAIL IMAGE LINK CODE, large image is centered:

THUMBNAIL IMAGE LINK CODE with the purple border (shown in B above):

TWO IMPORTANT TIPS:

1) ALWAYS make sure your image names are exactly the same in the code and the name. No spaces or characters (other than _) and caps count! TN_image is not the same as tn_image. Recommend using only lowercase instead of caps.

2) Optimize your photos for fastest loading. Don't put an image on your site directly from your digital camera. It will take WAY too long to load!