Відображення зображення з допомогою jQuery

15

Від автора: всім, напевно, відомо про нову, не кросбраузерной технології canvas… C допомогою цієї технології можна витворяти дивовижні речі, наприклад красиво відобразити картинку.
Я вивчаю цю технологію, але поки застосовувати її рано, думаю як реалізувати подібні ефекти, використовуючи доступні інструменти кожному браузеру.

Що стосується відображення картинки, мені це вдалося.

Відображення зображення з допомогою jQuery

Відображення зображення з допомогою jQueryВідображення зображення з допомогою jQuery

Завдання

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

Таких картинок має бути кілька.

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

Метод

Файли та верстка

Знайдемо, підберемо зображення і виріжемо для них превью.

Для роботи скрипта, потрібно створити кілька «img» картинок у вигляді прев’ю, кожна з яких перебуватиме в об’єкті із заданим класом. Наприклад, у засланні «a» з класом «.img».

Спозиционируем горизонтально і стилізуємо наші посилання з картинками.

Вихідний план DOM

Відображення зображення з допомогою jQuery

Javascript

Скрипт повинен порахувати кількість об’єктів з класом «img» та у відповідності з результатом запустити цикл додавання відбиттів.

Спираючись на порядковий номер об’єкта з класом «img», скрипт дізнається посилання на зображення по атрибуту src картинки усередині цього об’єкта, а також дізнається його ширину і висоту. Вставляє в поточний об’єкт з класом «img» div з класом «ref», відразу після картинки. Потім запускається цикл по вставці фрагменту у вигляді div, з шириною як у картинки висотою в 50 разів менше, ніж у картинки. У створеного фрагмента задається фон за посиланням, отриманої з src, і засувається в залежності від етапу циклу. Створений div .ref відображається по вертикалі.

План DOM результату роботи скрипта

Відображення зображення з допомогою jQuery

Анімація

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

Рішення

Зображення

Для демонстрації я вибрав шпалери для робочого столу на тему Ubuntu і зробив зменшені копії з висотою 100 пікселів.

HTML

Всі картинки обов’язково повинні перебувати в своєму об’єкті з класом img. У моєму випадку це посилання на велику картинку – оригінал.

Не забувайте приєднувати файли скриптів і стилів.

Відображення зображення

Відображення зображення з допомогою jquery від Михайла Бєляєва.
Спеціально для
webformyself.com

картинка клас «img» — обов’язковий —>
Відображення зображення з допомогою jQuery
Відображення зображення з допомогою jQuery
Відображення зображення з допомогою jQuery
Відображення зображення з допомогою jQuery
Відображення зображення з допомогою jQuery

CSS стилі

Вивчаючи стилі, зверніть увагу на позиціонування об’єктів.

Ще ви помітите, що в описі стилів класу «img» вказано нульовий розмір шрифту, хоча ми нічого там писати і не збираємося. Сенс в тому, що IE збільшував задану висоту фрагмента, до розміру потенційного тексту і відображення було щонайменше не красивим…

А ця строчка цей баг ліквідує.

/*
вбиваємо відступи
*/
*
{
padding:0px;
margin:0px;
}
/*
довільні стилі
*/
h1
{
font-size:25px;
color:#3c3c3c;
text-shadow:0px 1px 1px #dbdbdb;
}
h1 a
{
text-decoration:none;
color:#3c3c3c;
}
h1 a:hover
{
color:#fff;
text-shadow:0px 1px 1px #3c3c3c;
}
/*
вбиваємо рамку картинок в посиланнях для IE і FF
*/
a img
{
border:0px;
}
body
{
background:url(img/bg.png) repeat-x top;
}
/*
загальний дів
*/
.all
{
width:100%;
overflow:hidden;
position:relative;
}
/*
дів з картинками
*/
.gal
{
margin-top:200px;
width:960px;
position:relative;
}
/*
клас для посилань або інших об’єктів, що містять зображення
*/
.img
{
position:relative;
/*
Заданий розмір шрифту — «0». Щоб зрозуміти що це необхідно, я витратив цілий день на боротьбу з багом в IE.
*/
font-size:0px;
margin-left:20px;
background:url(img/imgshadow.png) no-repeat center center;
float:left;
z-index:100;
}
.img img
{
z-index:101;
position:relative;
}

У нас виходить ось така картина:

Відображення зображення з допомогою jQuery

Javascript

Ось момент створення об’єкта, йому присвоюються стилі, зверніть на них увагу.

$(document).ready(function(){ /* чекаємо поки завантажиться DOM
Перевіряємо — скільки .img об’єктів виведено на сторінці
і згідно з цією цифрою запускаємо цикл обробки
*/
var imgcount = $(‘.img’).size() — 1;
for(var imgs = 0; imgs <= imgcount; imgs++)
{
$(‘.img:eq(‘ + imgs + ‘) img’).bind(‘load’, function(){ // чекаємо поки завантажиться картинка, що б з нею можна було працювати
var src = $(this).attr(‘src’); // дізнаємося сорс картинки
var wi = $(this).width(); // выесняем ширену картинки
var he = $(this).height(); // дізнаємося висоту картинки
var count = 50;
var forto = count — 1;
var frag = he / count; // ділимо на висоту 50, щоб отримати висоту одного фрагмента картинки
var ref = «»; // оголошуємо змінну, в яку будемо заносити фрагменти
$(this).parent().append(«

«); // вставляємо в поточний об’єкт .img дів, відразу після картинки
for(var i = 0; i <= forto; i++) // запускаємо цикл складання фрагментів у змінній ref
{
var spr = frag * i; // тут ми вычесляем на скільки зрушити фон фрагменту
if(i < 10)
{ // в нормальних браузерів застосовуються різна від IE одиниця прозорості
var op = «0.0»+i; // якщо значення менше 10, для нормальних браузерів використовуємо соті
var opie = i; // а для IE челые
}
else
{
var op = «0.»+i; // якщо значення більше 10, для нормальних браузерів використовуємо десяті
var opie = i; // а для IE челые
}
/*
додаємо фрагмет до вже створених
*/
ref = «

«+ ref;
}
$(this).parent().children(‘.ref’).append(ref); // вставляємо створені фрагменти див .ref
return false;
});
}
/*
ну і анимируем все це при наведенні
*/
$(‘.img img’).hover(function(){
$(this).stop().animate({‘margin-top’:’-20px’}, 300); // тягнемо картинку вгору
$(this).parent().children(‘.ref’).stop().animate({‘margin-top’:’40px’,’opacity’:’0.5′}, 300); // відображення топимо вниз і робимо прозоріше
},
function(){
$(this).stop().animate({‘margin-top’:’0px’}, 300); // на місце
$(this).parent().children(‘.ref’).stop().animate({‘margin-top’:’0px’,’opacity’:’1′}, 300); // назад
}
);
});

Опа!

Результат:

Відображення зображення з допомогою jQuery

Примітка

IE як завжди працює криво, на цей раз з подією «load()». Тому з локальних папок вашого комп’ютера, скрипт працювати не буде. Але в принципі це і не потрібно, так як з сервера все працює відмінно.

Застосовуєте і модернізуйте!

Ваші запитання, відгуки чекаю в коментарях

З повагою Михайло Бєляєв.