CINXE.COM
Highslide JS - JavaScript thumbnail viewer
<!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" /> <!--[if lt IE 7]> <link rel="stylesheet" type="text/css" href="/highslide/highslide-ie6.css" /> <![endif]--> <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> <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> <!-- Start page content --> <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"> <!-- google_ad_section_start --><script type="text/javascript"> function search() { var q = document.getElementById("cse-search-box").elements["q"]; q.focus(); q.style.background = '#ace13e'; setTimeout(function() { q.style.background = ''; }, 500); setTimeout(function() { q.style.background = '#ace13e'; }, 1000); setTimeout(function() { q.style.background = ''; }, 1500); } </script> <h2><span><span>Support</span></span></h2> <div class="section"><div class="section-inner"> <p>How can we help you? Follow the steps below to best get answers to your questions.</p> <div id="support"> <div class="item-1"> <span>1</span> <strong><a href="tutorial">Read the tutorial</a></strong> <p>Explanations to the most commonly used features, and links to in-depth examples in the Reference.</p> </div> <div class="item-2"> <span>2</span> <strong><a href="forum/viewforum.php?f=4">Read the FAQ</a></strong> <p>The most frequently asked questions.</p> </div> <div class="item-3"> <span>3</span> <strong><a href="ref">Look in the API reference</a></strong> <p>Don't get spooked by the fancy name. The reference contains numerous good examples as well as detailed explanations.</p> </div> <div class="item-4"> <span>4</span> <strong><a href="javascript:search()">Search the website</a></strong> <p>Use the search button in the upper right corner of this page to search all of the above, including the support forum.</p> <div id="searchtarget"></div> </div> <div class="item-5"> <span>5</span> <strong><a href="http://forum.highcharts.com/highslide-js-the-javascript-image-and-media-viewer/">Ask the forum</a></strong> <p>To get help on a specific question or problem, do a search or ask a question in the <a href="http://forum.highcharts.com/highslide-js-the-javascript-image-and-media-viewer/">Highslide support forum</a>. Since Highslide is covered by the MIT-license, this forum is driven by our users only.</p> </div> </div> </div></div> <div class="section-bottom"><div><div></div></div></div> <!-- google_ad_section_end --> </td> <td id="column-right"> <div id="google-ads"> <script type="text/javascript"><!-- google_ad_client = "pub-9593094884632474"; google_ad_width = 160; google_ad_height = 600; google_ad_format = "160x600_as"; google_ad_type = "text_image"; google_ad_channel =""; google_color_border = "F0EDE0"; google_color_bg = "F0EDE0"; google_color_link = "333333"; google_color_text = "333333"; google_color_url = "CF8300"; //--></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>