Обнаружил на днях симпатичный эффект увеличения миниатюр изображений с помощью jQuery. Немного оптимизировал увиденное решение и решил опубликовать для общего пользования. А для личностей, которые негативно относятся к повсеместному использованию javascript, добавил вариант без использования оного.
HTML разметка представляет собой список, состоящий из миниатюр:
<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 стили:
#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:
#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 и добавить следующий код:
$(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 ссылки.
Loading ...
перед .animate() надо писать .stop()
Спасибо, запамятовал.
Спасибо!
даже в ie6 работает. прекрасно)
знаете, я тут заметил в ридере, что в вашем блоге у меня больше всего отмеченных записей. так держать.
Спасибо тебе добрый человек! Как раз, то что искал – простенько и со вкусом!
[...] Эффект увеличения миниатюр Обнаружил на днях симпатичный эффект увеличения миниатюр изображений с помощью jQuery. Немного оптимизировал увиденное решение и решил опубликовать дляя общего пользования. А для личностей, которые негативно относятся к повсеместному использованию javascript, добавил вариант без использования оного… [...]
Большое спасибо, это именно то, что я искал!!!
Большое спасибо! Долго искал что-либо подходящее и, наконец, нашел. Работает хорошо.
Подскажите как сделать чтобы комментарий картинки не показывался? И еще, у меня выпадающее меню css, попадает под миниатюры, именно под, а нужно поверх. Как это исправить?
Спасибо! Скрипт полезный и доходчиво изложено!
Уберите из скрипта
$(this).append('<span>' + this.title + '</span>');, а из стилей всё что относиться кspan.Чтобы меню отоборажалось поверх используйте
positionиz-index.Спасибо! Разобрался, всё работает.
На счет комментария, я не правильно изъяснился. Можно ли сделать чтобы при наведении (и увеличении) на картину, не появлялся alt (комментарий) к картинке? Если убрать это: $(this).append(» + this.title + »); , то исчезает и alt и title, а нужно только alt. Заранее спасибо.
$(this).append(» + this.title + »);эта часть всего лишь добавляет значение атрибутаtitleссылки в элементspan. Сам атрибут никуда не исчезает. А к атрибутуaltизображения это не касается.Еще раз спасибо за эффект! У меня только одна проблема возникает, которую я все никак не могу решить, что делать если у меня в альбоме половина картинок, например: width: ‘80′, height: ‘110′ , а вторая width:’110′, height: ‘80′??? Получается, когда я навожу курсор у меня картинка либо сужается либо расширяется. Можно ли как-то прописать, чтоб размеры оставались стандартными. Например прописать высоту, а ширина, чтоб выставлялась автоматически….???? или может еще как-то?!
Заранее спасибо!
Можно в css, для всех изображений задать среднюю ширину и высоту.
Как вариант конечно можно. Даже смотрится терпимо! Спасибо! Наверно так и оставлю! так как уже перепробывал, все что в голову приходило!
[...] Эффект увеличения миниатюр Обнаружил на днях симпатичный эффект увеличения миниатюр изображений с помощью jQuery. Немного оптимизировал увиденное решение и решил опубликовать для общего пользования. А для личностей, которые негативно относятся к повсеместному использованию javascript, добавил вариант без использования оного… [...]
Большое спасибо за Эффект увеличения миниатюр!!
Подскажите, в Oper есть увеличение!. Однко, текст «фото 1″ отдельно, рядом с фото, и сама картинка без обрамления рамки
А в Explorer нет увеличения. Просто фотографии ( картинки).
Слушайте, а можно чтобы текст был не на картинке, а рядом с ней? Т.е. чтобы он начинался там, где заканчивается изображение, не закрывая всю картинку?
Поэкспериментируйте с css. Проблем не должно быть.