CINXE.COM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="Author" content="Torstein Hønsi Web" /> <link rel="shortcut icon" href="favicon.ico" /> <link rel="stylesheet" type="text/css" href="/styles.css" /> <link rel="stylesheet" type="text/css" href="/highslide/highslide.css" />  <title>Highslide JS - JavaScript thumbnail viewer</title> <script type="text/javascript" src="js.js"></script> <script type="text/javascript" src="highslide/highslide.js.php?full=true"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js"></script> <script type="text/javascript"> //<![CDATA[ hs.showCredits = 0; hs.padToMinWidth = true; //hs.align = 'center'; if (hs.registerOverlay) { // The white controlbar overlay hs.registerOverlay({ thumbnailId: 'thumb3', overlayId: 'controlbar', position: 'top right', hideOnMouseOut: true }); // The simple semitransparent close button overlay hs.registerOverlay({ thumbnailId: 'thumb2', html: '<div class="closebutton" onclick="return hs.close(this)" title="Close"></div>', position: 'top right', fade: 2 // fading the semi-transparent overlay looks bad in IE }); } // ONLY FOR THIS EXAMPLE PAGE! // Initialize wrapper for rounded-white. The default wrapper (drop-shadow) // is initialized internally. if (hs.addEventListener && hs.Outline) hs.addEventListener(window, 'load', function () { new hs.Outline('rounded-white'); new hs.Outline('glossy-dark'); }); // The gallery example on the front page var galleryOptions = { slideshowGroup: 'gallery', wrapperClassName: 'dark', //outlineType: 'glossy-dark', dimmingOpacity: 0.8, align: 'center', transitions: ['expand', 'crossfade'], fadeInOut: true, wrapperClassName: 'borderless floating-caption', marginLeft: 100, marginBottom: 80, numberPosition: 'caption' }; if (hs.addSlideshow) hs.addSlideshow({ slideshowGroup: 'gallery', interval: 5000, repeat: false, useControls: true, overlayOptions: { className: 'text-controls', position: 'bottom center', relativeTo: 'viewport', offsetY: -60 }, thumbstrip: { position: 'bottom center', mode: 'horizontal', relativeTo: 'viewport' } }); hs.Expander.prototype.onInit = function() { hs.marginBottom = (this.slideshowGroup == 'gallery') ? 150 : 15; } // focus the name field hs.Expander.prototype.onAfterExpand = function() { if (this.a.id == 'contactAnchor') { var iframe = window.frames[this.iframe.name], doc = iframe.document; if (doc.getElementById("theForm")) { doc.getElementById("theForm").elements["name"].focus(); } } } // Not Highslide related function frmPaypalSubmit(frm) { if (frm.os0.value == '') { alert ('Please enter your domain name'); return false; } return true; } //]]> </script> <style type="text/css"> .control { float: right; display: block; /*position: relative;*/ margin: 0 5px; font-size: 9pt; font-weight: bold; text-decoration: none; text-transform: uppercase; } .control:hover { color: black !important; } </style> <meta name="description" content="Highslide JS - JavaScript thumbnail viewer" /> <meta name="keywords" content="vevstein, highslide, js, javascript, thumbnail, thumbnails, image viewer, image, viewer, popup, popups, popup blocker, popup blockers, ajax, web design, css, dhtml, dynamic html" /> </head> <body>  <div id="ytre"><div id="ytre-inner"> <div id="topp"> <div id="topp-inner"> <a href="/"> <img src="design/header-left.gif" width="726" height="145" alt="Highslide JS" style="border: none"/> </a> </div> </div> <div id="google-cse"> Search the Highslide website <form action="http://highslide.com/search.php" id="cse-search-box"> <div> <input type="hidden" name="cx" value="007503335131654211227:eq7-xetvple" /> <input type="hidden" name="cof" value="FORID:9" /> <input type="hidden" name="ie" value="UTF-8" /> <input type="text" name="q" size="20" /> <input type="submit" name="sa" value="OK" /> </div> </form> <script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en"></script> </div> <table id="kropp"> <tr> <td id="column-left"> <div id="column-left-content"> <ul id="menu"> <li><a href="/#examples">Examples</a></li> <li><a href="/#licence">License</a></li> <li><a href="/#implementations">Implementations</a></li> <li><a href="/#installation">Installation</a></li> <li><a href="/#compatibility">Compatibility</a></li> <li><a style="margin-top: 15px" href="/download.php" >Download</a></li> <li><a href="/editor" >Editor</a></li> <li><a href="/configurator.php" >Configurator</a></li> <li><a href="/index.htm">Barebones samples</a></li> <li><a href="/changelog.php">Changelog</a></li> <li><a style="margin-top: 15px" href="/support">Support</a></li> <li><a href="/tutorial">Tutorial</a></li> <li><a href="/ref">Reference</a></li> <li><a href="http://highsoft.com">About the author</a></li> <li><a style="margin-top: 15px" href="http://www.highcharts.com" >Highcharts</a></li> </ul> <div style="margin: 40px 0 0 32px; padding: 3px; background: white; border: 1px solid silver"> <a href="http://validator.w3.org/check?uri=referer"><img src="design/valid-xhtml11.png" alt="Valid XHTML 1.1" height="31" width="88" style="border: none; margin-bottom: 5px"/></a> <br/> <a href="http://jigsaw.w3.org/css-validator/check/referer"><img style="border:0;width:88px;height:31px" src="design/vcss.png" alt="Valid CSS!" /> </a> </div> <div id="quotes"> <h3>Testimonials</h3> <div class="quote">This is the single best usability improvement I've seen in image viewing since the digital age. For instance, the company [XXX] just bought [YYY], for all the whiz-bang, simply cannot (in my opinion) rival the elegant and beautiful, yet powerful simplicity of your creation. I congratulate and thank you sincerely. It is an added bonus that you have made your creation available under such a non-restrictive licence. I hope your usability talent is well-appreciated. <div class="author">Janos, Budapest</div> </div> <div class="quote">Highslide is an outstanding piece of work, and Iâ€™m particularly impressed by how youâ€™ve dealt with issues such as browser compatibility and accessibility without compromising on functionality. Iâ€™ve been trying all weekend to find where the limitations are, but you seem to have covered everything, and in an elegant manner too â€“ well done! <div class="author">Gary, UK</div> </div> <div class="quote">Again, I am truly appreciative and impressed by your quality of product, level of support, technical abilities, and willingness to help. It is for all these reasons that I am enamored by your product and customer support. It is also for these reasons that I am purchasing a license for your software. <div class="author">Sean Dempsey</div> </div> <div class="quote"> We've been looking at a way to enhance our ecommerce and photography software for some time, and were lucky enough to stumble upon Highslide JS. Integration was incredibly straight forward, the documentation and examples meant that we could very quickly decide on the best way forward for our own application, and within an hour we had rewritten our own software to include the Highslide JS functionality as standard. We've tested it on several browsers across several platforms and it works perfectly so far, with no hanging around waiting for java applets to install or inconvenient cabfile installations. We would have no hesitation whatsoever in recommending Highslide to anyone who is considering taking a huge leap forward with their image galleries. Excellent work Torstein, thank you! <div class="author">Mark Reid<br/> Director, Three Ravens Ltd</div> </div> <div class="quote">First of all: this is one of the best javascripts I've ever encountered. Very useful, customizable and rock solid. You are doing a fantastic job, Torstein. (...)</div> <div class="quote">(...) And that's not all ... you're on this forum answering all those questions with such patience. What a saint.</div> <div class="quote">Highslide JS Gallery is a unique way of modern presentation of any kind of products' pictures. It allows the whole content of web site to be more attractive and user friendly. Highslide JS is incomparably better alternative to other well known and rather common lightbox scripts. We recommend Highslide JS for anyone who wants to shine! <div class="author"><a href="http://www.okinet.pl">okinet interactive group</a></div> </div> <div class="quote">The Highslide Editor is freaking outrageous. Just plain awesome. THE best editor for js libraries I've ever seen (and used). Beats everything. The whole concept and outlining is so well thought-out. And the fact that the preview is updated instantaneously is simply outstanding. Given the complexity of Highslide itself this must have been a tremendous amount of work. <div class="author"><a href="http://highslide.com/forum/viewtopic.php?f=7&t=3787&st=0&sk=t&sd=a&start=15#p19920">Joachim Scheffer, Germany</a></div> </div> </div> </div> </td> <td id="column-center">  <h2><span><span>What is Highslide JS?</span></span></h2> <div class="section"><div class="section-inner"> Highslide JS is an image, media and gallery viewer written in JavaScript. These are some of its advantages: <div style="float:right; width: 151px; margin: 1em; padding: 0 1em; min-height: 120px; background: url(/design/greenbox.png) no-repeat"> <h4 style="font-weight: bold; font-style: italic; color: white; font-size: 14pt; margin-top: 0.8em"> Tip! </h4> <p style="color: black">Use the visual <a href="/editor">Highslide Editor</a> to set up your Highslide installation without writing code.</p> </div> <ul> <li>Quick and elegant looking.</li> <li>No plugins like Flash or Java required.</li> <li>Popup blockers are no problem. The content opens within the active browser window.</li> <li>Single click. After opening the image or HTML popup, the user can scroll further down or leave the page without closing it.</li> <li>Lots of configuration options and scalability without compromizing on simplicity. A component system lets you strip away unused features down to a filesize of 10kB.</li> <li>Outstanding, unconditional and free user support for both commercial and non-commercial users.</li> <li>Compatibility and safe degrading. If the user has disabled JavaScript or is using an old browser, the browser redirects directly to the image itself or to a given HTML page.</li> <li>Source code included.</li> </ul> </div></div> <div class="section-bottom"><div><div></div></div></div> <h2 id="examples"><span><span>Examples</span></span></h2> <div class="section" id="samples-wrapper"><div class="section-inner"> <div class="break"></div> <h4>Highslide JS core</h4> <div class="thumbwrapper"> <a id="thumb1" href="samples/full1.jpg" class="highslide" onclick="return hs.expand (this, { wrapperClassName: 'wide-border'})"> <img style="margin-top: 15px" width="120" height="90" src="samples/thumb1.jpg" alt="Highslide JS" title="Click to enlarge" /> </a> </div> <div class="thumbwrapper"> <a href="samples/full3.jpg" class="highslide" onclick="return hs.expand(this, { outlineType: 'rounded-white' })"> <img style="margin-top: 15px" id="thumb3" width="120" height="90" src="samples/thumb3.jpg" alt="Highslide JS" title="Click to enlarge" /> </a> <div class="highslide-caption"> This instance uses graphic outlines to create a rounded border with a drop shadow. Full HTML captions can be assigned to each image. </div> </div> <div class="thumbwrapper"> <a href="samples/full2.jpg" class="highslide" onclick="return hs.expand(this, {wrapperClassName: 'borderless floating-caption', dimmingOpacity: 0.75, align: 'center'})"> <img id="thumb2" width="107" height="120" src="samples/thumb2.jpg" alt="Highslide JS" title="Click to enlarge" /> </a> <div class='highslide-caption' id="caption-for-thumb2"> You can add a caption below the expanded image. Use CSS to style the borders and captions. This image also has a Mac-style close button overlaid in the top right corner. </div> </div> <div class="thumbwrapper"> <a href="samples/full4.jpg" class="highslide" onclick="return hs.expand(this, {wrapperClassName: 'wide-border', captionOverlay: { position: 'rightpanel'}})"> <img width="80" height="120" src="samples/thumb4.jpg" alt="Highslide JS" title="Click to enlarge" /> </a> <div class='highslide-caption' style="padding: 0 10px 10px 0"> <h4>Caption on the right</h4> You can open more than one image at a time, and arrange them on your screen by dragging them around. The captions can be positioned anywhere relative to the image. </div> </div> <div class="thumbwrapper"> <a id="thumb5" href="showimage.php?src=samples/full5.jpg" class="highslide" onclick="return hs.expand(this, { src: 'samples/full5.jpg', wrapperClassName: 'colored-border', outlineType: null, align: 'center'})"> <img style="margin-top: 10px" width="120" height="102" src="samples/thumb5.jpg" alt="Highslide JS" title="Click to enlarge" /> </a> <div class='highslide-caption'> The images by default try to expand equally in all directions from the thumbnails, but you can also position them in the center like this case. Or you can for instance specify a 200px left margin to keep your menu visible, or anchor the image to one corner of the thumbnail. </div> </div> <div class="thumbwrapper"> <a href="showimage.php?src=samples/full6.jpg" class="highslide" onclick="return hs.expand(this, {src: 'samples/full6.jpg', wrapperClassName: 'highslide-white', outlineType: 'rounded-white', dimmingOpacity: 0.75, align: 'center' })" id="thumb6"> <img style="margin-top: 20px" width="120" height="80" src="samples/thumb6.jpg" alt="Highslide JS" title="Click to enlarge" /> </a> <div class='highslide-caption' id='caption-for-thumb6'> <div style="height: 34px"> <a href="#" onclick="return hs.previous(this)" class="control" style="float:left; display: block"> Previous <br/> <small style="font-weight: normal; text-transform: none">left arrow key</small> </a> <a href="#" onclick="return hs.next(this)" class="control" style="float:left; display: block; text-align: right; margin-left: 50px"> Next <br/> <small style="font-weight: normal; text-transform: none">right arrow key</small> </a> <a href="#" onclick="return hs.close(this)" class="control">Close</a> <a href="#" onclick="return false" class="highslide-move control">Move</a> </div> </div> </div> <h4 style="clear: both; padding-top: 1em; width: 400px">With Gallery</h4> <div class="gallery-examples highslide-gallery"> <div class="thumbwrapper"> <a href="samples/gallery3.jpg" class="highslide" onclick="return hs.expand(this, galleryOptions)"> <img src="samples/gallery3.thumb.jpg" alt="Highslide JS" title="Click to enlarge" /> </a> <div class="highslide-caption"> Caption for the first image. </div> </div> <div class="thumbwrapper"> <a href="samples/gallery7.jpg" class="highslide" onclick="return hs.expand(this, galleryOptions)"> <img src="samples/gallery7.thumb.jpg" alt="Highslide JS" title="Click to enlarge" /></a> <div class="highslide-caption"> Caption for the second image. </div> </div> <div class="thumbwrapper"> <a href="samples/gallery5.jpg" class="highslide" onclick="return hs.expand(this, galleryOptions)"> <img src="samples/gallery5.thumb.jpg" alt="Highslide JS" title="Click to enlarge" /></a> <div class="highslide-caption"> Caption for the third image. </div> </div> </div> <h4 style="clear: both; padding-top: 1em; width: 400px">With HTML</h4> <div class="textwrapper"> <a href="#" onclick="return hs.htmlExpand(this, { outlineType: 'rounded-white', wrapperClassName: 'draggable-header', headingText: 'Full HTML content' } )" class="highslide"> HTML content </a> <div class="highslide-maincontent"> This example uses the <code>htmlExpand</code> method to display full HTML content in the expander. The width of the expanding <code>div</code> is set to <code>300px</code>, while the height is omitted to allow Highslide to decide the best fit.<br/><br/> In the expander you can put all kinds of content, for instance form elements. </div> </div> <div class="textwrapper"> <a href="include-long.htm" onclick="return hs.htmlExpand(this, { objectType: 'ajax', contentId: 'highslide-html-8' } )" class="highslide"> Scrolling HTML content </a> <div class="highslide-html-content" id="highslide-html-8" style="padding: 15px; width: auto"> <div style="height:20px; padding: 5px; border-bottom: 1px solid silver"> <a href="#" onclick="return hs.close(this)" class="control">Close</a> <a href="#" onclick="return false" class="highslide-move control">Move</a> </div> <div class="highslide-body" style="padding: 10px"> </div> <div style="text-align: center; border-top: 1px solid silver"> <small> Powered by <i>Highslide JS</i> </small> </div> </div> </div> <div class="textwrapper"> <a href="include-short.htm" onclick="return hs.htmlExpand(this, { outlineType: 'rounded-white', wrapperClassName: 'draggable-header', objectType: 'ajax' } )" class="highslide"> AJAX content </a> </div> <div class="textwrapper"> <a href="ajax.htm#dynamic" onclick="return hs.htmlExpand(this, { contentId: 'highslide-html-ajax', wrapperClassName: 'highslide-white', outlineType: 'rounded-white', outlineWhileAnimating: true, objectType: 'ajax', preserveContent: true } )" class="highslide"> Dynamic AJAX content </a> </div> <div class="textwrapper"> <a href="include-short.htm" onclick="return hs.htmlExpand(this, { outlineType: 'rounded-white', wrapperClassName: 'draggable-header', objectType: 'iframe' } )" class="highslide"> Iframe content </a> </div> <div class="textwrapper"> <a href="form.htm" id="formexample" class="highslide" onclick="return hs.htmlExpand( this, { objectType: 'iframe', outlineType: 'rounded-white', wrapperClassName: 'highslide-wrapper drag-header', outlineWhileAnimating: true, preserveContent: false, width: 250 } )">Iframe with form</a> </div> <div class="textwrapper"> <a href="Flash.swf" onclick="return hs.htmlExpand(this, { objectType: 'swf', allowSizeReduction: false, wrapperClassName: 'draggable-header no-footer', outlineType: 'rounded-white', preserveContent: false, width: 300, objectWidth: 300, objectHeight: 250, maincontentText: 'You need to upgrade your flash player', headingText: 'Flash content'} )" class="highslide"> Display flash </a> </div> <div class="textwrapper"> <a href="http://www.youtube.com/v/znb6_J8npxM&hl=nb_NO&fs=1&" onclick="return openYouTube(this)" class="highslide"> YouTube w/fade effect </a> </div> <div style="clear: both"></div> <h4>More examples</h4> <ul> <li>The <a href="/index.htm">Barebones examples</a>.</li> <li>The <a href="/configurator.php">Configurator</a> contains more examples, combined with the possibility to make your own customized version of Highslide by adding or removing components.</li> <li>Several articles in the <a href="/ref">API reference</a> have good live examples.</li> </ul> </div></div> <div class="section-bottom"><div><div></div></div></div> <h2 id="licence"><span id="license"><span>License</span></span></h2> <div class="section"><div class="section-inner"> <p>Highslide JS is licensed by <a href="https://mit-license.org/">the MIT-license</a>. This means that you can download and use our software for free, both commercial or non-commercial, as long as you’ve included the MIT-license in all copies or substantial portions of the software</p> <br style="clear: both"/> </div></div> <div class="section-bottom"><div><div></div></div></div> <h2 id="implementations"><span><span>Implementations</span></span></h2> <div class="section"><div class="section-inner"> <p>These are some third party sites offering plugins and other implementations of Highslide into other systems. If you know a plugin that's not in the list, please send me an email through the "Contact" link in the main menu. Some of these implementations use old versions of Highslide, so you should upgrade to the latest version before you use them in a production environment.</p> <table id='implementations-table' class='visible'> <tr> <th>System</th> <th>Name</th> <th>Comment</th> </tr> <tr class="alt"> <td class='system' rowspan='1' style='background-image: url(/design/system-icons/adobe.png)'> <a href='http://www.adobe.com/products/photoshoplightroom/'>Adobe Lightroom</a> </td> <td class='name'> <a href='http://shop.theturninggate.net/collections/core-elements-3/products/gallery'>The Turning Gate Highslide Gallery</a> </td> <td class='comment'> Use Highslide to present your Lightroom galleries. </td> </tr> <tr > <td class='system' rowspan='1' style='background-image: url(/design/system-icons/aspnet.png)'> <a href='http://www.asp.net/'>ASP.NET 2.0+</a> </td> <td class='name'> <a href='http://encosia.com/downloads/highslide-js-net/'>Highslide JS .NET</a> </td> <td class='comment'> Makes implementing Highslide in ASP.NET extremely easy. </td> </tr> <tr class="alt"> <td class='system' rowspan='1' style='background-image: url(/design/system-icons/blogger.png)'> <a href='http://blogger.com'>Blogger</a> </td> <td class='name'> <a href='http://highslideinblogger.blogspot.com/'>Using Highslide in Blogger</a> </td> <td class='comment'> Tutorial for including Highslide in Blogger </td> </tr> <tr > <td class='system' rowspan='1' style='background-image: url(/design/system-icons/coppermine.png)'> <a href='http://coppermine-gallery.net/'>Coppermine</a> </td> <td class='name'> <a href='http://coppermine-gallery.net/forum/index.php?topic=36558.msg229469#msg229469'>Highslide for Coppermine</a> </td> <td class='comment'> Integrates Highslide into Gallery </td> </tr> <tr class="alt"> <td class='system' rowspan='1' style='background-image: url(/design/system-icons/drupal.png)'> <a href='http://drupal.org'>Drupal</a> </td> <td class='name'> <a href='http://drupal.org/project/highslide'>Drupal Highslide module</a> </td> <td class='comment'> A Drupal module for Highslide </td> </tr> <tr > <td class='system' rowspan='1' style='background-image: url(/design/system-icons/invision power board.png)'> <a href='http://www.invisionpower.com/apps/board/'>Invision Power Board</a> </td> <td class='name'> <a href='http://community.invisionpower.com/files/file/6579-k-34-highslide-lightbox/'>Highslide for IP.Board</a> </td> <td class='comment'> </td> </tr> <tr class="alt"> <td class='system' rowspan='1' style='background-image: url(/design/system-icons/jalbum.png)'> <a href='http://www.jalbum.net'>Jalbum</a> </td> <td class='name'> <a href='http://www.jalbum.net'>Jalbum skins</a> </td> <td class='comment'> Several Jalbum skins use Highslide JS, including Boxer, Matrix, Profiler and Siteli. </td> </tr> <tr > <td class='system' rowspan='3' style='background-image: url(/design/system-icons/joomla.png)'> <a href='http://www.joomla.org/'>Joomla</a> </td> <td class='name'> <a href='http://www.greatjoomla.com/extensions/plugins/core-design-image-revolution-plugin.html'>Core Design Image Revolution</a> </td> <td class='comment'> Gallery plugin </td> </tr> <tr > <td class='name'> <a href='http://joomlanook.com/'>Highslide JS for Joomla</a> </td> <td class='comment'> Supports most Highslide features </td> </tr> <tr > <td class='name'> <a href='http://joomlacode.org/gf/project/joomslide/'>JoomSlide</a> </td> <td class='comment'> Creates thumbnails automatically in your content using HighSlide to expand the image. </td> </tr> <tr class="alt"> <td class='system' rowspan='1' style='background-image: url(/design/system-icons/magento.png)'> <a href='http://www.magentocommerce.com/'>Magento</a> </td> <td class='name'> <a href='http://www.magthemes.com/highslide'>How to install Highslide in Magento</a> </td> <td class='comment'> Step by step tutorial </td> </tr> <tr > <td class='system' rowspan='1' style='background-image: url(/design/system-icons/maxsite cms.png)'> <a href='http://max-3000.com/'>MaxSite CMS</a> </td> <td class='name'> <a href='http://vizr.ru/page/plugin-highslide'>Highslide for MaxSite CMS</a> </td> <td class='comment'> MaxSite CMS is popular in Russia, Ukraine and other countries </td> </tr> <tr class="alt"> <td class='system' rowspan='1' style='background-image: url(/design/system-icons/opencart.png)'> <a href='http://www.opencart.com'>OpenCart</a> </td> <td class='name'> <a href='http://www.opencart.com/index.php?route=extension/extension/info&extension_id=10628'>Highslide thumbnail for OpenCart</a> </td> <td class='comment'> </td> </tr> <tr > <td class='system' rowspan='1' style='background-image: url(/design/system-icons/phpbb.png)'> <a href='http://www.phpbb.com'>PHPBB</a> </td> <td class='name'> <a href='http://www.phpbb.com/community/viewtopic.php?f=70&t=1929915'>PHPBB Attatchment Zoom/Slideshow Mod</a> </td> <td class='comment'> Use Highsldie zooming and slideshow functionality for displaying attachments. </td> </tr> <tr class="alt"> <td class='system' rowspan='1' style='background-image: url(/design/system-icons/picasa.png)'> <a href='http://picasa.google.com/'>Picasa</a> </td> <td class='name'> <a href='http://www.paulvanroekel.nl/picasa/highslide/'>Highslide Photo Gallery and Slideshow for Picasa</a> </td> <td class='comment'> Gallery template </td> </tr> <tr > <td class='system' rowspan='1' style='background-image: url(/design/system-icons/smf.png)'> <a href='http://www.simplemachines.org/'>SMF</a> </td> <td class='name'> <a href='http://custom.simplemachines.org/mods/index.php?mod=1450'>Highslide Image Viewer</a> </td> <td class='comment'> Modification for Simplemachines Forum </td> </tr> <tr class="alt"> <td class='system' rowspan='1' style='background-image: url(/design/system-icons/typo3.png)'> <a href='http://typo3.org/'>Typo3</a> </td> <td class='name'> <a href='http://typo3.org/extensions/repository/view/pw_highslide_gallery/current/'>Highslide Gallery</a> </td> <td class='comment'> Typo3 extension </td> </tr> <tr > <td class='system' rowspan='1' style='background-image: url(/design/system-icons/vbulletin.png)'> <a href='http://www.vbulletin.com/'>vBulletin</a> </td> <td class='name'> <a href='http://www.vbulletin.org/forum/showthread.php?t=139167'>Highslide for vBulletin attachments</a> </td> <td class='comment'> Replaces vBulletin's popups with Highslide </td> </tr> <tr class="alt"> <td class='system' rowspan='1' style='background-image: url(/design/system-icons/wordpress.png)'> <a href='http://wordpress.org/'>Wordpress</a> </td> <td class='name'> <a href='http://www.scrollleiste.de/online/highslide-integration-in-wordpress'>Highslide Integration</a> </td> <td class='comment'> Zero-click-solution to zoom images with Highslide JS </td> </tr> </table> </div></div> <div class="section-bottom"><div><div></div></div></div> <h2 id="installation"><span><span>Installation</span></span></h2> <div class="section"><div class="section-inner"> <p>Note: some basic HTML knowledge is required to install Highslide. For any problems in your installation, see <a href="http://highslide.com/support">Highslide support</a>.</p> <h3>Alt. 1: Installation using the Editor</h3> <p>The <a href="/editor">Highslide Editor</a> is a visual tool that lets you configure most of the numerous Highslide options without writing code, and upload the results directly to your web server. This is not only a great help for non-developers, it also saves time for professionals who don't have to read through the API documentation to get things done. Go to the <a href="/editor">Editor</a>.</p> <h3>Alt. 2: Manual installation</h3> <ol> <li>Download and extract the zip-archive from the <a href="download.php">download page</a>.</li> <li>Run the file index.html, navigate to your favourite setup and view the source.</li> <li>Change the file to suit your needs, or copy and paste parts of it into your HTML file. If you mess it up, go back to the original file and change it bit by bit. Study the <a href="doc.php">documentation</a> and the <a href="ref">API reference</a> for advanced features.</li> <li>If you move the Highslide JS files, remember to change the <code>graphicsDir</code> setting in the Javascript.</li> </ol> <h3>Example of a manual installation</h3> <p> In this example the zip archive is unzipped to the root of your website. In addition, the CSS code from your favourite example is copied and pasted into a file called highslide.css and placed in the /highslide directory. </p> <br/> 1) For this example, your directory structure should look like this: <img src="http://highslide.com/studies/screenshots/2008-10-12_1019.png" alt="Highslide directory structure" /> <br/> <br/> 2) Put this code in the head tag of your HTML page. <div class="pre"> <script type="text/javascript" src="/highslide/highslide.js"></script><br /> <link rel="stylesheet" type="text/css" href="/highslide/highslide.css" /><br /> <script type="text/javascript"><br />     // override Highslide settings here<br />     // instead of editing the highslide.js file<br />     hs.graphicsDir = '/highslide/graphics/';<br /> </script></div> <br/> <br/> 3) This is how you mark up the thumbnail <div class="pre"> <a href="images/full-image.jpg" class="highslide"<br />         onclick="return hs.expand(this)"><br />     <img src="images/thumbnail.jpg" alt="Highslide JS"<br />         title="Click to enlarge" height="120" width="107" /></a></div> <p> <h4>Extra:</h4> A step by step tutorial for installing under Dreamweaver is <a href="/studies/Dreamweaver-tutorial.pdf"> available here</a>. </p> </div></div> <div class="section-bottom"><div><div></div></div></div> <h2 id="compatibility"><span><span>Compatibility - tested with:</span></span></h2> <div class="section"><div class="section-inner"> <table id="compat"> <tr><td>IE 5.5 - 9.0</td> <td>Works</td></tr> <tr><td>IE 4.0</td> <td>Falls back nicely</td></tr> <tr><td>Firefox 1.5+</td> <td>Works</td></tr> <tr><td>Opera 8.5+</td> <td>Works</td></tr> <tr><td>Netscape 7.2</td> <td>Works</td></tr> <tr><td>Netscape 4.79</td> <td>Falls back nicely</td></tr> <tr><td>Safari 2.0+ on Mac, 3.0+ on Windows</td> <td>Works</td></tr> <tr><td>Google Chrome</td> <td>Works</td></tr> <tr><td>Konqueror 3.5</td> <td>Works</td></tr> </table> </div></div> <div class="section-bottom"><div><div></div></div></div>  </td> <td id="column-right"> <div class="context-box"> <h3>Showcase</h3> <p style="margin: 0 15px 5px 15px"> See how developers implemented Highslide on their own sites in <a href="forum/viewtopic.php?t=1028">this thread</a>.</p> <h3 style="background: none">Translations</h3> <p style="margin: 0 15px 5px 15px"> Get or share translated GUI strings in <a href="forum/viewtopic.php?t=2119">this thread</a>.</p> <h3 style="background: none">Get Highslide</h3> <p style="margin: 0 15px 5px 15px"> <a class="button" href="download.php" style="margin: 0 auto">Download!</a></p> <div class="footer"></div> </div>  <div id="google-ads"> <script type="text/javascript"></script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </div> </td> </tr> </table> <div id="bottom"><div><div></div></div></div> <div id="debug"></div> </div></div> <script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/translatemypage.xml&up_source_language=en&w=160&h=60&title=&border=0&output=js" type="text/javascript"></script> <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> </script> <script type="text/javascript"> _uacct = "UA-2995052-1"; urchinTracker(); </script> </body> </html>