Увеличаване на изображението на скрипт, инсталиране на DLE. Част 1.

Със сигурност сте срещали повече от веднъж скриптове, които помагат за увеличаване на изображенията, когато задържите курсора на мишката върху тях. Напоследък те са спечелили най-голяма популярност при продажба на страници, онлайн магазини и сайтове на различни теми, филми, музика и т.н. Днес реших да споделя с вас един от трите такива скрипта, които намерих в интернет. Тъй като по-голямата част от моите интернет ресурси са изградени на CMS DLE, възникна идеята да осъществим инсталирането на такъв скрипт с помощта на допълнително поле, където просто трябва да въведем връзка към изображенията и ефектът е готов!

Създайте допълнително поле и редактирайте файла shortstory.tpl

Първо, нека дефинираме идеята и нейното изпълнение. Като пример ще използвам моя тестов двигател DLE, инсталиран на Denwer, въпреки че самата процедура няма да се различава по никакъв начин от инсталирането на реален хостинг, освен че трябва да използвате FTP за качване и редактиране на файлове. И така на тестовия двигател, в самото начало имам стандартните новини от DLE "Добре дошли" и именно с нея ще работим.

Фигура 1.

На фигура 1 виждаме резултата от кратките новини, където голямото изображение е над краткото описание. Тук ще намалим показаните му размери и ще преместим връзката към изображението в допълнително поле. Отворете контролния панел на DLE, въведете раздела „Допълнителни полета за новини“, щракнете върху „Добавяне на поле“. В прозореца, който се отваря, задайте името и описанието на нашето поле. Тъй като не винаги публикациите или статиите имат изображение, поставете отметка пред „Използвайте по желание (можете да оставите полето празно)“ и кликнете върху „Запазване“

Фигура 2.

Тоест посочих, че моята снимка ще бъде в блока, а текстът от нея ще бъде разположен вдясно, веднага задайте размера на ширината и височината на изображението. Запазвам файла и отивам да редактирам нашите новини. Отваряйки го, виждам връзка към изображението в самото начало на публикацията. Копирам го и го изтривам от публикацията и поставям самата връзка в създаденото допълнително поле.

Фигура №3.

Сега актуализираме страницата и проверяваме дали сме успели.

Фигура №4.

Запазваме и актуализираме страницата. Виждаме следното. Картината се появява, но не увеличава курсора на мишката. Точно така, не сме заредили JS скриптове в нашия шаблон. От изтегления архив трябва да заредим файловете jquery.magnify-1.0.2.js и jquery.js в папката JS на нашия шаблон. Ако вашият шаблон няма такава папка, създайте я. След като скриптовете бъдат качени (заредени), трябва да ги свържете към шаблона. Отворете файла main.tpl и напишете пътищата в действието на маркерите. Като този:

Запазваме, актуализираме и гледаме. Ако всичко е направено правилно, тогава скриптът трябва да работи.

Снимка №5.

Редактиране на скрипта.

Сега малко за редактиране на параметри, JS, които можем да променим. Отворете файла jquery.magnify-1.0.2.js и намерете редовете:

Тук се редактира, прозорецът за заснемане при задържане, в моя пример задавам следните стойности, ширина (ширина) 170 px и височина (височина) 200px. Можете да поставите тези, които са удобни за вас и вашата идея.

И още един параметър, който можем да редактираме. Например искаме полето на дисплея да има по-голям или пълен размер при задържане. За целта намираме линията:

мащаб = (w/smallimagedata.w + h/smallimagedata.h)/2;

И заменяме последната стойност с, например, 1.7. Запомнете, колкото по-малък е броят, толкова по-голям е прозорецът и обратно.

Може би това е всичко, което исках да ви кажа за този сценарий. Но все още имаме две възможности, за които ще говоря следващия път, може би те ще бъдат най-интересните за вас.

Изтеглете скрипта "Увеличете изображението при нанасяне на курсора":

lupa_1.zip [354,86 Kb] (Изтегляния: 79)