Добрий день, хочу запропонувати вам досить простий, але від цього не менш ефектний урок зі зміни розмірів картинки за допомогою слайдера (бігунка). Для початок давайте розберемося з чим ми будемо мати справу.
Перше з чого варто почати це підключення JQuery, качаємо тут.
Другий крок підключення jQuery UI - це дуже корисна надбудова над JQuery, в даному випадку нам необхідний віджет Slider. Завантажити його можна тут. головне не забудьте прибрати (Deselect all). В се інші галочки крім Slider і UI Core, інакше ризикуєте отримати величезний і даремний (для даного уроку) файл.
В архіві є все необхідне, але все-таки я рекомендую для тестування використовувати мій архів, в якому вже проведена робота по його очищення від зайвих стилів і інших демонстративних файлів.
HTML розмітка нашого документа максимально проста.
Два елементи форми input, в яких будуть виводитися дані про розмір картинки, а точніше ширина і висота:
Власне сам слайдер (або бігунок, кому як більше подобається)
І звичайно зображення над якому ми будемо працювати (реальний розмір зображення 666 x 1000 px)
Увага! При додаванні картинки обов'язково необхідно прописувати в неї атрибути width і height.
Тепер сам JQuery:
Давайте по порядку розберемося, що ж ми зробили:
- за допомогою команди attr () отримуємо значення атрибутів нашої картинки width і height і присвоюємо їх відповідним змінним.
- визначаємо співвідношення сторін картинки - ширини до висоти. Це допоможе нам правильно пропорціоніровать її на сторінці.
прив'язуємо віджет Slider до html розмітки, а конкретно до нашого
- налаштовуємо слайдер під наші вимоги:
orientation - положення на сторінці, може приймати два значення "horizontal" і "vertical"
min і max - мінімальне і максимальне значення шкали (задати можна будь-, при реальному використанні на сайті рекомендую прив'язати його до максимального розміру картинки)
value - визначає початкове положення бігунка, присвоюємо йому значення змінної width (а взагалі це може бути будь-який числове значення в межах min і max)
- події на які реагує бігунок
- так як ui.value - поточне значення на опції value, а воно прив'язане до атрибуту width (ширина картинки), то для визначення висоти нам необхідно провести просте арифметичне дію поділити поточне значення widht на z, яка як ви пам'ятаєте є співвідношенням сторін картинки. І округляем отримане значення за допомогою функції Math.round.
- команда val () застосовується для отримання доступу до значень з елементів форми.
- тут найголовніше, змінюємо ширину і висоту самої картинки прямо на сторінки за допомогою команд width () і height ()
При бажанні можна додати трохи php коду, для отримання даних про розмір фото при її завантаження і тоді вийти досить універсальний скрипт.
Власне все, спасибі за увагу, сподіваюся урок вам стати в нагоді.
Урок від нашого читача - Максима Чагіна. У джерелі до уроку просив вказати, мабуть, його сайт.
5 останніх уроків рубрики "jQuery"
Сьогодні ми б хотіли вам розповісти про бібліотеку TypeIt - безкоштовному jQuery плагін. З її допомогою можна імітувати набір тексту. Якщо все налаштувати правильно, то можна домогтися дуже реалістичного ефекту.
jQuery плагін для створення тимчасової шкали.
jQuery плагін для створення діаграми Ганта.
Приклад того як здійснити завантаження файлу через PHP і jQuery ajax.
Корисна вельми річ, відразу ж з'явилася ідея застосувати у себе на сайті таке, тому що з якоїсь причини max-height і max-width працюють не дуже коректно, а ця функція в самий раз.
DimaBitrix
Дуже корисна річ, особливо на сайтах, де є галерея будь-яких зображень, ось як раз у мого друга галерея фотографій, треба йому порадити почитати цей урок, думаю зрадіє. Дякуємо.
Дякуємо! Дуже хороший скрипт, втім, як і всі на цьому сайті! Особливо мені сподобалося демо, коли я відкрив і у бачив там свою любов - Анну Плетньова!
Низький уклін Вам за все те що тут є.
Відмінно! Величезне спасибі, давно шукав щось таке))
Добрий день. Давно шукаю щось подібне, але ніяк не виходить відшукати. Мені потрібно збільшувати не картинку, а SWF файл. Намагався розібратися з цим кодом, але не зміг. Якщо хто-небудь підкаже, як це зробити, або де можна пошукати, буду вдячний. Заздалегідь дякую.
За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!
Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!
Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.
Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!