Уголемяване на изображения с колелцето на мишката
Уеб дизайнът с jQuery е много лесен!
Увеличете изображенията с колелцето на мишката. Плъгин ZoomScroll
На уебсайтовете на онлайн магазини за подробно показване на стоки често се използват различни ефекти на мащабиране (увеличаване / намаляване) на изображенията. Те обикновено са изградени върхуjQuery безплатните добавки за библиотека със скриптове, някои от които бяха обсъдени по-рано, например в статията за уголемяване на изображението. ДобавкаNivo Zoom.
Има няколко начина за увеличаване на изображенията: ефектът на "лупа", показване на увеличено изображение до миниатюрата, разширяване на изображенията чрез щракване с мишката или задържане върху миниатюрата и мащабиране с колелцето на мишката. Последният ефект според мен е най-изразителен. Най-лесният начин да го реализирате е с плъгинаZoomScroll, разработен от Кирил Шапаров. Подробно описание с примери и различни версии на плъгина можете да намерите на неговия уебсайт.
Пример за мащабиране на изображение чрезZoomScroll е показан на фигурата вдясно - щракнете, за да увеличите. Използвайте мишката, за да увеличите: колелцето на мишката нагоре, за да увеличите, колелцето на мишката надолу, за да намалите, щракнете два пъти, за да се върнете в първоначалната позиция, мишката, за да преместите, мишката, за да хванете и плъзнете.
Инсталиране на приставката ZoomScroll
За да инсталиратеZoomScroll, първо създайте нова папка на сайта, като я наименувате, както правилно си помислихте,zoomscroll. След това изтеглете архива и го разархивирайте в създадената папка. В резултат на това ще има няколкоскриптове (jquery-1.6.4.min.js и други), стилов файлjquery.zoomscroll-2.0.1.css и помощни изображения за затваряне и зареждане на прозорец. След това вмъкнете в заглавката на страницата вътре в етикета. следните редове, указващи пътищата към файловетеZoomScroll и малък скрипт за инициализация на плъгина:
"stylesheet" type="text/css" href="zoomscroll/jquery.zoomscroll-2.0.1.css" />
Разбира се, ако ви мързи да създадете две изображения, тогава можете да използвате само едно увеличено изображение и за да го намалите в браузъра, задайте желаните размери на страницата, като използвате атрибутитеwidth иheight. Само имайте предвид, че мащабирането, извършено от браузъра, обикновено води до по-лошо качество: .
Това е всичко! Можете да се насладите на ефекта на мащабиране, като отворите страницата с вашата снимка в браузъра. Не са предоставени допълнителни настройки на плъгина, но някои параметри могат да бъдат променени в CSS файлаjquery.zoomscroll-2.0.1.css.