Форма входа

mvcreative

Старая форма входа

  • Страница 1 из 1
  • 1
Модератор форума: BSide  
Форум MVCreative » сделаем креативный uCoz » Общение и архив » Архив старых тем » Эффект увеличения миниатюр
Эффект увеличения миниатюр
cechДата: Понедельник, 19.07.2010, 09:17 | Сообщение # 1
Генерал печатного дела
Группа: Администраторы
Пользователь №: 1
Сообщений: 1706
Награды: 59
Репутация: 108
Статус: оффлайн
Обнаружил на днях симпатичный эффект увеличения миниатюр изображений с помощью jQuery. Немного оптимизировал увиденное решение и решил опубликовать для общего пользования. А для личностей, которые негативно относятся к повсеместному использованию javascript, добавил вариант без использования оного.





HTML разметка представляет собой список, состоящий из миниатюр:


Code
<ul id="gallery">
<li><a href="" title="Фото 1"><img src="/spring.jpg" width="100" height="100" alt="" /></a></li>
<li><a href="" title="Фото 2"><img src="/spring2.jpg" width="100" height="100" alt="" /></a></li>
<li><a href="" title="Фото 3"><img src="/spring3.jpg" width="100" height="100" alt="" /></a></li>
<li><a href="" title="Фото 4"><img src="/spring4.jpg" width="100" height="100" alt="" /></a></li>

</ul>



Т.к. в первом случае описание изображения создаётся и отображается с помощью скрипта, то для варианта без javascript необходимо после миниатюры добавить элемент span c этим описанием.


CSS стили:


Code
#gallery{
     list-style-type: none;
     height: 1%;
     width: 500px;
     margin: 0 auto;
     font-size: 0.75em;
     margin-bottom: 20px
}
#gallery:after{ /* Чтобы список «охватывал» вложенные элементы */
     content:"";
     display:block;
     clear:both
}
     #gallery li{
         margin:0 10px 10px 0;
         float:left
     }
         #gallery li a{
             position:relative;
             display:block;
             float:left;
             width:110px;
             height:110px;
             text-decoration:none
             }
         #gallery li img{
             padding:4px;
             background:#f0f0f0;
             border:solid 1px #ddd;
             position:absolute;
             left:0;
             top:0;
             -ms-interpolation-mode:bicubic /* Для нормального масштабирования изображений в IE6 и 7 */
         }
         #gallery li span{
             display:block;
             padding:5px;
             background:#f0f0f0;
             color:#666;
             position:absolute;
             top:-35px;
             left:-35px;
             width:170px
         }



А следующие стили нужно добавить в случае использования варианта без javascript:


Code
#gallery li a:hover{
     z-index:100;
     display:inline
}
     #gallery li a:hover img{
         left:-40px;
         top:-40px;
         width:180px;
         height:180px
     }
     #gallery li a span{
         opacity:0.7; /* Если нужно сделать блок с информацией прозрачным */
         filter:alpha(opacity=70); /* Прозрачность в IE */
         visibility:hidden;
         cursor:pointer
     }
     #gallery li a:hover span{
         visibility:visible
     }



Далее необходимо подключить библиотеку jQuery и добавить следующий код:


Code
$(document).ready(function(){
     $("#gallery a").hover(function() {
         $(this).css({'z-index' : '10'});
         $(this).find('img').stop()
         .animate({
             top: '-40px',
             left: '-40px',
             width: '180px',
             height: '180px'
         }, 400);
         $(this).append('<span>' + this.title + '</span>');
         $(this).find('span').hide();
         $(this).find('span').fadeIn(500);
         }, function() {
         $(this).css({'z-index' : '0'});
         $(this).find('img').stop()
         .animate({
             top: '0',
             left: '0',
             width: '100px',
             height: '100px'
         }, 250);
         $(this).find('span').remove();
     });
});



Работа скрипта ничего необычного из себя не представляет. Всего лишь изменяются некоторые CSS свойства при наведении курсора на миниатюру, а также создаётся элемент span содержащий текст из атрибута title ссылки.



 
вверх
HawkДата: Среда, 01.09.2010, 21:34 | Сообщение # 2
Молчун
Группа: Пользователи
Пользователь №: 185
Сообщений: 9
Награды: 0
Репутация: 0
Статус: оффлайн
кайф
 
вверх
Форум MVCreative » сделаем креативный uCoz » Общение и архив » Архив старых тем » Эффект увеличения миниатюр
  • Страница 1 из 1
  • 1
Поиск: