Автор: 
Обнаружил на днях симпатичный эффект увеличения миниатюр изображений с
помощью jQuery. Немного оптимизировал увиденное решение и решил
опубликовать для общего пользования. А для личностей, которые негативно
относятся к повсеместному использованию javascript, добавил вариант без
использования оного.
HTML разметка представляет собой список, состоящий из миниатюр:
Т.к. в первом случае описание изображения создаётся и отображается с помощью скрипта, то для варианта без javascript необходимо после миниатюры добавить элемент span c этим описанием.
CSS стили:
А следующие стили нужно добавить в случае использования варианта без javascript:
Далее необходимо подключить библиотеку jQuery и добавить следующий код:
Работа скрипта ничего необычного из себя не представляет. Всего лишь изменяются некоторые CSS свойства при наведении курсора на миниатюру, а также создаётся элемент span содержащий текст из атрибута title ссылки.
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>
<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
}
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
}
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();
});
});
$("#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 ссылки.