Прошу прощения, закачивал страницу уже полусонный на старый сайт и не проверил даже кодировку. Сейчас подправлю и сам плагин выложу. Скопировал и постарался переделать под себя вот эту страницу: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Galleria Demo 1</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta http-equiv="imagetoolbar" content="false"> <meta name="description" content=""> <meta name="keywords" content=""> <link href="galleria.css" rel="stylesheet" type="text/css" media="screen"> <script type="text/javascript" src="/media/js/jquery.js"></script> <script type="text/javascript" src="jquery.galleria.pack.js"></script> <script type="text/javascript"> jQuery(function($) { $('.gallery_demo_unstyled').addClass('gallery_demo'); // adds new class name to maintain degradability $('ul.gallery_demo').galleria({ history : true, // activates the history object for bookmarking, back-button etc. clickNext : true, // helper for making the image clickable insert : '#main_image', // the containing selector for our main image onImage : function(image,caption,thumb) { // let's add some image effects for demonstration purposes // fade in the image & caption if(! ($.browser.mozilla && navigator.appVersion.indexOf("Win")!=-1) ) { // FF/Win fades large images terribly slow image.css('display','none').fadeIn(1000); } caption.css('display','none').fadeIn(1000); // fetch the thumbnail container var _li = thumb.parents('li'); // fade out inactive thumbnail _li.siblings().children('img.selected').fadeTo(500,0.3); // fade in active thumbnail thumb.fadeTo('fast',1).addClass('selected'); // add a title for the clickable image image.attr('title','Next image >>'); }, onThumb : function(thumb) { // thumbnail effects goes here // fetch the thumbnail container var _li = thumb.parents('li'); // if thumbnail is active, fade all the way. var _fadeTo = _li.is('.active') ? '1' : '0.3'; // fade in the thumbnail when finnished loading thumb.css({display:'none',opacity:_fadeTo}).fadeIn(1500); // hover effects thumb.hover( function() { thumb.fadeTo('fast',1); }, function() { _li.not('.active').children('img').fadeTo('fast',0.3); } // don't fade out if the parent is active ) } }); }); </script> <style media="screen,projection" type="text/css"> /* BEGIN DEMO STYLE */ *{margin:0;padding:0} body{padding:20px;background:white;text-align:center;background:black;color:#bba;font:80%/140% georgia,serif;} h1,h2{font:bold 80% 'helvetica neue',sans-serif;letter-spacing:3px;text-transform:uppercase;} a{color:#348;text-decoration:none;outline:none;} a:hover{color:#67a;} .caption{font-style:italic;color:#887;} .demo{position:relative;margin-top:2em;} .gallery_demo{width:702px;margin:0 auto;} .gallery_demo li{width:68px;height:50px;border:3px double #111;margin: 0 2px;background:#000;} .gallery_demo li div{left:240px} .gallery_demo li div .caption{font:italic 0.7em/1.4 georgia,serif;} #main_image{margin:0 auto 60px auto;height:438px;width:700px;background:black;} #main_image img{margin-bottom:10px;} .nav{padding-top:15px;clear:both;font:80% 'helvetica neue',sans-serif;letter-spacing:3px;text-transform:uppercase;} .info{text-align:left;width:700px;margin:30px auto;border-top:1px dotted #221;padding-top:30px;} .info p{margin-top:1.6em;} </style> </head> <body> <h1>Galleria Demo 01</h1> <div class="demo"> <div id="main_image"></div> <ul class="gallery_demo_unstyled"> <li><img src="img/flowing-rock.jpg" alt="Flowing Rock" title="Flowing Rock Caption"></li> <li><img src="img/stones.jpg" alt="Stones" title="Stones - from Apple images"></li> <li class="active"><img src="img/grass-blades.jpg" alt="Grass Blades" title="Apple nature desktop images"></li> <li><img src="img/ladybug.jpg" alt="Ladybug" title="Ut rutrum, lectus eu pulvinar elementum, lacus urna vestibulum ipsum"></li> <li><img src="img/lightning.jpg" alt="Lightning" title="Black & White"></li> <li><img src="img/lotus.jpg" alt="Lotus" title="Fusce quam mi, sagittis nec, adipiscing at, sodales quis"></li> <li><img src="img/mojave.jpg" alt="Mojave" title="Suspendisse volutpat posuere dui. Suspendisse sit amet lorem et risus faucibus pellentesque."></li> <li><img src="img/pier.jpg" alt="Pier" title="Proin erat nisi"></li> <li><img src="img/sea-mist.jpg" alt="Sea Mist" title="Caption text from title"></li> </ul> <p class="nav"><a href="#" onclick="$.galleria.prev(); return false;">« previous</a> | <a href="#" onclick="$.galleria.next(); return false;">next »</a></p> </div> <div class="info"> <h2>Information</h2> <p>This demonstration shows you aome more advanced effects you can accomplish with the Galleria plugin. The history object is also active, so feel free to try the back button in your browser and bookmark a page. The next and previous links are simple to create since the galleria object has two public functions for traversing the images in your list.</p> <p>This gallery was created from a simple unordered list with images - thumbnails and functionality is all in the Galleria plugin. Viewing this page without javascript or CSS enabled with degrade it into a list of full-size images.</p> <p>Visit the galleria project: <a href="http://galleria.googlecode.com">http://galleria.googlecode.com</a></p> <p class="footer"><a href="/lab/galleria/">Galleria home page</a> | <a href="http://monc.se">Made by monc</a></p> </body> </html> Понимаю, что со времен изучения мною обычного HTML прогресс не стоял на месте и просто копирование исходного кода не дает информацию об отдельных CSS-файлах, например galleria.css (а может и о еще чем-нибудь), относящихся к данной странице, старался догадаться, чего же не хватает в моей странице, по сравнению с оригиналом, но... То, что боковые панели не встали на место меня сейчас не интересует, главное скрипт фотографий оживить.
