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);

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

6 comments:

navya said...

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

Unknown said...

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

ciitnoida said...

SAP is one of the largest ERP solution which is being used across thousands of different industries all over the planet.

One important fact we should know that around 70% of the Fortune 500 companies used SAP as their ERP solutions.

SAP professionals, therefore, are in huge demand and there are lack of untrained professionals in the market. So it is very necessary to find out the right trainingdestination to learn the Magical SAP Software Solutions | Business Applications and Technology Delhi NCR , Noida is the base for top notch training companies and among them

SAP Training Institute in Noida
sap training in noida
sap institute in noida
sap course in noida
best sap training institute in noida

Chase4Net IT Solutions said...

How to start the software company ?

Best Website Design company - PHP,JAVA,ANDROID App Developement Company

Chase4Net is a Software Company and having office at Chennai & bangalore . Our main focus areas are Web Development and Software Development.
Chase4Net has been ranked as the No.1 for the web designing company in Chennai & Bangalore.

To start the in Software comany is very simple and more profitable . To start the business first you need a Team which supprt for your everything.
In todays software development is nothing but a web application . To develop a webapplication you need start the Website desining Company is one of the more profitable business with less invesment.

We are having the talented Team with 8 years Expereince in webdesign business , which will guide to start the software company quickly with lesss effort.

There are many business includes in website developmet - Logo design,website design , webhosting , domain registartion ,android app development .

Even If you do not how to develop wensite no woriess . Chase4Net will be there always with you , we can help you on the business by developing a websiite a behalf og you.


We also have team who deloped application such as Hotel booking website development |, bus tickect booking website development | , shopping website development | , hospital website development |,
bill software desing | ,job website development |, tickect booking website development | ,matrimonial website development |,RealEstate website development .

You just become a website design company by website desgin reseller program , We will take you to the next level.

Enter into partnership with us so that we can help you to setup your business including website design for your company,Email-Id creation,Web Hosting membership,Domain Reseller membership,Payment Gateway Integration,SMS Integration.Chase4Net ensures
you to start the business from day one rather than making you run behind business plans.To be our franchise we charge as low as INR Rs 20000/- (or) $296To pay the franchise membership fee.How to pay

Chase4Net IT Solutions said...

Best Website Design company - PHP,JAVA,ANDROID App Developement Company

Chase4Net is a Software Company and having office at Chennai & bangalore . Our main focus areas are Web Development and Software Development.
Chase4Net has been ranked as the No.1 for the web designing company in Chennai & Bangalore.

How to start the Online Bussiness ?

To start the Business in online is very simple and more profitable . Today starting the Website desining Company is one of the more profitable business with less invesment.

We are having the talented Team with 8 years Expereince in webdesign business , which will guide to start the software company quickly with lesss effort.

Now a days all the business are moving towards online . Too start the company we need correct Business Model and thats Chase4Net . We will help you to setup the Website design Company at less cost . The website desing compnay can offer the following Logo design,website design , webhosting , domain registartion ,android app development .

Even If you do not know how to develop wensite no woriess . Chase4Net will be there always with you , we can help you on the business by developing a websiite a behalf og you.


We also have team who deloped application such as Hotel booking website design |, bus tickect booking website desing | , shopping cart website desing | , hospital website desing |,
bill software desing |,job website design |,tickect booking website design | ,matrimonial website design |,RealEstate website design .

You just become a website design company reseller program , We will take you to the next level.

Enter into partnership with us so that we can help you to setup your business including website design for your company,Email-Id creation,Web Hosting membership,Domain Reseller membership,Payment Gateway Integration,SMS Integration.Chase4Net ensures
you to start the business from day one rather than making you run behind business plans.To be our franchise we charge as low as INR Rs 20000/- (or) $296To pay the franchise membership fee How to pay

Chase4Net IT Solutions said...

How to start the software company ?

Best Website Design company - PHP,JAVA,ANDROID App Developement Company

Chase4Net is a Software Company and having office at Chennai & bangalore . Our main focus areas are Web Development and Software Development.
Chase4Net has been ranked as the No.1 for the web designing company in Chennai & Bangalore.

To start the in Software comany is very simple and more profitable . To start the business first you need a Team which supprt for your everything.
In todays software development is nothing but a web application . To develop a webapplication you need start the Website desining Company is one of the more profitable business with less invesment.

We are having the talented Team with 8 years Expereince in webdesign business , which will guide to start the software company quickly with lesss effort.

There are many business includes in website developmet - Logo design,website design , webhosting , domain registartion ,android app development .

Even If you do not how to develop wensite no woriess . Chase4Net will be there always with you , we can help you on the business by developing a websiite a behalf og you.


We also have team who deloped application such as Hotel booking website development |, bus tickect booking website development | , shopping website development | , hospital website development |,
bill software desing | ,job website development |, tickect booking website development | ,matrimonial website development |,RealEstate website development .

You just become a website design company by website desgin reseller program , We will take you to the next level.

Enter into partnership with us so that we can help you to setup your business including website design for your company,Email-Id creation,Web Hosting membership,Domain Reseller membership,Payment Gateway Integration,SMS Integration.Chase4Net ensures
you to start the business from day one rather than making you run behind business plans.To be our franchise we charge as low as INR Rs 20000/- (or) $296To pay the franchise membership fee.How to pay