Масштабування зображень з використання highslide js

Отже, почнемо інтеграцію в ЛС.

Для того, щоб мати можливість збільшувати зображення, для початку, його треба мати! Зараз завантаження картинок працює за наступною схемою: Файл закачується, зменшується (якщо картинка не влазить у встановлені «рамки») і зберігається на сервері. Так що для того, щоб збільшувати зображення ми повинні його зберегти в первинному, великому розмірі. І для цього напишемо наступну функцію


яку додамо в файл /include/function.php (прям в кінець, перед)
Суть цієї функції проста. Вона отримує в якості параметра шлях до тимчасового файлу $ sFileTmp, створює директорію $ dir і копіює туди вихідне зображення під ім'ям $ sFileImg.

Тепер наше завдання полягає в тому, щоб зберегти сам файл після завантаження на сервер. При цьому потрібно перевірити - зображення зменшувалася чи ні? Який сенс зберігати один і той же файл двічі? Навіщо його збільшувати, якщо він не збільшиться? Для цього в файл /include/ajax/uploadImg.php після кожного рядка (їх там дві)

вставимо наступний код:


Ах да! Ми забули визначити змінну $ sBigFile.
Після рядки вставимо
Що ми зробили? Ми звірили md5 суми завантаженого файлу в тимчасову директорію і збереженого в папці / uploads / Якщо вони різні (файл змінений - мабуть його масштабувати), то скопіюємо вихідний файл в папку зі зменшеним / big /. Шлях до нього тримаємо в змінній $ sBigFile. Тепер додамо посилання на «великий» файл в html код зображення:

Знаходимо рядок І після неї додаємо наступний код:


Як я до цього прийшов? Трохи про встановлення Highslide JS.
Налаштовується він наступний чином (як найпростіший варіант, без наваротов). У хедер підключається сам скрипт, в ньому ж вказуються деякі параметри (про них пізніше) і задаються посилання наступним чином

Відмінно! Тепер налаштуємо власне сам highslide.
Для початку його потрібно завантажити (нас цікавить «Get the zip package»). Беремо від туди packed версію (highslide \ highslide.packed.js), щоб мала менший розмір. Навіщо користувачеві качати зайві кілобайти, правда?
Заливаємо його в папку / templates / skin / new / js /.
Далі з скачав архіву вміст папки highslide \ graphics поміщаємо в / templates / skin / new / images / highslide /. Залишилося тільки підключити і налаштувати!
У той же header.tpl. над тим шматком, що ми вставляли додамо код:

Що це означає і повний список опцій з поясненнями до них дивіться на офіційному сайті highslide.
Вуаля! Ми маємо масштабовані картинки =) Подивитися, як воно працює ви можете на проекті фотожаба.ру.

P.S. в попередньому пості я коротко описував даний спосіб. За вашим зауваженням код на jQuery був замінений на Mootools. При написанні тієї статті про Mootools я тільки чув, при написанні цієї - я з ним вже спілкувався, спасибі за досвід =) Критика вітається!

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

Масштабування зображень з використання highslide js

Хм ... Щось іноді (наскільки я зміг помітити саме скрипт дає) відбувається перевантаження проца сервера Мастерхоста і доступ до сайту тимчасово обмежується за помилкою 503 ... Дивно, ніхто такого не спостерігав?

Масштабування зображень з використання highslide js

І ще питання: чомусь при коректній роботі масштабіровальщіка в ФФ, в експлорері 7 просто відкривається у вікні велика картинка (за посиланням). В параметрах експлорера не знайшов нічого заборонного виконання js скриптів ... Погано шукав або справа в іншому.

Масштабування зображень з використання highslide js

При цьому на фотожаби всюди масштабується, а на моєму тільки в ФФ (пробувала IE, Opera, Chrome - нуль толку, тільки у вікні відкривається і все тут)

Схожі статті