Главная Форум Гостевая книга Регистрация
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
Страница 1 из 11
Форум » Скрипты для ucoz » Другие скрипты » Фотогалерея "Galleria" на jQuery
Фотогалерея "Galleria" на jQuery
ВэйДлинДата: Воскресенье, 20.09.2009, 22:57 | Сообщение # 1
Админ
Группа: Администраторы
Сообщений: 100
Репутация: 3
Статус: Offline

Простая,но в то же время весьма эффектная фотогалерея с возможностью просмотра полноразмерных изображений по клику на превью.
Перемотка изображений осуществляется либо выбором следующего изображения в превью-ряде снизу,либо кликом по полноразмерному изображению.

Установка

в HEAD:

Code
<link href="http://ps-studio.info/JS/photogallery/1/galleria.css" rel="stylesheet" type="text/css" media="screen">   
     <script type="text/javascript" src="http://ps-studio.info/JS/photogallery/1/jquery-1.3.2.js"></script>   
     <script type="text/javascript" src="http://ps-studio.info/JS/photogallery/1/jquery.galleria.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>

после bоdy:

Code
<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>   
    

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>   
    

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>   
    

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>  

 
Форум » Скрипты для ucoz » Другие скрипты » Фотогалерея "Galleria" на jQuery
Страница 1 из 11
Поиск:
Главная | Форум

Конструктор сайтов - uCoz
Правообладателям
         
  Баннер   Баннер