Если вы кликните на одну из трёх картинок, то сможете увидеть красивый эффект увеличения, созданный с помощью jQuery.
О том, как это сделать, читайте в продолжении.
А делается это очень просто.
1. Добавьте следующий код внутрь тега <HEAD>
<p><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.imageWarp.js">
/***********************************************
* jQuery imageWarp script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
<script type="text/javascript">
jQuery(document).ready(function($){
$('img.imagewarp').imageWarp() //apply warp effect to images with CSS class "imagewarp"
})
</script>
2. Скачайте файл jquery.imageWarp.js (правой кнопкой - сохранить как) и загрузите его себе на сервер.
3. В строчке
которую вы вставляли в первом пункте, перед файлом добавьте путь, куда вы его загрузили (Или положите его в корень)
4. Всё, теперь мы можем вызывать любые изображения с этим эффектом. Код вызова изображения:
Или для активного изображения с переходом по ссылке:
Т.е. мы добавляем к изображению класс imagewarp и указываем размер в уменьшенном виде.
Параметры:
Вы также можете указать параметры, открыв файл jquery.imageWarp.js в блокноте.
duration: 1000, //продолжительность анимации, в миллисекундах
Если вы пользуетесь какой-либо CMS, то код из первого пункта можно добавить в главный файл шаблона CMS (также после тега <BODY>), а класс картинки и её размер указать в визуальном редакторе.
Думаю, что данный скрипт в первую очередь может пригодиться владельцам галерей для просмотра полной версии картинки, хотя где его можно применить зависит только от вашей фантазии 
На одном из блогов вы можете прочитать, как можно определить местоположение по ip, иногда это бывает очень полезно.
Также советую вам почитать web-лог ZeroXor - найдёте много интересного.
Теги: jquery, скрипты, анимация, изображения
Добавить в закладки:
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо зайти на сайт под своим именем.