السلام عليكم ورحمة الله وبركاته
أولا: نزل السكربت من هنا
Highslide JS - JavaScript thumbnail viewer
ثانيا: انظر المثال example-no-outline.html فهو الموجود بالموقع.
ثالثا: دعواتك لي بالتوفيق.
كود HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Highslide JS</title> <!--
1 ) Reference to the file containing the javascript.
This file must be located on your server.
--> <script type="text/javascript" src="highslide/highslide.js"></script> <!--
2) Optionally override the settings defined at the top
of the highslide.js file. The parameter hs.graphicsDir is important!
--> <script type="text/javascript">
hs.graphicsDir = 'highslide/graphics/';
hs.outlineType = null;
</script> <!--
3) These CSS-styles are necessary for the script to work. You may also put
them in an external CSS-file. See the webpage for documentation.
--> <style type="text/css">
* {
font-family: Verdana, Helvetica;
font-size: 10pt;
}
body {
background-color: silver;
}
.highslide {
cursor: url(highslide/graphics/zoomin.cur), pointer;
outline: none;
}
.highslide-active-anchor img {
visibility: hidden;
}
.highslide img {
border: 2px solid gray;
}
.highslide:hover img {
border: 2px solid white;
}
.highslide-wrapper {
background: white;
}
.highslide-image {
border: 2px solid white;
}
.highslide-image-blur {
}
.highslide-caption {
display: none;
border: 2px solid white;
border-top: none;
font-family: Verdana, Helvetica;
font-size: 10pt;
padding: 5px;
background-color: white;
}
.highslide-loading {
display: block;
color: black;
font-size: 8pt;
font-family: sans-serif;
font-weight: bold;
text-decoration: none;
padding: 2px;
border: 1px solid black;
background-color: white;
padding-left: 22px;
background-image: url(highslide/graphics/loader.white.gif);
background-repeat: no-repeat;
background-position: 3px 1px;
}
a.highslide-credits,
a.highslide-credits i {
padding: 2px;
color: silver;
text-decoration: none;
font-size: 10px;
}
a.highslide-credits:hover,
a.highslide-credits:hover i {
color: white;
background-color: gray;
}
a.highslide-full-expand {
background: url(highslide/graphics/fullexpand.gif) no-repeat;
display: block;
margin: 0 10px 10px 0;
width: 34px;
height: 34px;
}
/* These must always be last */
.highslide-display-block {
display: block;
}
.highslide-display-none {
display: none;
}
</style> </head> <body> <div> <!--
4) This is how you mark up the thumbnail image with an anchor tag around it.
The anchor's href attribute defines the URL of the full-size image.
--> <a id="thumb1" href="images/full-image.jpg" class="highslide" onclick="return hs.expand(this)"> <img src="images/thumbnail.jpg" alt="Highslide JS"
title="Click to enlarge" height="120" width="107" /></a> <!--
5 (optional). This is how you mark up the caption. The caption must be directly
after the anchor above.
--> <div class="highslide-caption">
This caption can be styled using CSS.
</div> </div> </body> </html> باختصار أهم شيء بعد تضمين ملف الجافاسكربت و الستايل css هي هذه الخطوة:
كود HTML:
<a id="thumb1" href="images/full-image.jpg" class="highslide" onclick="return hs.expand(this)"> <img src="images/thumbnail.jpg" alt="Highslide JS"
title="Click to enlarge" height="120" width="107" /></a>
ولأكون أكثر تحديدا هنا:
كود HTML:
onclick="return hs.expand(this)"
المواضيع المشابهه 
هل هذا أجاكس . . . أرجوا الشرح والتعليم 
