------------------------------------------------------------------------------------
Place it in header
------------------------------------------------------------------------------------
<1script type="text/javascript" src="highslide.js"><1/script>
<1script type="text/javascript">
hs.graphicsDir = 'js/graphics/';
hs.outlineType = 'rounded-white';
hs.outlineWhileAnimating = true;
<1/script>
------------------------------------------------------------------------------------
<1div class="highslide-html-content" id="highslide-html-newsletter">
<1div class="highslide-header">
<1ul>
<1li class="highslide-move">
<1ahref="http://www.blogger.com/post-create.g?blogid=8488539832279332237#" onclick="return false">Move
<1/li>
<1li class="highslide-close">
<1a href="http://www.blogger.com/post-create.g?blogID=8488539832279332237#" onclick="return hs.close(this)">Close
<1/ul>
<1/div>
<1div class="highslide-body">
<1!-->
<1/div>
<1div class="highslide-footer">
<1div>
<1span class="highslide-resize" title="Resize">
<1/span> <1/div>
<1/div>
<1/div>
Remove 1 in every html tag
------------------------------------------------------------------------------------
Style sheet
Save the coding as slide.css
------------------------------------------------------------------------------------
* {
font-family: Verdana, Helvetica;
font-size: 10pt;
}
.highslide-html {
background-color:#FFC1FF;
}
.highslide-html-blur {
}
.highslide-html-content {
position: absolute;
display: none;
}
.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;
}
/* Styles for the popup */
.highslide-wrapper {
background-color: white;
}
.highslide-wrapper .highslide-html-content {
width: 350px;
padding: 5px;
}
.highslide-wrapper .highslide-header div {
}
.highslide-wrapper .highslide-header ul {
margin: 0;
padding: 0;
text-align: right;
}
.highslide-wrapper .highslide-header ul li {
display: inline;
padding-left: 1em;
}
.highslide-wrapper .highslide-header ul li.highslide-previous, .highslide-wrapper .highslide-header ul li.highslide-next {
display: none;
}
.highslide-wrapper .highslide-header a {
font-weight: bold;
color: red;
text-transform: uppercase;
text-decoration: none;
}
.highslide-wrapper .highslide-header a:hover {
color: black;
}
.highslide-wrapper .highslide-header .highslide-move a {
cursor: move;
}
.highslide-wrapper .highslide-footer {
height: 11px;
}
.highslide-wrapper .highslide-footer .highslide-resize {
float: right;
height: 11px;
width: 11px;
background: url(highslide/graphics/resize.gif);
}
.highslide-wrapper .highslide-body {
}
.highslide-move {
cursor: move;
}
.highslide-resize {
cursor: nw-resize;
}
/* These must be the last of the Highslide rules */
.highslide-display-block {
display: block;
}
.highslide-display-none {
display: none;
}
------------------------------------------------------------------------------
Now the highslide.js
var hs = {
// Apply your own settings here, or override them in the html file.
graphicsDir : 'highslide/graphics/',
restoreCursor : 'zoomout.cur', // necessary for preload
expandSteps : 10, // number of steps in zoom. Each step lasts for duration/step milliseconds.
expandDuration : 250, // milliseconds
restoreSteps : 10,
restoreDuration : 250,
marginLeft : 15,
marginRight : 15,
marginTop : 15,
marginBottom : 15,
zIndexCounter : 1001, // adjust to other absolutely positioned elements
restoreTitle : 'Click to close image, click and drag to move. Use arrow keys for next and previous.',
loadingText : 'Loading...',
loadingTitle : 'Click to cancel',
loadingOpacity : 0.75,
focusTitle : 'Click to bring to front',
allowMultipleInstances: true,
numberOfImagesToPreload : 5,
captionSlideSpeed : 1, // set to 0 to disable slide in effect
padToMinWidth : false, // pad the popup width to make room for wide caption
outlineWhileAnimating : 2, // 0 = never, 1 = always, 2 = HTML only
outlineStartOffset : 3, // ends at 10
fullExpandTitle : 'Expand to actual size',
fullExpandPosition : 'bottom right',
fullExpandOpacity : 1,
showCredits : true, // you can set this to false if you want
creditsText : 'Powered by Highslide JS',
creditsHref : 'http://vikjavev.no/highslide/',
creditsTitle : 'Go to the Highslide JS homepage',
enableKeyListener : true,
// These settings can also be overridden inline for each image
captionId : null,
spaceForCaption : 30, // leaves space below images with captions
slideshowGroup : null, // defines groups for next/previous links and keystrokes
minWidth: 200,
minHeight: 200,
allowSizeReduction: true, // allow the image to reduce to fit client size. If false, this overrides minWidth and minHeight
outlineType : 'drop-shadow', // set null to disable outlines
wrapperClassName : 'highslide-wrapper', // for enhanced css-control
// END OF YOUR SETTINGS
// declare internal properties
preloadTheseImages : [],
continuePreloading: true,
expanders : [],
overrides : [
'allowSizeReduction',
'outlineType',
'outlineWhileAnimating',
'spaceForCaption',
'captionId',
'captionText',
'captionEval',
'wrapperClassName',
'minWidth',
'minHeight',
'slideshowGroup',
'easing',
'easingClose',
'fadeInOut'
],
overlays : [],
faders : [],
pendingOutlines : {},
clones : {},
ie : (document.all && !window.opera),
safari : /Safari/.test(navigator.userAgent),
geckoMac : /Macintosh.+rv:1\.[0-8].+Gecko/.test(navigator.userAgent),
$ : function (id) {
return document.getElementById(id);
},
push : function (arr, val) {
arr[arr.length] = val;
},
createElement : function (tag, attribs, styles, parent, nopad) {
var el = document.createElement(tag);
if (attribs) hs.setAttribs(el, attribs);
if (nopad) hs.setStyles(el, {padding: 0, border: 'none', margin: 0});
if (styles) hs.setStyles(el, styles);
if (parent) parent.appendChild(el);
return el;
},
setAttribs : function (el, attribs) {
for (var x in attribs) el[x] = attribs[x];
},
setStyles : function (el, styles) {
for (var x in styles) {
try {
if (hs.ie && x == 'opacity')
el.style.filter = (styles[x] == 1) ? '' : 'alpha(opacity='+ (styles[x] * 100) +')';
else el.style[x] = styles[x];
}
catch (e) {}
}
},
ieVersion : function () {
var arr = navigator.appVersion.split("MSIE");
return arr[1] ? parseFloat(arr[1]) : null;
},
getPageSize : function () {
var iebody = document.compatMode && document.compatMode != "BackCompat"
? document.documentElement : document.body;
var width = hs.ie ? iebody.clientWidth :
(document.documentElement.clientWidth || self.innerWidth),
height = hs.ie ? iebody.clientHeight : self.innerHeight;
return {
width: width,
height: height,
scrollLeft: hs.ie ? iebody.scrollLeft : pageXOffset,
scrollTop: hs.ie ? iebody.scrollTop : pageYOffset
}
},
position : function(el) {
var p = { x: el.offsetLeft, y: el.offsetTop };
while (el.offsetParent) {
el = el.offsetParent;
p.x += el.offsetLeft;
p.y += el.offsetTop;
if (el != document.body && el != document.documentElement) {
p.x -= el.scrollLeft;
p.y -= el.scrollTop;
}
}
return p;
},
expand : function(a, params, custom) {
if (a.getParams) return params;
try {
new hs.Expander(a, params, custom);
return false;
} catch (e) { return true; }
},
focusTopmost : function() {
var topZ = 0, topmostKey = -1;
for (var i = 0; i <> topZ) {
topZ = hs.expanders[i].wrapper.style.zIndex;
topmostKey = i;
}
}
}
if (topmostKey == -1) hs.focusKey = -1;
else hs.expanders[topmostKey].focus();
},
getAdjacentAnchor : function(key, op) {
var aAr = document.getElementsByTagName('A'), hsAr = {}, activeI = -1, j = 0;
for (var i = 0; i < slideshowgroup ="=" activei =" j;" getparams =" a.onclick;" p =" a.getParams" getparams =" null;" src =" hs.getParam(a," node =" hs.$(id)," clone =" hs.clones[id]," a =" {};" clone =" node.cloneNode(true);" id =" '';" a =" d.attributes," l =" a.length;" i =" 0;" n =" a[i].name;" a =" d.childNodes;" l =" a.length;" i =" 0;" exp =" hs.last" adj =" hs.upcoming" e =" window.event;" target =" e.srcElement;" op =" null;" op =" 1;" op =" -1;" op =" 0;" returnvalue =" false;" op ="=" re =" /^highslide-wrapper-([0-9]+)$/;" el =" element;" el =" el.parentNode;" el =" element;" key =" 0;" exp =" hs.expanders[key];" a ="=" el =" el.parentNode;" el ="=" el ="=" el ="=" el =" hs.$(el);" i =" 0;" e =" window.event;"> 1) return true;
if (!e.target) e.target = e.srcElement;
var el = e.target;
while (el.parentNode
&& !(/highslide-(image|move|html|resize)/.test(el.className)))
{
el = el.parentNode;
}
var exp = hs.getExpander(el);
if (exp && (exp.isClosing || !exp.isExpanded)) return true;
if (exp && e.type == 'mousedown') {
if (e.target.form) return true;
var match = el.className.match(/highslide-(image|move|resize)/);
if (match) {
hs.dragArgs = { exp: exp , type: match[1], left: exp.x.min, width: exp.x.span, top: exp.y.min,
height: exp.y.span, clickX: e.clientX, clickY: e.clientY };
//if (hs.dragArgs.type == 'image') exp.content.style.cursor = 'move';
hs.addEventListener(document, 'mousemove', hs.dragHandler);
if (e.preventDefault) e.preventDefault(); // FF
if (/highslide-(image|html)-blur/.test(exp.content.className)) {
exp.focus();
hs.hasFocused = true;
}
return false;
}
} else if (e.type == 'mouseup') {
hs.removeEventListener(document, 'mousemove', hs.dragHandler);
if (hs.dragArgs) {
if (hs.dragArgs.type == 'image')
hs.dragArgs.exp.content.style.cursor = hs.styleRestoreCursor;
var hasDragged = hs.dragArgs.hasDragged;
if (!hasDragged &&!hs.hasFocused && !/(move|resize)/.test(hs.dragArgs.type)) {
exp.close();
}
else if (hasDragged || (!hasDragged && hs.hasHtmlexpanders)) {
hs.dragArgs.exp.redoShowHide();
}
hs.hasFocused = false;
hs.dragArgs = null;
} else if (/highslide-image-blur/.test(el.className)) {
el.style.cursor = hs.styleRestoreCursor;
}
}
return false;
},
dragHandler : function(e)
{
if (!hs.dragArgs) return true;
if (!e) e = window.event;
var a = hs.dragArgs, exp = a.exp;
a.dX = e.clientX - a.clickX;
a.dY = e.clientY - a.clickY;
var distance = Math.sqrt(Math.pow(a.dX, 2) + Math.pow(a.dY, 2));
a.hasDragged = (a.type != 'image' && distance > 0)
|| (distance > (hs.dragSensitivity || 5));
if (a.hasDragged) {
exp.move(a);
}
return false;
},
addEventListener : function (el, event, func) {
try {
el.addEventListener(event, func, false);
} catch (e) {
try {
el.detachEvent('on'+ event, func);
el.attachEvent('on'+ event, func);
} catch (e) {
el['on'+ event] = func;
}
}
},
removeEventListener : function (el, event, func) {
try {
el.removeEventListener(event, func, false);
} catch (e) {
try {
el.detachEvent('on'+ event, func);
} catch (e) {
el['on'+ event] = null;
}
}
},
preloadFullImage : function (i) {
if (hs.continuePreloading && hs.preloadTheseImages[i] && hs.preloadTheseImages[i] != 'undefined') {
var img = document.createElement('img');
img.onload = function() { hs.preloadFullImage(i + 1); };
img.src = hs.preloadTheseImages[i];
}
},
preloadImages : function (number) {
if (number && typeof number != 'object') hs.numberOfImagesToPreload = number;
var a, re, j = 0;
var aTags = document.getElementsByTagName('A');
for (var i = 0; i < a =" aTags[i];" re =" hs.isHsAnchor(a);" cur =" hs.createElement('img'," container =" hs.createElement('div'," loading =" hs.createElement('a'," lineartween =" function" easeinquad =" function" i ="=" dur =" 250;" i =" hs.faders.length;" dir =" oFinal"> o ? 1 : -1;
var step = (25 / (dur - dur % 25)) * Math.abs(o - oFinal);
}
o = parseFloat(o);
el.style.visibility = (o <= 0) ? 'hidden' : 'visible'; if (o < dir ="="> oFinal)) return;
if (el.fading && el.fading.i != i) { // reverse
clearTimeout(hs.faders[el.fading.i]);
o = el.fading.o;
}
el.fading = {i: i, o: o, step: (step || el.fading.step)};
el.style.visibility = (o <= 0) ? 'hidden' : 'visible'; hs.setStyles(el, { opacity: o }); hs.faders[i] = setTimeout(function() { hs.fade(el, o + el.fading.step * dir, oFinal, null, i, dir); }, 25); }, close : function(el) { try { hs.getExpander(el).close(); } catch (e) {} return false; } }; // end hs object //----------------------------------------------------------------------------- hs.Outline = function (outlineType, onLoad) { this.onLoad = onLoad; this.outlineType = outlineType; var v = hs.ieVersion(), tr; this.hasAlphaImageLoader = hs.ie && v >= 5.5 && v < table =" hs.createElement(" tbody =" hs.createElement('tbody'," td =" [];" i =" 0;" 3 ="=" tr =" hs.createElement('tr'," style =" i" classname =" outlineType;" prototype =" {" src =" hs.graphicsDir" appendto =" hs.safari" graphic =" hs.createElement('img'," pthis =" this;" onload =" function()" src =" src;" o =" this.offset" pos =" [[0,0],[0,-4],[-2,0],[0,-8],0,[-2,-8],[0,-2],[0,-6],[-2,-2]]," dim =" {" i =" 0;" w =" (i" i ="=" div =" hs.createElement('div'," sizingmethod="scale," src="'" i ="=" i ="=" visibility =" (h">= 4 * this.offset)
? 'visible' : 'hidden';
this.table.style.left = (x - this.offset) +'px';
this.table.style.top = (y - this.offset) +'px';
this.table.style.width = (w + 2 * (exp.offsetBorderW + this.offset)) +'px';
w += 2 * (exp.offsetBorderW - this.offset);
h += + 2 * (exp.offsetBorderH - this.offset);
this.td[4].style.width = w >= 0 ? w +'px' : 0;
this.td[4].style.height = h >= 0 ? h +'px' : 0;
if (this.hasAlphaImageLoader) this.td[3].style.height
= this.td[5].style.height = this.td[4].style.height;
},
destroy : function(hide) {
if (hide) this.table.style.visibility = 'hidden';
else {
hs.purge(this.table);
try { this.table.parentNode.removeChild(this.table); } catch (e) {}
}
}
};
//-----------------------------------------------------------------------------
// The expander object
hs.Expander = function(a, params, custom, contentType) {
this.a = a;
this.custom = custom;
this.contentType = contentType || 'image';
this.isImage = !this.isHtml;
hs.continuePreloading = false;
hs.genContainer();
var key = this.key = hs.expanders.length;
// override inline parameters
for (var i = 0; i < name =" hs.overrides[i];" el =" this.thumb" thumbsusersetid =" el.id" i =" 0;" a ="=" i =" 0;" overlays =" [];" pos =" hs.position(el);" thumbwidth =" el.width" thumbheight =" el.height" thumbleft =" pos.x;" thumbtop =" pos.y;" thumboffsetborderw =" (this.thumb.offsetWidth" thumboffsetborderh =" (this.thumb.offsetHeight" wrapper =" hs.createElement(" onmouseover =" function" onmouseout =" function" contenttype ="=" outlinewhileanimating ="=" outlinewhileanimating =" 0;" exp =" this;" prototype =" {" w =" hs.pendingOutlines[this.outlineType];" objoutline =" w;" zindex =" this.wrapper.style.zIndex;" originalcursor =" this.a.style.cursor;" cursor =" 'wait';" loading =" hs.loading;" exp =" this;" onclick =" function()" top =" (this.thumbTop" exp =" this," left =" (this.thumbLeft" left =" left" exp =" this;" img =" document.createElement('img');" content =" img;" onload =" function" oncontextmenu =" function()" classname =" 'highslide-image';" visibility =" 'hidden';" display =" 'block';" position =" 'absolute';" maxwidth =" 'none';" zindex =" 3;" title =" hs.restoreTitle;" src =" null;" src =" hs.getSrc(this.a);" onloadstarted =" true;" left =" '-9999px';" loading =" null;" cursor =" this.originalCursor" marginbottom =" hs.marginBottom;" newwidth =" this.content.width;" newheight =" this.content.height;" fullexpandwidth =" this.newWidth;" fullexpandheight =" this.newHeight;" width =" this.thumbWidth" height =" this.thumbHeight" position =" 'relative';" left =" this.thumbLeft" top =" this.thumbTop" offsetborderw =" (this.content.offsetWidth" offsetborderh =" (this.content.offsetHeight" modmarginright =" hs.marginRight" ratio =" this.newWidth" minwidth =" this.allowSizeReduction" minheight =" this.allowSizeReduction" justify =" {" page =" hs.getPageSize();" x =" {" oldright =" this.x.min" x =" this.justify(this.x);" y =" {" oldbottom =" this.y.min" y =" this.justify(this.y);" x =" this.x;" y =" this.y;" href =" hs.getSrc(this.a);" dim =" p" hasmovedmin =" false;" allowreduce =" true;" min =" Math.round(p.min" min =" p.scroll" hasmovedmin =" true;" span =" p.minSpan;" allowreduce =" false;"> p.scroll + p.clientSpan - p.marginMax) {
if (hasMovedMin && allowReduce) {
p.span = p.clientSpan - p.marginMin - p.marginMax; // can't expand more
} else if (p.span < min =" p.scroll" min =" p.scroll" span =" p.clientSpan" span =" p.minSpan;" allowreduce =" false;" tmpmin =" p.min;" min =" p.marginMin;" span =" p.span" x =" this.x;" y =" this.y;" changed =" false;"> ratio) { // width greater
var tmpWidth = x.span;
x.span = y.span * ratio;
if (x.span < imgspan =" x.span;" span =" x.minSpan;" span =" x.span" changed =" true;" tmpheight =" y.span;" span =" x.span" changed =" true;" min =" parseInt(this.thumbLeft)" minspan =" x.span;" x =" this.justify(x);" min =" parseInt(this.thumbTop)" minspan =" y.span;" y =" this.justify(y);" imgpos =" {x:" hideselects =" (hs.ie" hideiframes =" ((window.opera" vendor ="=" margin =" '0" n =" this.wrapper.childNodes.length;" i =" n">= 0 ; i--) {
var child = this.wrapper.childNodes[i];
if (child != this.content) {
hs.purge(child);
this.wrapper.removeChild(child);
}
}
}
if (this.fadeInOut) {
from.op = up ? 0 : 1;
to.op = up;
}
var t,
exp = this,
easing = Math[this.easing] || Math.easeInQuad;
if (!up) easing = Math[this.easingClose] || easing;
for (var i = 1; i <= steps; i++) { t = Math.round(i * (dur / steps)); (function(){ var pI = i, size = {}; for (var x in from) size[x] = easing(t, from[x], to[x] - from[x], dur); setTimeout ( function() { if (up && pI == 1) { exp.content.style.visibility = 'visible'; exp.a.className += ' highslide-active-anchor'; } exp.setSize(size); }, t); })(); } if (up) { setTimeout(function() { if (exp.objOutline) exp.objOutline.table.style.visibility = "visible"; }, t); setTimeout(function() { if (exp.caption) exp.writeCaption(); exp.afterExpand(); }, t + 50); } else setTimeout(function() { exp.afterClose(); }, t); }, setSize : function (to) { try { this.wrapper.style.width = (to.w + 2*this.offsetBorderW) +'px'; this.content.style.width = ((to.imgW && !isNaN(to.imgW)) ? to.imgW : to.w) +'px'; if (hs.safari) this.content.style.maxWidth = this.content.style.width; this.content.style.height = to.h +'px'; if (to.op) hs.setStyles(this.wrapper, { opacity: to.op }); if (this.objOutline && this.outlineWhileAnimating) { var o = this.objOutline.offset - to.o; this.objOutline.setPosition(this, to.x + o, to.y + o, to.w - 2 * o, to.h - 2 * o, 1); } hs.setStyles ( this.wrapper, { 'visibility': 'visible', 'left': to.x +'px', 'top': to.y +'px' } ); } catch (e) { window.location.href = hs.getSrc(this.a); } }, afterExpand : function() { this.isExpanded = true; this.focus(); this.createOverlays(); if (hs.showCredits) this.writeCredits(); if (this.isImage && this.fullExpandWidth > this.x.span) this.createFullExpand();
if (!this.caption) this.prepareNextOutline();
},
prepareNextOutline : function() {
var key = this.key;
var outlineType = this.outlineType;
new hs.Outline(outlineType,
function () { try { hs.expanders[key].preloadNext(); } catch (e) {} });
},
preloadNext : function() {
var next = hs.getAdjacentAnchor(this.key, 1);
if (next.onclick.toString().match(/hs\.expand/))
var img = hs.createElement('img', { src: hs.getSrc(next) });
},
cancelLoading : function() {
hs.expanders[this.key] = null;
this.a.style.cursor = this.originalCursor;
if (this.loading) hs.loading.style.left = '-9999px';
},
writeCredits : function () {
var credits = hs.createElement('a',
{
href: hs.creditsHref,
className: 'highslide-credits',
innerHTML: hs.creditsText,
title: hs.creditsTitle
}
);
this.createOverlay({ overlayId: credits, position: 'top left'});
},
getCaption : function() {
if (!this.captionId && this.thumbsUserSetId)
this.captionId = 'caption-for-'+ this.thumbsUserSetId;
if (this.captionId) this.caption = hs.getNode(this.captionId);
if (!this.caption && !this.captionText && this.captionEval) try {
this.captionText = eval(this.captionEval);
} catch (e) {}
if (!this.caption && this.captionText) this.caption = hs.createElement('div',
{ className: 'highslide-caption', innerHTML: this.captionText } );
if (!this.caption) {
var next = this.a.nextSibling;
while (next && !hs.isHsAnchor(next)) {
if (/highslide-caption/.test(next.className || null)) {
this.caption = next.cloneNode(1);
break;
}
next = next.nextSibling;
}
}
if (this.caption) {
this.marginBottom += this.spaceForCaption;
}
},
writeCaption : function() {
try {
hs.setStyles(this.wrapper, { width: this.wrapper.offsetWidth +'px',
height: this.wrapper.offsetHeight +'px' } );
hs.setStyles(this.caption, { visibility: 'hidden', marginTop: hs.safari ? 0 : '-'+ this.y.span +'px'});
this.caption.className += ' highslide-display-block';
var height, exp = this;
if (hs.ie && (hs.ieVersion() < compatmode ="=" height =" this.caption.offsetHeight;" temp =" hs.createElement('div'," innerhtml =" '';" height =" this.caption.childNodes[0].offsetHeight;" innerhtml =" this.caption.childNodes[0].innerHTML;" height =" 'auto';" step =" (Math.round(height/50)" h =" height" t =" 0;" ph =" h," end =" (h" height =" height" visibility =" 'visible';" span =" this.wrapper.offsetHeight" o =" this.objOutline;" height =" (this.wrapper.offsetHeight" height =" o.td[5].style.height" els =" document.getElementsByTagName(tagName);" prop =" tagName" i =" 0;" prop ="=" hiddenby =" els[i].getAttribute('hidden-by');" visibility ="=" hiddenby =" hiddenBy.replace('['+" visibility ="=" elpos =" hs.position(els[i]);" w =" els[i].offsetWidth;" h =" els[i].offsetHeight;" clearsx =" (elPos.x"> imgPos.x + imgPos.w);
var clearsY = (elPos.y + elPos.h <> imgPos.y + imgPos.h);
var wrapperKey = hs.getWrapperKey(els[i]);
if (!clearsX && !clearsY && wrapperKey != this.key) { // element falls behind image
if (!hiddenBy) {
els[i].setAttribute('hidden-by', '['+ this.key +']');
els[i].origProp = els[i].style[prop];
els[i].style[prop] = 'hidden';
} else if (!hiddenBy.match('['+ this.key +']')) {
els[i].setAttribute('hidden-by', hiddenBy + '['+ this.key +']');
}
} else if (hiddenBy == '['+ this.key +']' || hs.focusKey == wrapperKey) { // on move
els[i].setAttribute('hidden-by', '');
els[i].style[prop] = els[i].origProp || '';
} else if (hiddenBy && hiddenBy.match('['+ this.key +']')) {
els[i].setAttribute('hidden-by', hiddenBy.replace('['+ this.key +']', ''));
}
}
}
}
},
focus : function() {
this.wrapper.style.zIndex = hs.zIndexCounter++;
// blur others
for (var i = 0; i < hs.expanders.length; i++) {
if (hs.expanders[i] && i == hs.focusKey) {
var blurExp = hs.expanders[i];
blurExp.content.className += ' highslide-'+ blurExp.contentType +'-blur';
if (blurExp.caption) {
blurExp.caption.className += ' highslide-caption-blur';
}
blurExp.content.style.cursor = hs.ie ? 'hand' : 'pointer';
blurExp.content.title = hs.focusTitle;
}
}
// focus this
if (this.objOutline) this.objOutline.table.style.zIndex
= this.wrapper.style.zIndex;
this.content.className = 'highslide-'+ this.contentType;
if (this.caption) {
this.caption.className = this.caption.className.replace(' highslide-caption-blur', '');
}
this.content.title = hs.restoreTitle;
hs.styleRestoreCursor = window.opera ? 'pointer' : 'url('+ hs.graphicsDir + hs.restoreCursor +'), pointer';
if (hs.ie && hs.ieVersion() < 6) hs.styleRestoreCursor = 'hand';
this.content.style.cursor = hs.styleRestoreCursor;
hs.focusKey = this.key;
hs.addEventListener(document, 'keydown', hs.keyHandler);
},
move : function (e) {
this.x.min = e.left + e.dX;
this.y.min = e.top + e.dY;
if (e.type == 'image') this.content.style.cursor = 'move';
hs.setStyles(this.wrapper, { left: this.x.min +'px', top: this.y.min +'px' });
if (this.objOutline)
this.objOutline.setPosition(this, this.x.min, this.y.min, this.x.span, this.y.span);
},
close : function() {
if (this.isClosing || !this.isExpanded) return;
this.isClosing = true;
hs.removeEventListener(document, 'keydown', hs.keyHandler);
try {
this.content.style.cursor = 'default';
this.changeSize(
0,
{
x: this.x.min,
y: this.y.min,
w: this.x.span,
h: parseInt(this.content.style.height),
imgW: this.x.imgSpan,
o: this.objOutline ? this.objOutline.offset : 0
},
{
x: this.thumbLeft - this.offsetBorderW + this.thumbOffsetBorderW,
y: this.thumbTop - this.offsetBorderH + this.thumbOffsetBorderH,
w: this.thumbWidth,
h: this.thumbHeight,
imgW: this.thumbWidth,
o: hs.outlineStartOffset
},
hs.restoreDuration,
hs.restoreSteps
);
} catch (e) { this.afterClose(); }
},
createOverlay : function (o) {
var el = o.overlayId;
if (typeof el == 'string') el = hs.getNode(el);
if (!el || typeof el == 'string') return;
var overlay = hs.createElement(
'div',
null,
{
'left' : 0,
'top' : 0,
'position' : 'absolute',
'zIndex' : 3,
'visibility' : 'hidden'
},
this.wrapper,
true
);
if (o.opacity) hs.setStyles(el, { opacity: o.opacity });
el.style.styleFloat = 'none';
el.className += ' highslide-display-block';
overlay.appendChild(el);
overlay.hsPos = o.position;
this.positionOverlay(overlay);
if (o.hideOnMouseOut) overlay.setAttribute('hideOnMouseOut', true);
if (!o.opacity) o.opacity = 1;
overlay.setAttribute('opacity', o.opacity);
hs.fade(overlay, 0, o.opacity);
hs.push(this.overlays, overlay);
},
positionOverlay : function(overlay) {
var left = this.offsetBorderW;
var dLeft = this.x.span - overlay.offsetWidth;
var top = this.offsetBorderH;
var dTop = parseInt(this.content.style.height) - overlay.offsetHeight;
var p = overlay.hsPos || 'center center';
if (/^bottom/.test(p)) top += dTop;
if (/^center/.test(p)) top += dTop / 2;
if (/right$/.test(p)) left += dLeft;
if (/center$/.test(p)) left += dLeft / 2;
overlay.style.left = left +'px';
overlay.style.top = top +'px';
},
createOverlays : function() {
for (var i = 0; i < hs.overlays.length; i++) {
var o = hs.overlays[i], tId = o.thumbnailId, sg = o.slideshowGroup;
if ((!tId && !sg) || tId == this.thumbsUserSetId
|| sg === this.slideshowGroup) {
this.createOverlay(o);
}
}
},
createFullExpand : function () {
var a = hs.createElement(
'a',
{
href: 'javascript:hs.expanders['+ this.key +'].doFullExpand();',
title: hs.fullExpandTitle,
className: 'highslide-full-expand'
}
);
this.fullExpandLabel = a;
this.createOverlay({ overlayId: a, position: hs.fullExpandPosition,
hideOnMouseOut: true, opacity: hs.fullExpandOpacity });
},
doFullExpand : function () {
try {
hs.purge(this.fullExpandLabel);
this.fullExpandLabel.parentNode.removeChild(this.fullExpandLabel);
this.focus();
this.x.min = parseInt(this.wrapper.style.left) - (this.fullExpandWidth - this.content.width) / 2;
if (this.x.min < hs.marginLeft) this.x.min = hs.marginLeft;
this.wrapper.style.left = this.x.min +'px';
hs.setStyles(this.content, { width: this.fullExpandWidth +'px',
height: this.fullExpandHeight +'px'});
this.x.span = this.fullExpandWidth;
this.wrapper.style.width = (this.x.span + 2*this.offsetBorderW) +'px';
this.y.span = this.wrapper.offsetHeight - 2 * this.offsetBorderH;
if (this.objOutline)
this.objOutline.setPosition(this, this.x.min, this.y.min, this.x.span, this.y.span);
for (var i = 0; i < this.overlays.length; i++)
this.positionOverlay(this.overlays[i]);
this.redoShowHide();
} catch (e) {
window.location.href = this.content.src;
}
},
// on end move and resize
redoShowHide : function() {
var imgPos = {
x: parseInt(this.wrapper.style.left) - 20,
y: parseInt(this.wrapper.style.top) - 20,
w: this.content.offsetWidth + 40,
h: this.content.offsetHeight + 40
+ this.spaceForCaption
};
if (hs.hideSelects) this.showHideElements('SELECT', 'hidden', imgPos);
if (hs.hideIframes) this.showHideElements('IFRAME', 'hidden', imgPos);
if (hs.geckoMac) this.showHideElements('*', 'hidden', imgPos);
},
wrapperMouseHandler : function (e) {
if (!e) e = window.event;
var over = /mouseover/i.test(e.type);
if (!e.target) e.target = e.srcElement; // ie
if (hs.ie) e.relatedTarget =
over ? e.fromElement : e.toElement; // ie
if (hs.getExpander(e.relatedTarget) == this || hs.dragArgs) return;
for (var i = 0; i < this.overlays.length; i++) {
var o = this.overlays[i];
if (o.getAttribute('hideOnMouseOut')) {
var from = over ? 0 : o.getAttribute('opacity'),
to = over ? o.getAttribute('opacity') : 0;
hs.fade(o, from, to);
}
}
},
afterClose : function () {
this.a.className = this.a.className.replace('highslide-active-anchor', '');
if (hs.hideSelects) this.showHideElements('SELECT', 'visible');
if (hs.hideIframes) this.showHideElements('IFRAME', 'visible');
if (hs.geckoMac) this.showHideElements('*', 'visible');
if (this.objOutline && this.outlineWhileAnimating) this.objOutline.destroy();
hs.purge(this.wrapper);
if (hs.ie && hs.ieVersion() < 5.5) this.wrapper.innerHTML = ''; // crash
else this.wrapper.parentNode.removeChild(this.wrapper);
hs.expanders[this.key] = null;
hs.cleanUp();
}
};
// history
var HsExpander = hs.Expander;
// set handlers
hs.addEventListener(document, 'mousedown', hs.mouseClickHandler);
hs.addEventListener(document, 'mouseup', hs.mouseClickHandler);
hs.addEventListener(window, 'load', hs.preloadImages);
------------------------------------------------------------------------------
