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.
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".
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!)
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!
|
|
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:
<a href="^GEMDIR/oscar.jpg" title="Oscar, the youngest and most spoiled cat!" onClick="return enlarge('^GEMDIR/oscar.jpg',event,'center',250,88)">
My Cat Oscar</a>
THUMBNAIL IMAGE LINK CODE:
<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>
THUMBNAIL IMAGE LINK CODE, large image is centered:
<a href="^GEMDIR/oscar.jpg" onClick="return enlarge('^GEMDIR/oscar.jpg',event,'center',250,88)">
<img src="^GEMDIR/tn_oscar.jpg" border="0" alt="Oscar, the youngest and most spoiled cat!"></a>
THUMBNAIL IMAGE LINK CODE with the purple border (shown in B above):
<a href="^GEMDIR/oscar.jpg" onClick="return enlarge('^GEMDIR/oscar.jpg',event)">
<img src="^GEMDIR/tn_oscar.jpg" border="2" style="border-color=#6600CC" alt="Oscar, the youngest and most spoiled cat!" title="Oscar, the youngest and most spoiled cat!"></a>
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!
|