Эффект увеличения миниатюр

30 04/09
31

Обнаружил на днях симпатичный эффект увеличения миниатюр изображений с помощью jQuery. Немного оптимизировал увиденное решение и решил опубликовать для общего пользования. А для личностей, которые негативно относятся к повсеместному использованию javascript, добавил вариант без использования оного.

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

1
2
3
4
5
6
7

<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 стили:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

#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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

#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 и добавить следующий код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

$(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 ссылки.

Теги: •

Альтернативные картинки для отсутствующих изображений

06 04/09
32

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

Альтернативный контент для изображений

В качестве альтернативного решения можно использовать jQuery и специально подготовленное изображение, которое будет отображаться вместо отсутствующих картинок.

Альтернативное изображение

Создайте изображение, подключите фреймворк и добавьте следующий javascript код:

1
2
3
4
5
6
7
8

$(document).ready(function() {
    $('img').error(function() {
        $(this).attr({
        src: 'missing.png',
        style:'border:3px solid #999;width:144px;height:144px;'
        });
    });
});

Оригинал: Use Custom Missing Image Graphics Using jQuery

Теги: