Збільшення зображення при натисканні HTML. Скрипт для збільшення картинок WordPress. Установка скрипта для збільшення картинок

Звичайно, способів збільшення зображень є досить багато. І в основному використовуються застосування скриптів та плагінів. На мою думку такі методи виправдані у разі ресурсів з величезною кількістю фотографій або картинок. Мій блог не такий. І, як завжди, я йду шляхом найменшого витрат часу, знань і ресурсів свого сайту. Пропоную вам спосіб збільшення.

Можливо Вас також зацікавить:

Як зробити тінь у тексту за 5 хвилин

Здрастуйте, шановний читачу мого блогу. У цій статті ви навчитеся створювати за 5 хвилин за допомогою стилів css та коду html тінь тексту.

Як зробити кнопки вгору вниз для сайту

Ця стаття написана протягом статті про те, як зробити кнопку вгору для сайту.

Як прибрати запис із головної сторінки за допомогою коду

Здрастуйте, шановний читачу мого блогу. Виникла у мене необхідність сховати частину статей із головної сторінки. Чи не прибрати взагалі з доступу для читачів, а прибрати...

Прибираємо з головної сторінки та RSS записи рубрики

Продовжуємо покращувати функціонал та зовнішній вигляд сайту. Забираємо непотрібні записи з головної сторінки та RSS.

Хлібні крихти на сайті wordpress

Всім вітання на сайт. Продовжуємо покращувати наші блоги для заробітку. Думаю, ні для кого не секрет, що на сайті грають величезну роль. Звичайно не всі розуміють, яким чином і через який час вони починають впливати, але факт залишається фактом. Щоб покращити ці фактори, нам необхідно покращити юзабіліті сайту: додати, покращити дизайн, зробити його привабливим і простим. Зробити правильну обробку картинок на сайті. Багато хто хотів би дізнатися відповідь про те, як зробити на сайті картинку при натисканні на яку вона збільшувалася. Це збільшення реалізовано у мене на сайті. Погодьтеся досить приємно, що можна збільшити картинки, подивитися всю красу на весь екран.

Сьогодні спробую відкрити вам цей секрет збільшення. Взагалі картинку можна збільшити кількома діями:

• Наприклад, можна збільшити її при наведенні кнопки миші
• Другим варіантом може бути збільшення при натисканні

Звичайно, якщо ви користуєтеся WordPress, то найпростішим і найлегшим варіантом буде пошук шаблону з потрібною нам функцією, повірте в інтернеті зараз величезна кількість таких. Так що в 95% випадків ви знайдете саме шаблон зі збільшенням картинки. Але що робити, якщо вам подобається саме ця тема і ви хотіли б зробити збільшення картинки тільки на ній. Або ви взагалі пишете на листку html свій перший сайт, у чому я, звичайно, сильно сумніваюся.

Підключаємо ява скрипти для збільшення картинки

Підсумковим результатом буде збільшена картинка, на кшталт . Гаразд, все це філософія, щоб зробити збільшення картинки, нам необхідно підключити бібліотеку jQuery. Не пам'ятаю, але ніби в якомусь уроці я писав про цю бібліотеку, але якщо ви забули - нагадаю. Щоб підключити бібліотеку необхідно в сайту вставити два коди.

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

Якщо ж ви пишіть свій сайт на голому html, то для вставки картинки вам знадобиться цей код

Зверніть увагу, що в цьому випадку вам необхідно буде покласти свою картинку в папку images і вказати свою назву картинки. Не забувайте, що файли бібліотеки ява скриптів у вас має знаходитися там де і головна сторінка сайту, інакше просто пропишіть до них інший шлях. Завантажити бібліотеку файлів для збільшення картинки на сайті можете. Ну і найголовніше тепер, якщо ви хочете збільшити свою картинку, то пропишіть до неї наступні властивості.

Вітаю всіх читачів блогу сайту. На моєму блозі колонка з статтями, що публікуються, не вузька. Скріншоти та зображення можна розміщувати великого розміру, щоб на них було все добре видно. І все ж днями приступивши до написання огляду програми Majento PositionMeter, створеної для перевірки позицій сайту в пошукових системах, мені захотілося вивести скріншот на весь екран.

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

Вийшло як у «Крокодилі Данді» – прогулянка затяглася. Випав із робочого графіка, порушив усі ліміти відведений самим собою на пошуки. Ну та бог із ним, сподіваюся, що не дарма. Можливо, моя праця комусь знадобиться. Пропоную до вашої уваги два непогані рішення збільшення картинки при натисканні.

Друге рішення я продемонструю на своєму блогу. На жаль, на відміну від Олександра, доведеться як приклад використовувати лише скріншоти програми.

Збільшення зображення при натисканні Highslide JS

За допомогою скрипта Highslide JS, розробленого норвезькою компанією Highsoft AS, крім збільшення зображення при натисканні, можна створювати медіагалереї, спливаючі вікна, що працюють на html, ajax, Iframe і flash. Приступимо до дій. Ідемо на сторінку завантаження скрипта http://highslide.com , завантажуємо новий архів, і розпаковуємо його.

Знаходимо файл із розширенням index, відкриваємо його за допомогою будь-якого браузера, з'явиться вікно з прикладами. Вибираємо той, візуальні ефекти якого більше до вподоби. Є п'ять готових варіантів зміни скрипта збільшення картинки при натисканні.

Створюємо новий текстовий файл на робочому столі, копіюємо в нього частини коду виділеного на скріншоті червоним та зеленим квадратом на невеликій відстані один від одного. Займемося їх редагуванням. Перший код нам потрібно буде розташувати на сторінках свого сайту між head-тегами. За що він відповідає? Давайте почитаємо коментарі.

У коментарі під цифрою один говориться про те, що необхідно вказати шляхи до файлів js і css, і вони повинні бути розташовані на нашому сервері. Видаляємо коментарі, прописуємо шлях, де буде каталог з файлами скрипта. Всі двокрапки замінюємо на назву скачаного каталогу - highslide-4.1.13. І файл highslide.js замінимо на більш функціональний highslide-full.js. Раптом у майбутньому захочеться використати ще якісь плюшки Highslide JS. У другому коментарі йдеться про те, що важливо вказати шлях до каталогу із графікою скрипта. І що тут можна змінювати налаштування. Вийде повинно приблизно так.

Тепер готовий код потрібно розмістити в секції head перед тегом, що закривається. У себе на блозі, що працює на WordPress, я його розмістив у файлі footer.php використовуваної теми, перед тегом, що закривається

.

Приступимо до редагування другого коду, який вставлятимемо безпосередньо в сторінки з текстом для збільшення картинки при натисканні. Наведемо його для зручності використання до такого виду:

Додаємо текст до спливної картинки

Тепер викинемо все зайве з каталогу highslide-4.1.13.

Знаходимо папку highslide, відкриваємо її і видаляємо все крім папки graphics, і файлів highslide-full.js, highslide.css, highslide-ie6.css. Розміщуємо highslide-4.1.13 у кореневому каталозі свого сайту. Скрипт готовий до роботи. Можна заливати зображення, розміщувати код скрипта на сторінці, і насолоджуватися ефектом збільшення зображення при натисканні.

Для коректної роботи скрипта Highslide JS WordPress треба попередньо вирішити одну проблему. При переході з html редактора візуальний зникає частина коду скрипта - onclick="return hs.expand(this)" .
Відкриваємо файл functions.php використовуваної теми і додаємо наступний код унизу, перед?>.

// фільтр function change_mce_options($initArray) ( $initArray["verify_html"] = false; $initArray["cleanup_on_startup"] = false; $initArray["cleanup"] = false; $initArray["forced_root_block"] = false; $initArray["validate_children"] = false; $initArray["remove_redundant_brs"] = false; $initArray["remove_linebreaks"] = false; $initArray["force_p_newlines"] = false; $initArray["force_br_ne $initArray["fix_table_elements"] = false; $initArray["entities"] = "160,nbsp,38,amp,60,lt,62,gt"; return $initArray; ) add_filter("tiny_mce_before_init", "change_m_ );

Зберігаємо зміни, проблему вирішено.

Для зручності використання скрипта збільшення картинок при натисканні можна додати додаткові кнопки в HTML редактор WordPress.

Додаткові кнопки в HTML редакторі для Highslide JS

Знову відкриваємо файл functions.php використовуваної теми та вставляємо наступний код, у самому низу, перед?>.

// Додаткові кнопки html-редактор add_action("admin_print_footer_scripts", "add_sheens_quicktags"); function add_sheens_quicktags() ( ?>

Зверніть увагу, що в кнопці mo1 я простовив максимально допустиму ширину відображення мініютури для свого блогу width="730". Якщо мені потрібна мініатюра менше, я просто змінюю значення. Замініть допустиму ширину на значення. Можна також проставити висоту.

Зберігаємо, йдемо в текстовий редактор, бачимо таке.

Використовуємо кнопки div, mo1, mo2, float-l, float-r, потрібний код скрипта Highslide JS тепер можна виводити швидко та зручно. Залишилося прописати шлях до картинок, заповнити title, alt і написати додатковий текст до зображень.

Можна створити власну конфігурацію скрипта за допомогою Highslide JS редактора. Я для свого блогу саме так і вчинив.

Використання редактора Highslide JS

У лівій колонці відкритого вікна сайту розробників переходимо в редактор Highslide JS, натискаючи кнопку Editor. Перед нами відкриється вікно - Ласкаво просимо до редактора Highslide.

Тиснемо на зелену кнопку Get started!

Покроково про те, як користуватись редактором Highslide JS. Короткі поради.

За промовчанням відкриється вкладка General.

General

Language

Загалом мовних локалей 35 штук. Із них пострадянського простору три. Литовська, російська, українська. Зробити переклад цікавою мовою нескладно. Перекладати трохи, нижче зрозумієте, в якому файлі це все знаходиться. Вибираємо потрібну мову, рухаємось далі.

Load example

Вибираємо варіант відображення збільшення картинки при натисканні. Тиснемо на кнопку зі стрілочкою, у спливаючому вікні з'являться варіанти. Зупиняємось на сподобалося. Їх всього чотири, що йдуть першими. Інші для інших завдань - відображення галереї, що спливають вікон. Я використав No border, simple close button.

• White rounded outline
• White border and drop shadow
• No border, simple cloze button
• No outline, coloured CSS borders

Для перегляду будь-якого з варіантів спочатку клацаємо по картинці праворуч, а потім перебираємо ефекти. Вибираємо той, який сподобався та переходимо на наступну вкладку. Далі, у всіх налаштуваннях спочатку клацаємо праворуч на зображення, а після цього використовуючи зміни в налаштуваннях редактора, спостерігаємо як все виглядатиме візуально.

Gallery та HTML

Ці два пункти я пропустив оскільки поки вони в мої завдання не входять. Мене цікавить поки що збільшення картинки при натисканні.

Style

Thumbnail
Explanation label

Налаштування зовнішнього вигляду та ефектів мініатюри.

Три налаштування на вибір. Можна підказати під мініатюрою.

None - без підказки, Text bellow - з текстом, що пояснює, Icon and text below - з картинкою і текстом. Мені здається, це підказки зайве.

Кнопка Thumbnail border

Натиснувши на цю кнопку, можна налаштувати товщину і колір бордюрів мініатюри.

Label style

Ставимо галочку в попередньому перегляді і вибираємо відображення значка завантаження. Це на той випадок, якщо натискання на зображення зроблено, а її збільшення не поспішає з'являтися.
Popup styles
Background

Тут можна змінювати вигляд спливаючого вікна. Змінити фону підпису зображення. Змінювати ширину та колір бордюрів збільшеного зображення.
Dimming
Apply page dimming mask

Бажаєте щоб при натисканні на картинку для збільшення фон сторінки затемнявся, ставте в цьому налаштуванні галочку в чекбокс. Натиснувши на Dimming options, налаштовуємо опції затемнення, вибираємо колір.

Behavior

У Behavior налаштовуємо поведінку спливаючого вікна.
Animation
Easing
Чотири варіанти анімації під час виведення збільшеного зображення.

Кнопка Advanced animation

Налаштовуємо швидкість появи та зникнення збільшеної картинки.

Hide thumbnail on expand (not gallery)

Якщо напроти цього пункту поставити галочку зі збільшенням зображення сама мініатюра буде невидимою.
Popup size and alignment
Налаштування розмірів вікна, що збільшується, і його вирівнювання.

Alignment

Вибираємо варіант за промовчанням вирівнювання збільшеної картинки. Я вибрав виведення збільшеного зображення на сторінці avto.

Кнопка Advanced align

Натиснувши на цю кнопку, можна виставити налаштування ширини та висоти мінімального, максимального та фіксованого розміру зображення. Налаштувати відступи – top, right, bottom, left.

Overlays

Додавання тексту до збільшеного зображення.
Підпис у мене на збільшеному зображенні при натисканні відображатиметься внизу. Заголовок відображатиметься вгорі. В обох пунктах запропоновано чотири однакові джерела, з яких виводиться текст із збільшеною картинкою. За допомогою тайтла картинки, тайтла та альта мініатюри, та наступного самостійно прописаного тексту, оберненого в div.

Заголовок у мене береться з тайтла великого зображення, підпис із тексту, загорнутого в div.

З наступних двох пунктів я прибрав галочки. Close button – відображає хрестик на закриття у правому верхньому кутку. Show credits - виводить непомітне посилання на сайт розробників.

Домоглися того, що хотіли, зовнішній вигляд спливаючого вікна із зображенням влаштовує, рухаємося далі.

Редагування файлів сайту, інтеграція скрипту

Підключаємо свою конфігурацію скрипта, виконавши три рекомендовані кроки.

Спочатку відкриваємо вкладку Publish у вікні з прикладом, тиснемо на Yes, завантажуємо архів зі своєю конфігурацією на комп'ютер, натиснувши на Download a zip archive. Після цього розпаковуємо його, і поки що даємо спокій. Копіюємо вміст Step2 і Step3 у створений текстовий файл для подальшого редагування, закриваємо вікно.

Для роботи скрипта нам треба вказати шляхи до файлів безпосередньо на нього, папку з графікою та стилі CSS, прописавши код у секції head на сторінках сайту. Це код, скопійований з Step2, приступаємо до його редагування. У моєму випадку він виглядав так:

Вітання! Буває так: заходиш на блог, бачиш скрін, а що в ньому взагалі не видно. От і думаєш, що автор цього посту хотів показати в ньому? Але вихід є скрипт збільшення картинки при натисканні!

Дуже класна річ, цей скрипт. Самі дивіться, збільшує на кліку:

(Клікабельно)

Насправді існує багато різних ефектів збільшення картинки у статті блогу, але цей ефект, як на мене, найкращий.

Кому буде корисний цей скрипт збільшення картинок?

1. Насамперед тим, хто знімає скріншоти з поясненнями . Наприклад, якщо ви вирішили зняти об'ємний скріншот для своєї статті, що - то там підмалювали, для того, щоб матеріал був більш зрозумілий, закинули в статтю, а він просто повною мірою на сторінці вашого блогу не міститься, тому вордпрес його автоматично стискає, щоб не вийти за межі сторінки. А після стиску видимість, читабельність сильно зменшується. У мене так жодного разу було, тому я і вирішив скористатися цим скриптом збільшення картинки без втрати якості.
2. Якщо ви просто не хочете у статті розміщувати об'ємні зображення . Буває так, що потрібно показати багато зображень в одній статті, але не хочеться, щоб ці зображення займали багато місця, тоді налаштування скрипта — оптимальний варіант! Та й взагалі, якщо не хочете розміщувати об'ємні зображення, тоді цей скрипт просто потрібний.

Чудово. Тепер нам потрібно встановити скрипт на нашому сайті. Установка проходить у 3 кроки:

1. Завантажуємо скрипт і закидаємо у кореневу директорію свого сайту.
2. Встановлюємо потрібний код на власний веб-сайт.
3. Закидаємо малюнок у статтю та налаштовуємо її відображення.

Тож почнемо.

Другим етапом у нас іде встановлення коду скрипта. Куди встановлювати код? Можна встановлювати в header.php, footer.php, function.php, index.php, але я зазвичай встановлюю в footer.php, перед тегом

, щоб код останнім підвантажувався.

Ось сам код:

А ось, що вийшло у мене:

(Клікабельно)

А тепер найцікавіше.

Щоб скрипт збільшував картинки без втрати якості, потрібно:

1. Після завантаження зображення в статтю необхідно відкрити "Параметри зображення" та у пункті " Посилання"вибрати" Медіафайл" .