Bilder


Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Hi,

    also da ich nun auf die Idee gekommen bin, mir eine Bildergalerie anzulegen, habe ich auch eine Frage. Undzwar möchte ich, dass das Bild sich so öffnet, wie auf dieser Seite: De Puta Madre Men Longsleeve - Ed Hardy - Brandlots No.1 Offizieller Ed Hardy FashionShop

    Wenn man auf das Bild klickt, wird es größer, aber man ist immer noch im selben Fenster. Man kann das Bild auch verschieben, wenn man möchte. Ich wollte mir ein ähnliches Skript anschaffen, aber wie soll ich das anstellen? Wird dazu HTML oder eine andere Sprache verwendet? Kann man das genau so nachstellen? Wie würde der Code dafür lauten?

    Geht am besten auf diese Seite und klickt das Bild an. Dann versteht ihr wahrscheinlich, was ich meine!

    MfG. Crush

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von Crush.G400DFX ()

  • So etwas geht nur mit JavaScript...
    Ich versuch mal an den Code zu kommen

    EDIT: Hab den Code (sorry wenn der Post ein wenig lang wird :P
    Html Code

    HTML-Quellcode

    1. <a href="BILDLINK" class="highslide" onclick="return hs.expand(this)"><img src="BILDLINK" alt="BESCHREIBUNG"/></a>


    Javascript (ist in einer eigenen Datei --> Im Header eingebunden):

    Quellcode

    1. /******************************************************************************
    2. Name: Highslide JS
    3. Version: 3.3.15 (Apr 24 2008)
    4. Config: default
    5. Author: Torstein Hønsi
    6. Support: http://vikjavev.no/highslide/forum
    7. Licence:
    8. Highslide JS is licensed under a Creative Commons Attribution-NonCommercial 2.5
    9. License (http://creativecommons.org/licenses/by-nc/2.5/).
    10. You are free:
    11. * to copy, distribute, display, and perform the work
    12. * to make derivative works
    13. Under the following conditions:
    14. * Attribution. You must attribute the work in the manner specified by the
    15. author or licensor.
    16. * Noncommercial. You may not use this work for commercial purposes.
    17. * For any reuse or distribution, you must make clear to others the license
    18. terms of this work.
    19. * Any of these conditions can be waived if you get permission from the
    20. copyright holder.
    21. Your fair use and other rights are in no way affected by the above.
    22. ******************************************************************************/
    23. var hs = {
    24. // Apply your own settings here, or override them in the html file.
    25. graphicsDir : 'templates/brandlots/javascript/graphics/',
    26. restoreCursor : 'zoomout.cur', // necessary for preload
    27. expandSteps : 10, // number of steps in zoom. Each step lasts for duration/step milliseconds.
    28. expandDuration : 250, // milliseconds
    29. restoreSteps : 10,
    30. restoreDuration : 250,
    31. marginLeft : 15,
    32. marginRight : 15,
    33. marginTop : 15,
    34. marginBottom : 15,
    35. zIndexCounter : 1001, // adjust to other absolutely positioned elements
    36. restoreTitle : 'Zum schließen auf das Bild klicken. Zum Bewegen des Bildes gedrückt halten und das Bild verschieben',
    37. loadingText : 'Loading...',
    38. loadingTitle : 'brandlots',
    39. loadingOpacity : 0.75,
    40. focusTitle : 'ZooM',
    41. allowMultipleInstances: true,
    42. numberOfImagesToPreload : 5,
    43. captionSlideSpeed : 1, // set to 0 to disable slide in effect
    44. padToMinWidth : false, // pad the popup width to make room for wide caption
    45. outlineWhileAnimating : 2, // 0 = never, 1 = always, 2 = HTML only
    46. outlineStartOffset : 3, // ends at 10
    47. fullExpandTitle : 'Expand to actual size',
    48. fullExpandPosition : 'bottom right',
    49. fullExpandOpacity : 1,
    50. showCredits : true, // you can set this to false if you want
    51. creditsText : '© brandlots',
    52. creditsHref : '',
    53. creditsTitle : '© brandlots',
    54. enableKeyListener : true,
    55. // These settings can also be overridden inline for each image
    56. captionId : 'the-caption',
    57. spaceForCaption : 30, // leaves space below images with captions
    58. slideshowGroup : null, // defines groups for next/previous links and keystrokes
    59. minWidth: 200,
    60. minHeight: 200,
    61. allowSizeReduction: true, // allow the image to reduce to fit client size. If false, this overrides minWidth and minHeight
    62. outlineType : 'drop-shadow', // set null to disable outlines
    63. wrapperClassName : 'highslide-wrapper', // for enhanced css-control
    64. // END OF YOUR SETTINGS
    65. // declare internal properties
    66. preloadTheseImages : [],
    67. continuePreloading: true,
    68. expanders : [],
    69. overrides : [
    70. 'allowSizeReduction',
    71. 'outlineType',
    72. 'outlineWhileAnimating',
    73. 'spaceForCaption',
    74. 'captionId',
    75. 'captionText',
    76. 'captionEval',
    77. 'wrapperClassName',
    78. 'minWidth',
    79. 'minHeight',
    80. 'slideshowGroup',
    81. 'easing',
    82. 'easingClose',
    83. 'fadeInOut'
    84. ],
    85. overlays : [],
    86. idCounter : 0,
    87. faders : [],
    88. pendingOutlines : {},
    89. clones : {},
    90. ie : (document.all && !window.opera),
    91. safari : /Safari/.test(navigator.userAgent),
    92. geckoMac : /Macintosh.+rv:1\.[0-8].+Gecko/.test(navigator.userAgent),
    93. $ : function (id) {
    94. return document.getElementById(id);
    95. },
    96. push : function (arr, val) {
    97. arr[arr.length] = val;
    98. },
    99. createElement : function (tag, attribs, styles, parent, nopad) {
    100. var el = document.createElement(tag);
    101. if (attribs) hs.setAttribs(el, attribs);
    102. if (nopad) hs.setStyles(el, {padding: 0, border: 'none', margin: 0});
    103. if (styles) hs.setStyles(el, styles);
    104. if (parent) parent.appendChild(el);
    105. return el;
    106. },
    107. setAttribs : function (el, attribs) {
    108. for (var x in attribs) el[x] = attribs[x];
    109. },
    110. setStyles : function (el, styles) {
    111. for (var x in styles) {
    112. try {
    113. if (hs.ie && x == 'opacity') {
    114. if (styles[x] > 0.99) el.style.removeAttribute('filter');
    115. else el.style.filter = 'alpha(opacity='+ (styles[x] * 100) +')';
    116. }
    117. else el.style[x] = styles[x];
    118. }
    119. catch (e) {}
    120. }
    121. },
    122. ieVersion : function () {
    123. var arr = navigator.appVersion.split("MSIE");
    124. return arr[1] ? parseFloat(arr[1]) : null;
    125. },
    126. getPageSize : function () {
    127. var iebody = document.compatMode && document.compatMode != "BackCompat"
    128. ? document.documentElement : document.body;
    129. var width = hs.ie ? iebody.clientWidth :
    130. (document.documentElement.clientWidth || self.innerWidth),
    131. height = hs.ie ? iebody.clientHeight : self.innerHeight;
    132. return {
    133. width: width,
    134. height: height,
    135. scrollLeft: hs.ie ? iebody.scrollLeft : pageXOffset,
    136. scrollTop: hs.ie ? iebody.scrollTop : pageYOffset
    137. }
    138. },
    139. position : function(el) {
    140. var p = { x: el.offsetLeft, y: el.offsetTop };
    141. while (el.offsetParent) {
    142. el = el.offsetParent;
    143. p.x += el.offsetLeft;
    144. p.y += el.offsetTop;
    145. if (el != document.body && el != document.documentElement) {
    146. p.x -= el.scrollLeft;
    147. p.y -= el.scrollTop;
    148. }
    149. }
    150. return p;
    151. },
    152. expand : function(a, params, custom) {
    153. if (a.getParams) return params;
    154. try {
    155. new hs.Expander(a, params, custom);
    156. return false;
    157. } catch (e) { return true; }
    158. },
    159. focusTopmost : function() {
    160. var topZ = 0, topmostKey = -1;
    161. for (var i = 0; i < hs.expanders.length; i++) {
    162. if (hs.expanders[i]) {
    163. if (hs.expanders[i].wrapper.style.zIndex && hs.expanders[i].wrapper.style.zIndex > topZ) {
    164. topZ = hs.expanders[i].wrapper.style.zIndex;
    165. topmostKey = i;
    166. }
    167. }
    168. }
    169. if (topmostKey == -1) hs.focusKey = -1;
    170. else hs.expanders[topmostKey].focus();
    171. },
    172. getAdjacentAnchor : function(key, op) {
    173. var aAr = document.getElementsByTagName('A'), hsAr = {}, activeI = -1, j = 0;
    174. for (var i = 0; i < aAr.length; i++) {
    175. if (hs.isHsAnchor(aAr[i]) && ((hs.expanders[key].slideshowGroup
    176. == hs.getParam(aAr[i], 'slideshowGroup')))) {
    177. hsAr[j] = aAr[i];
    178. if (hs.expanders[key] && aAr[i] == hs.expanders[key].a) {
    179. activeI = j;
    180. }
    181. j++;
    182. }
    183. }
    184. return hsAr[activeI + op] || null;
    185. },
    186. getParam : function (a, param) {
    187. a.getParams = a.onclick;
    188. var p = a.getParams ? a.getParams() : null;
    189. a.getParams = null;
    190. return (p && typeof p[param] != 'undefined') ? p[param] :
    191. (typeof hs[param] != 'undefined' ? hs[param] : null);
    192. },
    193. getSrc : function (a) {
    194. var src = hs.getParam(a, 'src');
    195. if (src) return src;
    196. return a.href;
    197. },
    198. getNode : function (id) {
    199. var node = hs.$(id), clone = hs.clones[id], a = {};
    200. if (!node && !clone) return null;
    201. if (!clone) {
    202. clone = node.cloneNode(true);
    203. clone.id = '';
    204. hs.clones[id] = clone;
    205. return node;
    206. } else {
    207. return clone.cloneNode(true);
    208. }
    209. },
    210. purge : function(d) {
    211. var a = d.attributes, i, l, n;
    212. if (a) {
    213. l = a.length;
    214. for (var i = 0; i < l; i += 1) {
    215. n = a[i].name;
    216. if (typeof d[n] === 'function') {
    217. d[n] = null;
    218. }
    219. }
    220. }
    221. a = d.childNodes;
    222. if (a) {
    223. l = a.length;
    224. for (var i = 0; i < l; i += 1) hs.purge(d.childNodes[i]);
    225. }
    226. },
    227. discardElement : function(d) {
    228. if (hs.ie) hs.purge(d);
    229. hs.garbageBin.appendChild(d);
    230. hs.garbageBin.innerHTML = '';
    231. },
    232. previousOrNext : function (el, op) {
    233. var exp = hs.last = hs.getExpander(el);
    234. try {
    235. var adj = hs.upcoming = hs.getAdjacentAnchor(exp.key, op);
    236. adj.onclick();
    237. } catch (e){}
    238. try { exp.close(); } catch (e) {}
    239. return false;
    240. },
    241. previous : function (el) {
    242. return hs.previousOrNext(el, -1);
    243. },
    244. next : function (el) {
    245. return hs.previousOrNext(el, 1);
    246. },
    247. keyHandler : function(e) {
    248. if (!e) e = window.event;
    249. if (!e.target) e.target = e.srcElement; // ie
    250. if (e.target.form) return true; // form element has focus
    251. var op = null;
    252. switch (e.keyCode) {
    253. case 32: // Space
    254. case 34: // Page Down
    255. case 39: // Arrow right
    256. case 40: // Arrow down
    257. op = 1;
    258. break;
    259. case 8: // Backspace
    260. case 33: // Page Up
    261. case 37: // Arrow left
    262. case 38: // Arrow up
    263. op = -1;
    264. break;
    265. case 27: // Escape
    266. case 13: // Enter
    267. op = 0;
    268. }
    269. if (op !== null) {
    270. hs.removeEventListener(document, 'keydown', hs.keyHandler);
    271. if (!hs.enableKeyListener) return true;
    272. if (e.preventDefault) e.preventDefault();
    273. else e.returnValue = false;
    274. if (op == 0) {
    275. try { hs.getExpander().close(); } catch (e) {}
    276. return false;
    277. } else {
    278. return hs.previousOrNext(hs.focusKey, op);
    279. }
    280. }
    281. return true;
    282. },
    283. registerOverlay : function (overlay) {
    284. hs.push(hs.overlays, overlay);
    285. },
    286. getWrapperKey : function (element) {
    287. var el, re = /^highslide-wrapper-([0-9]+)$/;
    288. // 1. look in open expanders
    289. el = element;
    290. while (el.parentNode) {
    291. if (el.id && re.test(el.id)) return el.id.replace(re, "$1");
    292. el = el.parentNode;
    293. }
    294. // 2. look in thumbnail
    295. el = element;
    296. while (el.parentNode) {
    297. if (el.tagName && hs.isHsAnchor(el)) {
    298. for (var key = 0; key < hs.expanders.length; key++) {
    299. var exp = hs.expanders[key];
    300. if (exp && exp.a == el) return key;
    301. }
    302. }
    303. el = el.parentNode;
    304. }
    305. return null;
    306. },
    307. getExpander : function (el) {
    308. if (typeof el == 'undefined') return hs.expanders[hs.focusKey] || null;
    309. if (typeof el == 'number') return hs.expanders[el] || null;
    310. if (typeof el == 'string') el = hs.$(el);
    311. return hs.expanders[hs.getWrapperKey(el)] || null;
    312. },
    313. isHsAnchor : function (a) {
    314. return (a.onclick && a.onclick.toString().replace(/\s/g, ' ').match(/hs.(htmlE|e)xpand/));
    315. },
    316. reOrder : function () {
    317. for (var i = 0; i < hs.expanders.length; i++)
    318. if (hs.expanders[i] && hs.expanders[i].isExpanded) hs.focusTopmost();
    319. },
    320. mouseClickHandler : function(e)
    321. {
    322. if (!e) e = window.event;
    323. if (e.button > 1) return true;
    324. if (!e.target) e.target = e.srcElement;
    325. var el = e.target;
    326. while (el.parentNode
    327. && !(/highslide-(image|move|html|resize)/.test(el.className)))
    328. {
    329. el = el.parentNode;
    330. }
    331. var exp = hs.getExpander(el);
    332. if (exp && (exp.isClosing || !exp.isExpanded)) return true;
    333. if (exp && e.type == 'mousedown') {
    334. if (e.target.form) return true;
    335. var match = el.className.match(/highslide-(image|move|resize)/);
    336. if (match) {
    337. hs.dragArgs = { exp: exp , type: match[1], left: exp.x.min, width: exp.x.span, top: exp.y.min,
    338. height: exp.y.span, clickX: e.clientX, clickY: e.clientY };
    339. hs.addEventListener(document, 'mousemove', hs.dragHandler);
    340. if (e.preventDefault) e.preventDefault(); // FF
    341. if (/highslide-(image|html)-blur/.test(exp.content.className)) {
    342. exp.focus();
    343. hs.hasFocused = true;
    344. }
    345. return false;
    346. }
    347. } else if (e.type == 'mouseup') {
    348. hs.removeEventListener(document, 'mousemove', hs.dragHandler);
    349. if (hs.dragArgs) {
    350. if (hs.dragArgs.type == 'image')
    351. hs.dragArgs.exp.content.style.cursor = hs.styleRestoreCursor;
    352. var hasDragged = hs.dragArgs.hasDragged;
    353. if (!hasDragged &&!hs.hasFocused && !/(move|resize)/.test(hs.dragArgs.type)) {
    354. exp.close();
    355. }
    356. else if (hasDragged || (!hasDragged && hs.hasHtmlexpanders)) {
    357. hs.dragArgs.exp.redoShowHide();
    358. }
    359. hs.hasFocused = false;
    360. hs.dragArgs = null;
    361. } else if (/highslide-image-blur/.test(el.className)) {
    362. el.style.cursor = hs.styleRestoreCursor;
    363. }
    364. }
    365. return false;
    366. },
    367. dragHandler : function(e)
    368. {
    369. if (!hs.dragArgs) return true;
    370. if (!e) e = window.event;
    371. var a = hs.dragArgs, exp = a.exp;
    372. a.dX = e.clientX - a.clickX;
    373. a.dY = e.clientY - a.clickY;
    374. var distance = Math.sqrt(Math.pow(a.dX, 2) + Math.pow(a.dY, 2));
    375. if (!a.hasDragged) a.hasDragged = (a.type != 'image' && distance > 0)
    376. || (distance > (hs.dragSensitivity || 5));
    377. if (a.hasDragged && e.clientX > 5 && e.clientY > 5) {
    378. exp.move(a);
    379. }
    380. return false;
    381. },
    382. wrapperMouseHandler : function (e) {
    383. if (!e) e = window.event;
    384. var over = /mouseover/i.test(e.type);
    385. if (!e.target) e.target = e.srcElement; // ie
    386. if (hs.ie) e.relatedTarget =
    387. over ? e.fromElement : e.toElement; // ie
    388. var exp = hs.getExpander(e.target);
    389. if (!exp || !e.relatedTarget || hs.getExpander(e.relatedTarget) == exp
    390. || hs.dragArgs) return;
    391. for (var i = 0; i < exp.overlays.length; i++) {
    392. var o = hs.$('hsId'+ exp.overlays[i]);
    393. if (o && o.getAttribute('hideOnMouseOut')) {
    394. var from = over ? 0 : o.getAttribute('opacity'),
    395. to = over ? o.getAttribute('opacity') : 0;
    396. hs.fade(o, from, to);
    397. }
    398. }
    399. },
    400. addEventListener : function (el, event, func) {
    401. try {
    402. el.addEventListener(event, func, false);
    403. } catch (e) {
    404. try {
    405. el.detachEvent('on'+ event, func);
    406. el.attachEvent('on'+ event, func);
    407. } catch (e) {
    408. el['on'+ event] = func;
    409. }
    410. }
    411. },
    412. removeEventListener : function (el, event, func) {
    413. try {
    414. el.removeEventListener(event, func, false);
    415. } catch (e) {
    416. try {
    417. el.detachEvent('on'+ event, func);
    418. } catch (e) {
    419. el['on'+ event] = null;
    420. }
    421. }
    422. },
    423. preloadFullImage : function (i) {
    424. if (hs.continuePreloading && hs.preloadTheseImages[i] && hs.preloadTheseImages[i] != 'undefined') {
    425. var img = document.createElement('img');
    426. img.onload = function() {
    427. img = null;
    428. hs.preloadFullImage(i + 1);
    429. };
    430. img.src = hs.preloadTheseImages[i];
    431. }
    432. },
    433. preloadImages : function (number) {
    434. if (number && typeof number != 'object') hs.numberOfImagesToPreload = number;
    435. var a, re, j = 0;
    436. var aTags = document.getElementsByTagName('A');
    437. for (var i = 0; i < aTags.length; i++) {
    438. a = aTags[i];
    439. re = hs.isHsAnchor(a);
    440. if (re && re[0] == 'hs.expand') {
    441. if (j < hs.numberOfImagesToPreload) {
    442. hs.preloadTheseImages[j] = hs.getSrc(a);
    443. j++;
    444. }
    445. }
    446. }
    447. // preload outlines
    448. new hs.Outline(hs.outlineType, function () { hs.preloadFullImage(0)} );
    449. // preload cursor
    450. var cur = hs.createElement('img', { src: hs.graphicsDir + hs.restoreCursor });
    451. },
    452. genContainer : function () {
    453. if (!hs.container) {
    454. hs.container = hs.createElement('div',
    455. null,
    456. { position: 'absolute', left: 0, top: 0, width: '100%', zIndex: hs.zIndexCounter },
    457. document.body,
    458. true
    459. );
    460. hs.loading = hs.createElement('a',
    461. {
    462. className: 'highslide-loading',
    463. title: hs.loadingTitle,
    464. innerHTML: hs.loadingText,
    465. href: 'javascript:void(0)'
    466. },
    467. {
    468. position: 'absolute',
    469. opacity: hs.loadingOpacity,
    470. left: '-9999px',
    471. zIndex: 1
    472. }, hs.container
    473. );
    474. hs.garbageBin = hs.createElement('div', null, { display: 'none' }, hs.container);
    475. // http://www.robertpenner.com/easing/
    476. Math.linearTween = function (t, b, c, d) {
    477. return c*t/d + b;
    478. };
    479. Math.easeInQuad = function (t, b, c, d) {
    480. return c*(t/=d)*t + b;
    481. };
    482. }
    483. },
    484. fade : function (el, o, oFinal, dur, i, dir) {
    485. if (typeof i == 'undefined') { // new fader
    486. if (typeof dur != 'number') dur = 250;
    487. if (dur < 25) { // instant
    488. hs.setStyles( el, { opacity: oFinal });
    489. return;
    490. }
    491. i = hs.faders.length;
    492. dir = oFinal > o ? 1 : -1;
    493. var step = (25 / (dur - dur % 25)) * Math.abs(o - oFinal);
    494. }
    495. o = parseFloat(o);
    496. el.style.visibility = (o <= 0) ? 'hidden' : 'visible';
    497. if (o < 0 || (dir == 1 && o > oFinal)) return;
    498. if (el.fading && el.fading.i != i) { // reverse
    499. clearTimeout(hs.faders[el.fading.i]);
    500. o = el.fading.o;
    501. }
    502. el.fading = {i: i, o: o, step: (step || el.fading.step)};
    503. el.style.visibility = (o <= 0) ? 'hidden' : 'visible';
    504. hs.setStyles(el, { opacity: o });
    505. hs.faders[i] = setTimeout(function() {
    506. hs.fade(el, o + el.fading.step * dir, oFinal, null, i, dir);
    507. }, 25);
    508. },
    509. close : function(el) {
    510. var exp = hs.getExpander(el);
    511. if (exp) exp.close();
    512. return false;
    513. }
    514. }; // end hs object
    515. //-----------------------------------------------------------------------------
    516. hs.Outline = function (outlineType, onLoad) {
    517. this.onLoad = onLoad;
    518. this.outlineType = outlineType;
    519. var v = hs.ieVersion(), tr;
    520. this.hasAlphaImageLoader = hs.ie && v >= 5.5 && v < 7;
    521. if (!outlineType) {
    522. if (onLoad) onLoad();
    523. return;
    524. }
    525. hs.genContainer();
    526. this.table = hs.createElement(
    527. 'table', { cellSpacing: 0 },
    528. {
    529. visibility: 'hidden',
    530. position: 'absolute',
    531. borderCollapse: 'collapse'
    532. },
    533. hs.container,
    534. true
    535. );
    536. var tbody = hs.createElement('tbody', null, null, this.table, 1);
    537. this.td = [];
    538. for (var i = 0; i <= 8; i++) {
    539. if (i % 3 == 0) tr = hs.createElement('tr', null, { height: 'auto' }, tbody, true);
    540. this.td[i] = hs.createElement('td', null, null, tr, true);
    541. var style = i != 4 ? { lineHeight: 0, fontSize: 0} : { position : 'relative' };
    542. hs.setStyles(this.td[i], style);
    543. }
    544. this.td[4].className = outlineType;
    545. this.preloadGraphic();
    546. };
    547. hs.Outline.prototype = {
    548. preloadGraphic : function () {
    549. var src = hs.graphicsDir + (hs.outlinesDir || "outlines/")+ this.outlineType +".png";
    550. var appendTo = hs.safari ? hs.container : null;
    551. this.graphic = hs.createElement('img', null, { position: 'absolute', left: '-9999px',
    552. top: '-9999px' }, appendTo, true); // for onload trigger
    553. var pThis = this;
    554. this.graphic.onload = function() { pThis.onGraphicLoad(); };
    555. this.graphic.src = src;
    556. },
    557. onGraphicLoad : function () {
    558. var o = this.offset = this.graphic.width / 4,
    559. pos = [[0,0],[0,-4],[-2,0],[0,-8],0,[-2,-8],[0,-2],[0,-6],[-2,-2]],
    560. dim = { height: (2*o) +'px', width: (2*o) +'px' };
    561. for (var i = 0; i <= 8; i++) {
    562. if (pos[i]) {
    563. if (this.hasAlphaImageLoader) {
    564. var w = (i == 1 || i == 7) ? '100%' : this.graphic.width +'px';
    565. var div = hs.createElement('div', null, { width: '100%', height: '100%', position: 'relative', overflow: 'hidden'}, this.td[i], true);
    566. hs.createElement ('div', null, {
    567. filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale, src='"+ this.graphic.src + "')",
    568. position: 'absolute',
    569. width: w,
    570. height: this.graphic.height +'px',
    571. left: (pos[i][0]*o)+'px',
    572. top: (pos[i][1]*o)+'px'
    573. },
    574. div,
    575. true);
    576. } else {
    577. hs.setStyles(this.td[i], { background: 'url('+ this.graphic.src +') '+ (pos[i][0]*o)+'px '+(pos[i][1]*o)+'px'});
    578. }
    579. if (window.opera && (i == 3 || i ==5))
    580. hs.createElement('div', null, dim, this.td[i], true);
    581. hs.setStyles (this.td[i], dim);
    582. }
    583. }
    584. this.graphic = null;
    585. if (hs.pendingOutlines[this.outlineType]) hs.pendingOutlines[this.outlineType].destroy();
    586. hs.pendingOutlines[this.outlineType] = this;
    587. if (this.onLoad) this.onLoad();
    588. },
    589. setPosition : function (exp, x, y, w, h, vis) {
    590. if (vis) this.table.style.visibility = (h >= 4 * this.offset)
    591. ? 'visible' : 'hidden';
    592. this.table.style.left = (x - this.offset) +'px';
    593. this.table.style.top = (y - this.offset) +'px';
    594. this.table.style.width = (w + 2 * (exp.offsetBorderW + this.offset)) +'px';
    595. w += 2 * (exp.offsetBorderW - this.offset);
    596. h += + 2 * (exp.offsetBorderH - this.offset);
    597. this.td[4].style.width = w >= 0 ? w +'px' : 0;
    598. this.td[4].style.height = h >= 0 ? h +'px' : 0;
    599. if (this.hasAlphaImageLoader) this.td[3].style.height
    600. = this.td[5].style.height = this.td[4].style.height;
    601. },
    602. destroy : function(hide) {
    603. if (hide) this.table.style.visibility = 'hidden';
    604. else hs.discardElement(this.table);
    605. }
    606. };
    607. //-----------------------------------------------------------------------------
    608. // The expander object
    609. hs.Expander = function(a, params, custom, contentType) {
    610. this.a = a;
    611. this.custom = custom;
    612. this.contentType = contentType || 'image';
    613. this.isImage = !this.isHtml;
    614. hs.continuePreloading = false;
    615. hs.genContainer();
    616. var key = this.key = hs.expanders.length;
    617. // override inline parameters
    618. for (var i = 0; i < hs.overrides.length; i++) {
    619. var name = hs.overrides[i];
    620. this[name] = params && typeof params[name] != 'undefined' ?
    621. params[name] : hs[name];
    622. }
    623. // get thumb
    624. var el = this.thumb = ((params && params.thumbnailId) ? hs.$(params.thumbnailId) : null)
    625. || a.getElementsByTagName('img')[0] || a;
    626. this.thumbsUserSetId = el.id || a.id;
    627. // check if already open
    628. for (var i = 0; i < hs.expanders.length; i++) {
    629. if (hs.expanders[i] && hs.expanders[i].a == a) {
    630. hs.expanders[i].focus();
    631. return false;
    632. }
    633. }
    634. // cancel other
    635. for (var i = 0; i < hs.expanders.length; i++) {
    636. if (hs.expanders[i] && hs.expanders[i].thumb != el && !hs.expanders[i].onLoadStarted) {
    637. hs.expanders[i].cancelLoading();
    638. }
    639. }
    640. hs.expanders[this.key] = this;
    641. if (!hs.allowMultipleInstances) {
    642. if (hs.expanders[key-1]) hs.expanders[key-1].close();
    643. if (typeof hs.focusKey != 'undefined' && hs.expanders[hs.focusKey])
    644. hs.expanders[hs.focusKey].close();
    645. }
    646. var pos = hs.position(el);
    647. // store properties of thumbnail
    648. this.thumbWidth = el.width ? el.width : el.offsetWidth;
    649. this.thumbHeight = el.height ? el.height : el.offsetHeight;
    650. this.thumbLeft = pos.x;
    651. this.thumbTop = pos.y;
    652. this.thumbOffsetBorderW = (this.thumb.offsetWidth - this.thumbWidth) / 2;
    653. this.thumbOffsetBorderH = (this.thumb.offsetHeight - this.thumbHeight) / 2;
    654. // instanciate the wrapper
    655. this.wrapper = hs.createElement(
    656. 'div',
    657. {
    658. id: 'highslide-wrapper-'+ this.key,
    659. className: this.wrapperClassName
    660. },
    661. {
    662. visibility: 'hidden',
    663. position: 'absolute',
    664. zIndex: hs.zIndexCounter++
    665. }, null, true );
    666. this.wrapper.onmouseover = this.wrapper.onmouseout = hs.wrapperMouseHandler;
    667. if (this.contentType == 'image' && this.outlineWhileAnimating == 2)
    668. this.outlineWhileAnimating = 0;
    669. // get the outline
    670. if (hs.pendingOutlines[this.outlineType]) {
    671. this.connectOutline();
    672. this[this.contentType +'Create']();
    673. } else if (!this.outlineType) {
    674. this[this.contentType +'Create']();
    675. } else {
    676. this.displayLoading();
    677. var exp = this;
    678. new hs.Outline(this.outlineType,
    679. function () {
    680. exp.connectOutline();
    681. exp[exp.contentType +'Create']();
    682. }
    683. );
    684. }
    685. return true;
    686. };
    687. hs.Expander.prototype = {
    688. connectOutline : function(x, y) {
    689. var w = hs.pendingOutlines[this.outlineType];
    690. this.objOutline = w;
    691. w.table.style.zIndex = this.wrapper.style.zIndex;
    692. hs.pendingOutlines[this.outlineType] = null;
    693. },
    694. displayLoading : function() {
    695. if (this.onLoadStarted || this.loading) return;
    696. this.originalCursor = this.a.style.cursor;
    697. this.a.style.cursor = 'wait';
    698. this.loading = hs.loading;
    699. var exp = this;
    700. this.loading.onclick = function() {
    701. exp.cancelLoading();
    702. };
    703. this.loading.style.top = (this.thumbTop
    704. + (this.thumbHeight - this.loading.offsetHeight) / 2) +'px';
    705. var exp = this, left = (this.thumbLeft + this.thumbOffsetBorderW
    706. + (this.thumbWidth - this.loading.offsetWidth) / 2) +'px';
    707. setTimeout(function () { if (exp.loading) exp.loading.style.left = left }, 100);
    708. },
    709. imageCreate : function() {
    710. var exp = this;
    711. var img = document.createElement('img');
    712. this.content = img;
    713. img.onload = function () {
    714. if (hs.expanders[exp.key]) exp.contentLoaded();
    715. };
    716. if (hs.blockRightClick) img.oncontextmenu = function() { return false; };
    717. img.className = 'highslide-image';
    718. img.style.visibility = 'hidden'; // prevent flickering in IE
    719. img.style.display = 'block';
    720. img.style.position = 'absolute';
    721. img.style.maxWidth = 'none';
    722. img.style.zIndex = 3;
    723. img.title = hs.restoreTitle;
    724. if (hs.safari) hs.container.appendChild(img);
    725. if (hs.ie && hs.flushImgSize) img.src = null;
    726. img.src = hs.getSrc(this.a);
    727. this.displayLoading();
    728. },
    729. contentLoaded : function() {
    730. try {
    731. if (!this.content) return;
    732. this.content.onload = null;
    733. if (this.onLoadStarted) return;
    734. else this.onLoadStarted = true;
    735. if (this.loading) {
    736. hs.setStyles(this.loading, { left: '-9999px', top: '-9999px' });
    737. this.loading = null;
    738. this.a.style.cursor = this.originalCursor || '';
    739. }
    740. this.marginBottom = hs.marginBottom;
    741. this.newWidth = this.content.width;
    742. this.newHeight = this.content.height;
    743. this.fullExpandWidth = this.newWidth;
    744. this.fullExpandHeight = this.newHeight;
    745. this.content.style.width = this.thumbWidth +'px';
    746. this.content.style.height = this.thumbHeight +'px';
    747. this.getCaption();
    748. this.wrapper.appendChild(this.content);
    749. this.content.style.position = 'relative'; // Saf
    750. if (this.caption) this.wrapper.appendChild(this.caption);
    751. this.wrapper.style.left = this.thumbLeft +'px';
    752. this.wrapper.style.top = this.thumbTop +'px';
    753. hs.container.appendChild(this.wrapper);
    754. // correct for borders
    755. this.offsetBorderW = (this.content.offsetWidth - this.thumbWidth) / 2;
    756. this.offsetBorderH = (this.content.offsetHeight - this.thumbHeight) / 2;
    757. var modMarginRight = hs.marginRight + 2 * this.offsetBorderW;
    758. this.marginBottom += 2 * this.offsetBorderH;
    759. var ratio = this.newWidth / this.newHeight;
    760. var minWidth = this.allowSizeReduction
    761. ? this.minWidth : this.newWidth;
    762. var minHeight = this.allowSizeReduction
    763. ? this.minHeight : this.newHeight;
    764. var justify = { x: 'auto', y: 'auto' };
    765. var page = hs.getPageSize();
    766. // justify
    767. this.x = {
    768. min: parseInt(this.thumbLeft) - this.offsetBorderW + this.thumbOffsetBorderW,
    769. span: this.newWidth,
    770. minSpan: (this.newWidth < minWidth && !hs.padToMinWidth)
    771. ? this.newWidth : minWidth,
    772. marginMin: hs.marginLeft,
    773. marginMax: modMarginRight,
    774. scroll: page.scrollLeft,
    775. clientSpan: page.width,
    776. thumbSpan: this.thumbWidth
    777. };
    778. var oldRight = this.x.min + parseInt(this.thumbWidth);
    779. this.x = this.justify(this.x);
    780. this.y = {
    781. min: parseInt(this.thumbTop) - this.offsetBorderH + this.thumbOffsetBorderH,
    782. span: this.newHeight,
    783. minSpan: this.newHeight < minHeight ? this.newHeight : minHeight,
    784. marginMin: hs.marginTop,
    785. marginMax: this.marginBottom,
    786. scroll: page.scrollTop,
    787. clientSpan: page.height,
    788. thumbSpan: this.thumbHeight
    789. };
    790. var oldBottom = this.y.min + parseInt(this.thumbHeight);
    791. this.y = this.justify(this.y);
    792. this.correctRatio(ratio);
    793. var x = this.x;
    794. var y = this.y;
    795. this.show();
    796. } catch (e) {
    797. window.location.href = hs.getSrc(this.a);
    798. }
    799. },
    800. justify : function (p) {
    801. var tgt, dim = p == this.x ? 'x' : 'y';
    802. var hasMovedMin = false;
    803. var allowReduce = true;
    804. // calculate p.min
    805. p.min = Math.round(p.min - ((p.span - p.thumbSpan) / 2)); // auto
    806. if (p.min < p.scroll + p.marginMin) {
    807. p.min = p.scroll + p.marginMin;
    808. hasMovedMin = true;
    809. }
    810. if (p.span < p.minSpan) {
    811. p.span = p.minSpan;
    812. allowReduce = false;
    813. }
    814. // calculate right/newWidth
    815. if (p.min + p.span > p.scroll + p.clientSpan - p.marginMax) {
    816. if (hasMovedMin && allowReduce) {
    817. p.span = p.clientSpan - p.marginMin - p.marginMax; // can't expand more
    818. } else if (p.span < p.clientSpan - p.marginMin - p.marginMax) { // move newTop up
    819. p.min = p.scroll + p.clientSpan - p.span - p.marginMin - p.marginMax;
    820. } else { // image larger than client
    821. p.min = p.scroll + p.marginMin;
    822. if (allowReduce) p.span = p.clientSpan - p.marginMin - p.marginMax;
    823. }
    824. }
    825. if (p.span < p.minSpan) {
    826. p.span = p.minSpan;
    827. allowReduce = false;
    828. }
    829. if (p.min < p.marginMin) {
    830. tmpMin = p.min;
    831. p.min = p.marginMin;
    832. if (allowReduce) p.span = p.span - (p.min - tmpMin);
    833. }
    834. return p;
    835. },
    836. correctRatio : function(ratio) {
    837. var x = this.x;
    838. var y = this.y;
    839. var changed = false;
    840. if (x.span / y.span > ratio) { // width greater
    841. var tmpWidth = x.span;
    842. x.span = y.span * ratio;
    843. if (x.span < x.minSpan) { // below minWidth
    844. if (hs.padToMinWidth) x.imgSpan = x.span;
    845. x.span = x.minSpan;
    846. if (!x.imgSpan)
    847. y.span = x.span / ratio;
    848. }
    849. changed = true;
    850. } else if (x.span / y.span < ratio) { // height greater
    851. var tmpHeight = y.span;
    852. y.span = x.span / ratio;
    853. changed = true;
    854. }
    855. if (changed) {
    856. x.min = parseInt(this.thumbLeft) - this.offsetBorderW + this.thumbOffsetBorderW;
    857. x.minSpan = x.span;
    858. this.x = this.justify(x);
    859. y.min = parseInt(this.thumbTop) - this.offsetBorderH + this.thumbOffsetBorderH;
    860. y.minSpan = y.span;
    861. this.y = this.justify(y);
    862. }
    863. },
    864. show : function () {
    865. // Selectbox bug
    866. var imgPos = {x: this.x.min - 20, y: this.y.min - 20, w: this.x.span + 40,
    867. h: this.y.span + 40
    868. + this.spaceForCaption};
    869. hs.hideSelects = (hs.ie && hs.ieVersion() < 7);
    870. if (hs.hideSelects) this.showHideElements('SELECT', 'hidden', imgPos);
    871. // Iframes bug
    872. hs.hideIframes = ((window.opera && navigator.appVersion < 9) || navigator.vendor == 'KDE'
    873. || (hs.ie && hs.ieVersion() < 5.5));
    874. if (hs.hideIframes) this.showHideElements('IFRAME', 'hidden', imgPos);
    875. // Scrollbars bug
    876. if (hs.geckoMac) this.showHideElements('*', 'hidden', imgPos);
    877. if (this.x.imgSpan) this.content.style.margin = '0 auto';
    878. this.overlays = [];
    879. // Apply size change
    880. this.changeSize(
    881. 1,
    882. {
    883. x: this.thumbLeft + this.thumbOffsetBorderW - this.offsetBorderW,
    884. y: this.thumbTop + this.thumbOffsetBorderH - this.offsetBorderH,
    885. w: this.thumbWidth,
    886. h: this.thumbHeight,
    887. imgW: this.thumbWidth,
    888. o: hs.outlineStartOffset
    889. },
    890. {
    891. x: this.x.min,
    892. y: this.y.min,
    893. w: this.x.span,
    894. h: this.y.span,
    895. imgW: this.x.imgSpan,
    896. o: this.objOutline ? this.objOutline.offset : 0
    897. },
    898. hs.expandDuration,
    899. hs.expandSteps
    900. );
    901. },
    902. changeSize : function(up, from, to, dur, steps) {
    903. if (up && this.objOutline && !this.outlineWhileAnimating)
    904. this.objOutline.setPosition(this, this.x.min, this.y.min, this.x.span, this.y.span);
    905. else if (!up && this.objOutline) {
    906. if (this.outlineWhileAnimating) this.objOutline.setPosition(this, from.x, from.y, from.w, from.h);
    907. else this.objOutline.destroy();
    908. }
    909. if (!up) { // remove children
    910. var n = this.wrapper.childNodes.length;
    911. for (var i = n - 1; i >= 0 ; i--) {
    912. var child = this.wrapper.childNodes[i];
    913. if (child != this.content) hs.discardElement(child);
    914. }
    915. }
    916. if (this.fadeInOut) {
    917. from.op = up ? 0 : 1;
    918. to.op = up;
    919. }
    920. var t,
    921. exp = this,
    922. easing = Math[this.easing] || Math.easeInQuad;
    923. if (!up) easing = Math[this.easingClose] || easing;
    924. for (var i = 1; i <= steps; i++) {
    925. t = Math.round(i * (dur / steps));
    926. (function(){
    927. var pI = i, size = {};
    928. for (var x in from) {
    929. size[x] = easing(t, from[x], to[x] - from[x], dur);
    930. if (/[xywh]/.test(x)) size[x] = Math.round(size[x]);
    931. }
    932. setTimeout ( function() {
    933. if (up && pI == 1) {
    934. exp.content.style.visibility = 'visible';
    935. exp.a.className += ' highslide-active-anchor';
    936. }
    937. exp.setSize(size);
    938. }, t);
    939. })();
    940. }
    941. if (up) {
    942. setTimeout(function() {
    943. if (exp.objOutline) exp.objOutline.table.style.visibility = "visible";
    944. }, t);
    945. setTimeout(function() {
    946. if (exp.caption) exp.writeCaption();
    947. exp.afterExpand();
    948. }, t + 50);
    949. }
    950. else setTimeout(function() { exp.afterClose(); }, t);
    951. },
    952. setSize : function (to) {
    953. try {
    954. this.wrapper.style.width = (to.w + 2*this.offsetBorderW) +'px';
    955. this.content.style.width =
    956. ((to.imgW && !isNaN(to.imgW)) ? to.imgW : to.w) +'px';
    957. if (hs.safari) this.content.style.maxWidth = this.content.style.width;
    958. this.content.style.height = to.h +'px';
    959. if (to.op) hs.setStyles(this.wrapper, { opacity: to.op });
    960. if (this.objOutline && this.outlineWhileAnimating) {
    961. var o = this.objOutline.offset - to.o;
    962. this.objOutline.setPosition(this, to.x + o, to.y + o, to.w - 2 * o, to.h - 2 * o, 1);
    963. }
    964. hs.setStyles ( this.wrapper,
    965. {
    966. 'visibility': 'visible',
    967. 'left': to.x +'px',
    968. 'top': to.y +'px'
    969. }
    970. );
    971. } catch (e) { window.location.href = hs.getSrc(this.a); }
    972. },
    973. afterExpand : function() {
    974. this.isExpanded = true;
    975. this.focus();
    976. this.createOverlays();
    977. if (hs.showCredits) this.writeCredits();
    978. if (this.isImage && this.fullExpandWidth > this.x.span) this.createFullExpand();
    979. if (!this.caption) this.prepareNextOutline();
    980. },
    981. prepareNextOutline : function() {
    982. var key = this.key;
    983. var outlineType = this.outlineType;
    984. new hs.Outline(outlineType,
    985. function () { try { hs.expanders[key].preloadNext(); } catch (e) {} });
    986. },
    987. preloadNext : function() {
    988. var next = hs.getAdjacentAnchor(this.key, 1);
    989. if (next.onclick.toString().match(/hs\.expand/))
    990. var img = hs.createElement('img', { src: hs.getSrc(next) });
    991. },
    992. cancelLoading : function() {
    993. hs.expanders[this.key] = null;
    994. this.a.style.cursor = this.originalCursor;
    995. if (this.loading) hs.loading.style.left = '-9999px';
    996. },
    997. writeCredits : function () {
    998. this.credits = hs.createElement('a',
    999. {
    1000. href: hs.creditsHref,
    1001. className: 'highslide-credits',
    1002. innerHTML: hs.creditsText,
    1003. title: hs.creditsTitle
    1004. }
    1005. );
    1006. this.createOverlay({ overlayId: this.credits, position: 'top left' });
    1007. },
    1008. getCaption : function() {
    1009. if (!this.captionId && this.thumbsUserSetId)
    1010. this.captionId = 'caption-for-'+ this.thumbsUserSetId;
    1011. if (this.captionId) this.caption = hs.getNode(this.captionId);
    1012. if (!this.caption && !this.captionText && this.captionEval) try {
    1013. this.captionText = eval(this.captionEval);
    1014. } catch (e) {}
    1015. if (!this.caption && this.captionText) this.caption = hs.createElement('div',
    1016. { className: 'highslide-caption', innerHTML: this.captionText } );
    1017. if (!this.caption) {
    1018. var next = this.a.nextSibling;
    1019. while (next && !hs.isHsAnchor(next)) {
    1020. if (/highslide-caption/.test(next.className || null)) {
    1021. this.caption = next.cloneNode(1);
    1022. break;
    1023. }
    1024. next = next.nextSibling;
    1025. }
    1026. }
    1027. if (this.caption) {
    1028. this.marginBottom += this.spaceForCaption;
    1029. }
    1030. },
    1031. writeCaption : function() {
    1032. try {
    1033. hs.setStyles(this.wrapper, { width: this.wrapper.offsetWidth +'px',
    1034. height: this.wrapper.offsetHeight +'px' } );
    1035. hs.setStyles(this.caption, { visibility: 'hidden', marginTop: hs.safari ? 0 : '-'+ this.y.span +'px'});
    1036. this.caption.className += ' highslide-display-block';
    1037. var height, exp = this;
    1038. if (hs.ie && (hs.ieVersion() < 6 || document.compatMode == 'BackCompat')) {
    1039. height = this.caption.offsetHeight;
    1040. } else {
    1041. var temp = hs.createElement('div', {innerHTML: this.caption.innerHTML},
    1042. null, null, true); // to get height
    1043. this.caption.innerHTML = '';
    1044. this.caption.appendChild(temp);
    1045. height = this.caption.childNodes[0].offsetHeight;
    1046. this.caption.innerHTML = this.caption.childNodes[0].innerHTML;
    1047. }
    1048. hs.setStyles(this.caption, { overflow: 'hidden', height: 0, zIndex: 2, marginTop: 0 });
    1049. this.wrapper.style.height = 'auto';
    1050. if (hs.captionSlideSpeed) {
    1051. var step = (Math.round(height/50) || 1) * hs.captionSlideSpeed;
    1052. } else {
    1053. this.placeCaption(height, 1);
    1054. return;
    1055. }
    1056. for (var h = height % step, t = 0; h <= height; h += step, t += 10) {
    1057. (function(){
    1058. var pH = h, end = (h == height) ? 1 : 0;
    1059. setTimeout( function() {
    1060. exp.placeCaption(pH, end);
    1061. }, t);
    1062. })();
    1063. }
    1064. } catch (e) {}
    1065. },
    1066. placeCaption : function(height, end) {
    1067. if (!this.caption) return;
    1068. this.caption.style.height = height +'px';
    1069. this.caption.style.visibility = 'visible';
    1070. this.y.span = this.wrapper.offsetHeight - 2 * this.offsetBorderH;
    1071. var o = this.objOutline;
    1072. if (o) {
    1073. var h = this.wrapper.offsetHeight - 2 * this.objOutline.offset;
    1074. if (h >= 0) o.td[4].style.height = h +'px';
    1075. if (o.hasAlphaImageLoader) o.td[3].style.height = o.td[5].style.height = o.td[4].style.height;
    1076. }
    1077. if (end) this.prepareNextOutline();
    1078. },
    1079. showHideElements : function (tagName, visibility, imgPos) {
    1080. var els = document.getElementsByTagName(tagName);
    1081. var prop = tagName == '*' ? 'overflow' : 'visibility';
    1082. for (var i = 0; i < els.length; i++) {
    1083. if (prop == 'visibility' || (document.defaultView.getComputedStyle(
    1084. els[i], "").getPropertyValue('overflow') == 'auto'
    1085. || els[i].getAttribute('hidden-by') != null)) {
    1086. var hiddenBy = els[i].getAttribute('hidden-by');
    1087. if (visibility == 'visible' && hiddenBy) {
    1088. hiddenBy = hiddenBy.replace('['+ this.key +']', '');
    1089. els[i].setAttribute('hidden-by', hiddenBy);
    1090. if (!hiddenBy) els[i].style[prop] = els[i].origProp;
    1091. } else if (visibility == 'hidden') { // hide if behind
    1092. var elPos = hs.position(els[i]);
    1093. elPos.w = els[i].offsetWidth;
    1094. elPos.h = els[i].offsetHeight;
    1095. var clearsX = (elPos.x + elPos.w < imgPos.x || elPos.x > imgPos.x + imgPos.w);
    1096. var clearsY = (elPos.y + elPos.h < imgPos.y || elPos.y > imgPos.y + imgPos.h);
    1097. var wrapperKey = hs.getWrapperKey(els[i]);
    1098. if (!clearsX && !clearsY && wrapperKey != this.key) { // element falls behind image
    1099. if (!hiddenBy) {
    1100. els[i].setAttribute('hidden-by', '['+ this.key +']');
    1101. els[i].origProp = els[i].style[prop];
    1102. els[i].style[prop] = 'hidden';
    1103. } else if (!hiddenBy.match('['+ this.key +']')) {
    1104. els[i].setAttribute('hidden-by', hiddenBy + '['+ this.key +']');
    1105. }
    1106. } else if (hiddenBy == '['+ this.key +']' || hs.focusKey == wrapperKey) { // on move
    1107. els[i].setAttribute('hidden-by', '');
    1108. els[i].style[prop] = els[i].origProp || '';
    1109. } else if (hiddenBy && hiddenBy.match('['+ this.key +']')) {
    1110. els[i].setAttribute('hidden-by', hiddenBy.replace('['+ this.key +']', ''));
    1111. }
    1112. }
    1113. }
    1114. }
    1115. },
    1116. focus : function() {
    1117. this.wrapper.style.zIndex = hs.zIndexCounter++;
    1118. // blur others
    1119. for (var i = 0; i < hs.expanders.length; i++) {
    1120. if (hs.expanders[i] && i == hs.focusKey) {
    1121. var blurExp = hs.expanders[i];
    1122. blurExp.content.className += ' highslide-'+ blurExp.contentType +'-blur';
    1123. if (blurExp.caption) {
    1124. blurExp.caption.className += ' highslide-caption-blur';
    1125. }
    1126. blurExp.content.style.cursor = hs.ie ? 'hand' : 'pointer';
    1127. blurExp.content.title = hs.focusTitle;
    1128. }
    1129. }
    1130. // focus this
    1131. if (this.objOutline) this.objOutline.table.style.zIndex
    1132. = this.wrapper.style.zIndex;
    1133. this.content.className = 'highslide-'+ this.contentType;
    1134. if (this.caption) {
    1135. this.caption.className = this.caption.className.replace(' highslide-caption-blur', '');
    1136. }
    1137. this.content.title = hs.restoreTitle;
    1138. hs.styleRestoreCursor = window.opera ? 'pointer' : 'url('+ hs.graphicsDir + hs.restoreCursor +'), pointer';
    1139. if (hs.ie && hs.ieVersion() < 6) hs.styleRestoreCursor = 'hand';
    1140. this.content.style.cursor = hs.styleRestoreCursor;
    1141. hs.focusKey = this.key;
    1142. hs.addEventListener(document, 'keydown', hs.keyHandler);
    1143. },
    1144. move : function (e) {
    1145. this.x.min = e.left + e.dX;
    1146. this.y.min = e.top + e.dY;
    1147. if (e.type == 'image') this.content.style.cursor = 'move';
    1148. hs.setStyles(this.wrapper, { left: this.x.min +'px', top: this.y.min +'px' });
    1149. if (this.objOutline)
    1150. this.objOutline.setPosition(this, this.x.min, this.y.min, this.x.span, this.y.span);
    1151. },
    1152. close : function() {
    1153. if (this.isClosing || !this.isExpanded) return;
    1154. this.isClosing = true;
    1155. hs.removeEventListener(document, 'keydown', hs.keyHandler);
    1156. try {
    1157. this.content.style.cursor = 'default';
    1158. this.changeSize(
    1159. 0,
    1160. {
    1161. x: this.x.min,
    1162. y: this.y.min,
    1163. w: this.x.span,
    1164. h: parseInt(this.content.style.height),
    1165. imgW: this.x.imgSpan,
    1166. o: this.objOutline ? this.objOutline.offset : 0
    1167. },
    1168. {
    1169. x: this.thumbLeft - this.offsetBorderW + this.thumbOffsetBorderW,
    1170. y: this.thumbTop - this.offsetBorderH + this.thumbOffsetBorderH,
    1171. w: this.thumbWidth,
    1172. h: this.thumbHeight,
    1173. imgW: this.thumbWidth,
    1174. o: hs.outlineStartOffset
    1175. },
    1176. hs.restoreDuration,
    1177. hs.restoreSteps
    1178. );
    1179. } catch (e) { this.afterClose(); }
    1180. },
    1181. createOverlay : function (o) {
    1182. var el = o.overlayId;
    1183. if (typeof el == 'string') el = hs.getNode(el);
    1184. if (!el || typeof el == 'string') return;
    1185. var overlay = hs.createElement(
    1186. 'div',
    1187. { id: 'hsId'+ hs.idCounter++ },
    1188. {
    1189. 'left' : 0,
    1190. 'top' : 0,
    1191. 'position' : 'absolute',
    1192. 'zIndex' : 3,
    1193. 'visibility' : 'hidden'
    1194. },
    1195. this.wrapper,
    1196. true
    1197. );
    1198. if (o.opacity) hs.setStyles(el, { opacity: o.opacity });
    1199. el.style.styleFloat = 'none';
    1200. el.className += ' highslide-display-block';
    1201. overlay.appendChild(el);
    1202. overlay.hsPos = o.position;
    1203. this.positionOverlay(overlay);
    1204. if (o.hideOnMouseOut) overlay.setAttribute('hideOnMouseOut', true);
    1205. if (!o.opacity) o.opacity = 1;
    1206. overlay.setAttribute('opacity', o.opacity);
    1207. hs.fade(overlay, 0, o.opacity);
    1208. hs.push(this.overlays, hs.idCounter - 1);
    1209. },
    1210. positionOverlay : function(overlay, conH) {
    1211. var left = this.offsetBorderW,
    1212. dLeft = this.x.span - overlay.offsetWidth,
    1213. top = this.offsetBorderH,
    1214. dTop = (conH || parseInt(this.content.style.height)) - overlay.offsetHeight,
    1215. p = overlay.hsPos || 'center center';
    1216. if (/^bottom/.test(p)) top += dTop;
    1217. if (/^center/.test(p)) top += dTop / 2;
    1218. if (/right$/.test(p)) left += dLeft;
    1219. if (/center$/.test(p)) left += dLeft / 2;
    1220. overlay.style.left = left +'px';
    1221. overlay.style.top = top +'px';
    1222. },
    1223. createOverlays : function() {
    1224. for (var i = 0; i < hs.overlays.length; i++) {
    1225. var o = hs.overlays[i], tId = o.thumbnailId, sg = o.slideshowGroup;
    1226. if ((!tId && !sg) || tId == this.thumbsUserSetId
    1227. || sg === this.slideshowGroup) {
    1228. this.createOverlay(o);
    1229. }
    1230. }
    1231. },
    1232. createFullExpand : function () {
    1233. this.fullExpandLabel = hs.createElement(
    1234. 'a',
    1235. {
    1236. href: 'javascript:hs.expanders['+ this.key +'].doFullExpand();',
    1237. title: hs.fullExpandTitle,
    1238. className: 'highslide-full-expand'
    1239. }
    1240. );
    1241. this.createOverlay({
    1242. overlayId: this.fullExpandLabel,
    1243. position: hs.fullExpandPosition,
    1244. hideOnMouseOut: true,
    1245. opacity: hs.fullExpandOpacity
    1246. });
    1247. },
    1248. doFullExpand : function () {
    1249. try {
    1250. if (this.fullExpandLabel) hs.discardElement(this.fullExpandLabel);
    1251. this.focus();
    1252. this.x.min = parseInt(this.wrapper.style.left) - (this.fullExpandWidth - this.content.width) / 2;
    1253. if (this.x.min < hs.marginLeft) this.x.min = hs.marginLeft;
    1254. this.wrapper.style.left = this.x.min +'px';
    1255. hs.setStyles(this.content, { width: this.fullExpandWidth +'px', maxWidth: this.fullExpandWidth +'px',
    1256. height: this.fullExpandHeight +'px'});
    1257. this.x.span = this.fullExpandWidth;
    1258. this.wrapper.style.width = (this.x.span + 2*this.offsetBorderW) +'px';
    1259. this.y.span = this.wrapper.offsetHeight - 2 * this.offsetBorderH;
    1260. if (this.objOutline)
    1261. this.objOutline.setPosition(this, this.x.min, this.y.min, this.x.span, this.y.span);
    1262. for (var i = 0; i < this.overlays.length; i++)
    1263. this.positionOverlay(hs.$('hsId'+ this.overlays[i]));
    1264. this.redoShowHide();
    1265. } catch (e) {
    1266. window.location.href = this.content.src;
    1267. }
    1268. },
    1269. // on end move and resize
    1270. redoShowHide : function() {
    1271. var imgPos = {
    1272. x: parseInt(this.wrapper.style.left) - 20,
    1273. y: parseInt(this.wrapper.style.top) - 20,
    1274. w: this.content.offsetWidth + 40,
    1275. h: this.content.offsetHeight + 40
    1276. + this.spaceForCaption
    1277. };
    1278. if (hs.hideSelects) this.showHideElements('SELECT', 'hidden', imgPos);
    1279. if (hs.hideIframes) this.showHideElements('IFRAME', 'hidden', imgPos);
    1280. if (hs.geckoMac) this.showHideElements('*', 'hidden', imgPos);
    1281. },
    1282. afterClose : function () {
    1283. this.a.className = this.a.className.replace('highslide-active-anchor', '');
    1284. if (hs.hideSelects) this.showHideElements('SELECT', 'visible');
    1285. if (hs.hideIframes) this.showHideElements('IFRAME', 'visible');
    1286. if (hs.geckoMac) this.showHideElements('*', 'visible');
    1287. if (this.objOutline && this.outlineWhileAnimating) this.objOutline.destroy();
    1288. hs.discardElement(this.wrapper);
    1289. hs.expanders[this.key] = null;
    1290. hs.reOrder();
    1291. }
    1292. };
    1293. // history
    1294. var HsExpander = hs.Expander;
    1295. // set handlers
    1296. hs.addEventListener(document, 'mousedown', hs.mouseClickHandler);
    1297. hs.addEventListener(document, 'mouseup', hs.mouseClickHandler);
    1298. hs.addEventListener(window, 'load', hs.preloadImages);
    Alles anzeigen

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von Hij4cker ()

  • Der ewig lange JavaScript-Code ist in einer eigenen Datei mit dem Namen "highslide.js". Da der Code so lang ist macht das auch durchaus Sinn ;)
    Eingebunden wird die Datei dann im Header. Das sieht dann wie folgt aus:

    HTML-Quellcode

    1. <head>
    2. <script type="text/javascript" src="MEINPFAD/highslide.js"></script>
    3. </head>

    MEINPFAD musst du natürlich durch den richtigen Pfad ersetzen :)
  • Ich will ja nicht unhöflich erscheinen, aber besuche doch einfach die Webseite von dem Produkt: Highslide JS - JavaScript thumbnail viewer
    Dort gibt es die aktuelle Version und viele Beispiel zum Download ;)

    Gruß
    Broken Sword
    Auf dem Abstellgleis sah man ihn liegen,
    Auf dem Abstellgleis zwischen Schwelle und Gestein,
    Auf dem Abstellgleis im strömenden Regen,
    Auf dem Abstellgleis allein.