Суперэффект для просмотра миниатюр с помощью jQuery

Сегодня в уроке Вы узнаете как с помощью CSS и jQuery сделать небольшую галерею с очень красивым эффектом при наведении на миниатюру.

Данный эффект очень похож на Flash анимацию и сможет украсить любой сайт.

demosourse

Приступим!

jQuery

Вставляем следующий код между тегами <head></head>. Не забываем про правильный путь к фреймворку.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function(){
//Увеличение при наведении 
$("ul.thumb li").hover(function() {

    $(this).css({'z-index' : '10'});
    $(this).find('img').addClass("hover").stop()
    .animate({
    marginTop: '-110px', 
    marginLeft: '-110px', 
    top: '50%', 
    left: '50%', 
    width: '174px', 
    height: '174px',
    padding: '20px' 
    }, 200);
  
    } , function() {
    $(this).css({'z-index' : '0'});
    $(this).find('img').removeClass("hover").stop()
    .animate({
    marginTop: '0', 
    marginLeft: '0',
    top: '0', 
    left: '0', 
    width: '100px', 
    height: '100px', 
    padding: '5px'
    }, 400);
    }); 
//Смена изображения при клике
    $("ul.thumb li a").click(function() {
  
    var mainImage = $(this).attr("href"); //Find Image Name
    $("#main_view img").attr({ src: mainImage });
    return false; 
    });
  
    });
  </script>

Данная функция работает с размерами миниатюр и при наведении мышкой запускает красивый эффект.

CSS

Далее идут стили оформления. Стили можно вставить как в сам документ, так и вынести в отдельный файл.

<style type="text/css">
    body {
font: Arial, Helvetica, sans-serif normal 10px;
margin: 0; padding: 0;
}
* {margin: 0; padding: 0;}
img {border: none;}
.container {
height: 360px;
width: 910px;
margin: -180px 0 0 -450px;
top: 50%; left: 50%;
position: absolute;
}
ul.thumb {
float: left;
list-style: none;
margin: 0; padding: 10px;
width: 360px;
}
ul.thumb li {
margin: 0; padding: 5px;
float: left;
position: relative;
width: 110px;
height: 110px;
}
ul.thumb li img {
width: 100px; height: 100px;
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
position: absolute;
left: 0; top: 0;
-ms-interpolation-mode: bicubic; 
}
ul.thumb li img.hover {
background:url(thumb_bg.png) no-repeat center center;
border: none;
}
#main_view {
float: left;
padding: 9px 0;
margin-left: -10px;
}
</style>

HTML

Все картинки необходимо оформить списком вот таким образом:

<div class="container">
  <ul class="thumb">
 <li><a href="main_image1.jpg"><img src="thumb1.jpg" alt="" /></a></li>
  <li><a href="main_image2.jpg"><img src="thumb2.jpg" alt="" /></a></li>
  <li><a href="main_image3.jpg"><img src="thumb3.jpg" alt="" /></a></li>
  <li><a href="main_image4.jpg"><img src="thumb4.jpg" alt="" /></a></li>
  <li><a href="main_image5.jpg"><img src="thumb5.jpg" alt="" /></a></li>
  <li><a href="main_image6.jpg"><img src="thumb6.jpg" alt="" /></a></li>
  <li><a href="main_image7.jpg"><img src="thumb7.jpg" alt="" /></a></li>
  <li><a href="main_image8.jpg"><img src="thumb8.jpg" alt="" /></a></li>
  <li><a href="main_image9.jpg"><img src="thumb9.jpg" alt="" /></a></li>
</ul>
  <div id="main_view">
  <a href="http://www.ruseller.com" title="Ruseller.com" target="_blank"><img src="main_image1.jpg" alt="" /></a><br />
 </div>
  </div>

В HTML коде также есть пути к картинкам - не забывайте про них!

Удачного всем дня! Жду Ваших комментариев :).

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.sohtanaka.com
Перевел: Максим Шкурупий
Урок создан: 20 Апреля 2009
Просмотров: 41664
Правила перепечатки

5 последних уроков рубрики "jQuery"

^ Наверх ^