Tuesday, May 27, 2008

HighSlide works

oDesk Certified Software Testing Engineer
Place the below coding in any HTML file
------------------------------------------------------------------------------------
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);

------------------------------------------------------------------------------

3 comments:

Naviya Nair said...

Great Article..
PHP Training in Chennai
Online PHP Training
Online PHP Training India
PHP Training Chennai
PHP Training institute in Chennai

Bhavya Kumar said...

My friend Suggest me this blog and I can say this is the best blog to get the basic knowledge.Thank you so much for this Selenium Training in Chennai

kokila zenrays said...

Thanks for this really useful information about PHP. useful for me learning PHP/MySQL PHP Training in Bangalore