Kb
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd"> <html> <head> <title>Фотогалерея (показ одного фото остальные невидимы) с открытием большого фото При наведении на большое фото меню вверху Highslide JS</title> <!-- 1 ) Reference to the file containing the javascript. This file must be located on your server. --> <script type="text/javascript" src="https://www.03www.ru/highslide/highslide-with-gallery.js"></script> <link rel="stylesheet" type="text/css" href="https://www.03www.ru/highslide/highslide.css" /> <!-- 2) Optionally override the settings defined at the top of the highslide.js file. The parameter hs.graphicsDir is important! --> <script type="text/javascript"> hs.graphicsDir = 'https://www.03www.ru/highslide/graphics/'; hs.align = 'center'; hs.transitions = ['expand', 'crossfade']; hs.outlineType = 'rounded-white'; hs.fadeInOut = true; hs.numberPosition = 'caption'; hs.dimmingOpacity = 0.75; // Add the controlbar if (hs.addSlideshow) hs.addSlideshow({ //slideshowGroup: 'group1', interval: 5000, repeat: false, useControls: true, fixedControls: true, overlayOptions: { opacity: .75, position: 'top center', hideOnMouseOut: true } }); </script> </head> <body> <div style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 10pt"> <p style="text-align: center"><strong>Hidden gallery with text link</strong></p> <div style="float: right;"> <p><strong>Highslide JS</strong></p> <ul> <li><a href="http://vikjavev.no/highslide">Highslide JS home page</a></li> <li><a href="http://vikjavev.no/highslide/doc.php">Documentation</a></li> <li><a href="http://vikjavev.no/highslide/ref">Full API reference</a></li> </ul> </div></div> <div> <!-- 4) This is how you mark up the text link with an anchor tag around it. The anchor's href attribute defines the URL of the full-size image. --> <a id="thumb1" href="http://www.03www.su/pic/001.jpg" class="highslide" onclick="return hs.expand(this)"> VIEW GALLERY </a> <!-- 5 (optional). This is how you mark up the caption. The correct class name is important. --> <div class="highslide-caption"> Caption for the first image. This caption can be styled using CSS. </div> <!-- 6) Put the subsequent thumbnails in a hidden container. The thumbnailId parameter ensures these thumbnails zoom back out to the right thumbnail when closed. --> <div class="hidden-container"> <a href="http://www.03www.su/pic/001.jpg" class="highslide" onclick="return hs.expand(this, { thumbnailId: 'thumb1' })"></a> <div class="highslide-caption"> Caption for the second image. </div> <a href="http://www.03www.su/pic/001.jpg" class="highslide" onclick="return hs.expand(this, { thumbnailId: 'thumb1' })"></a> <div class="highslide-caption"> Caption for the third image. </div> </div> </div> <!-- Yandex.Metrika counter --> <script type="text/javascript" > (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(53156500, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); </script> <noscript><div><img src="https://mc.yandex.ru/watch/53156500" style="position:absolute; left:-9999px;" alt="" /></div></noscript> <!-- /Yandex.Metrika counter --></body> </html>
Библиотека JAVASCRIPT 1997- Дизайн и сопровождение © SE@RCHER