Суретті шерту html файлын үлкейтеді. WordPress үшін кескінді үлкейту сценарийі

Сәлем құрметті жаңадан бастаушылар.

WordPress-те әдепкі бойынша суретті басқан кезде пайдаланушы сурет бетіне өтеді. Келісіңіз - кенеттен басқа бетке лақтырылған кезде бұл өте ыңғайсыз.

Кескін тікелей ол орналасқан бетте ұлғаюы үшін сайтта арнайы сценарий орнатылуы керек.

Оның қалай жұмыс істейтінін жоғарыдағы суретте немесе бүйірлік тақтадағы суреттерден көруге болады.

Оны Интернетте табу қиын емес, бірақ, өкінішке орай, барлық ұсыныстардың бір кемшілігі бар. Валидаторда тексерілген сценарий коды қате береді.

Маған аздап шыдауға және бұл жағдайды түзетуге тура келді, содан кейін біз барлық шаблондарда жақсы жұмыс істейтін және жарамды сценарий туралы сөйлесетін боламыз.

Оны орнату тәсілі тіпті сценарийлер туралы және жалпы бағдарламалау тілдері туралы ештеңе білмейтіндерге де қол жетімді.

Сонымен қатар, тамаша нәтиже бар, ол сізге плагинсіз жасауға мүмкіндік береді және alt тегін тиісті мәтінмен міндетті түрде толтыруды талап етеді және бұл сайтты оңтайландыруға өте жақсы әсер етеді.

Плагиндердің жүктеу жылдамдығын бәсеңдететіні ешкімге құпия емес, өйткені олардың көпшілігі сценарийлерін бас блокқа орналастырады.

Ал alt тегін толтыру көбінесе уақытты босқа кетіреді. Дәл сол жерде, ұнайды ма, ұнатпайды, сізге сәйкес мәтінді енгізу керек, себебі ол үлкейтілген суреттің астында қолтаңба ретінде көрсетіледі.

Суреттер көп болса, беттеуді орнатуға болады.

Тағы бір қулық - сценарий бәрін көбейтпейді, тек сіз көрсеткен суреттерді ғана арттырады.

Ыңғайлы ма? Ыңғайлы. Ақыр соңында, егер түпнұсқа өлшемдегі сурет параққа жақсы сәйкес келсе, оны неге көбейту керек.

Орнатуға көшейік.

Скрипті бар zip файлын менің Яндекс дискімнен жүктеп алу арқылы тегін алуға болады. Жүктеп алу

Осыдан кейін оны сайттың тамырына тастау керек. Түбірлік қалта - wp-admin, wp-content және т.б. қамтитын қалта.

Біз zip файлын FTP арқылы жүктейміз, оны қаптамадан шығарамыз, содан кейін каталогта үш файл мен бір қалта пайда болады.

Zip қалтасын жою керек. Сондай-ақ, енді суреттерді үлкейтетін плагин бар болса, жою керек.

Келесі қадамды footer.php файлында орындау қажет. серверден шықпай-ақ wp-content - тақырыптар - тақырыбыңыз - footer.php арқылы өтуге болады.

Содан кейін сайт консоліне өтуге болады Сыртқы түрі- Редактор - footer.php, немесе төменгі колонтитул. Және солай және солай болуы мүмкін.

Бұл файлда, ең соңында, тегтің алдында, келесі кодты енгізу керек:

Менің сайтымның мекенжайы орналасқан үш жолда сіз оны өзіңіздікімен ауыстыруыңыз керек және сіз файлды жаңарта аласыз.

Біз сценарийді орнатуды аяқтадық, енді үлкейту қажет кескіндерді қалай көрсетуге болады.

Біз суреттерді әдеттегідей жүктеуші арқылы жүктейміз, содан кейін Мәтіндік редактор режимінде жүктеп салынған суретке сілтеме табамыз.

href атрибуты алдында біз келесі классты белгілейміз:

сынып = "қарапайым қорап"

Ал, енді барлығы, орталықта шертілгенде және көрсетілгенде сурет артады. Біз бірден екі мәселені шештік.

Барлықтарыңызға сайтқа сәлем. Табыс табу үшін блогтарымызды жақсартуды жалғастырамыз. Сайттың үлкен рөл атқаратыны ешкімге құпия емес деп ойлаймын. Әрине, бәрі қалай және қай уақыттан кейін әсер ете бастайтынын түсінбейді, бірақ факт сақталады. Осы факторларды жақсарту үшін біз сайттың ыңғайлылығын жақсартуымыз керек: қосу, дизайнды жақсарту, оны тартымды және қарапайым ету. Сайттағы кескіндерді дұрыс өңдеуді жасаңыз. Көбісі сайтта суретті қалай жасауға болатыны туралы жауапты білгісі келеді, оны басқанда ол өсті. Бұл өсім менің веб-сайтымда жүзеге асырылады. Суреттерді үлкейтуге, барлық сұлулықты толық экранда көруге болатындығымен келісесіз.

Бүгін мен сіздерге өсудің осы құпиясын ашуға тырысамын. Жалпы, кескінді бірнеше әрекеттермен үлкейтуге болады:

• Мысалы, тінтуірдің түймешігін апарған кезде оны көбейтуге болады
• Екінші опция нұқу арқылы масштабтау болуы мүмкін

Әрине, егер сіз WordPress-ті қолдансаңыз, онда ең оңай және оңай нұсқа - бізге қажет функциясы бар үлгіні табу, маған сеніңіз, қазір Интернетте мұндайлардың көп саны бар. Осылайша, 95% жағдайда сіз кескін үлкейтілген үлгіні таба аласыз. Бірақ егер сізге осы тақырып ұнаса және суретті тек сол бойынша үлкейткіңіз келсе ше? Немесе сіз өзіңіздің бірінші сайтыңызды html бір бөлігіне жазасыз ба, бұл, әрине, мен қатты күмәнданамын.

Суретті арттыру үшін Java сценарийлерін қосамыз

Соңғы нәтиже түрі бойынша үлкейтілген сурет болады. Жарайды, мұның бәрі философия, кескінді үлкейту үшін jQuery кітапханасын қосу керек. Менің есімде жоқ, бірақ мен бір сабақта бұл кітапхана туралы жазған сияқтымын, бірақ ұмытып қалсаңыз, мен сізге еске саламын. Кітапхананы қосу үшін сізге қажет сайт екі кодты енгізіңіз.

Түсіну керек, jQuery кітапханалары көп және әртүрлі жағдайларда әртүрлі кітапханалар қосылады.

Егер сіз өзіңіздің сайтыңызды html-де жазсаңыз, суретті енгізу үшін сізге осы код қажет болады

Бұл жағдайда кескінді кескіндер қалтасына салып, сурет үшін атыңызды көрсетуіңіз керек екенін ескеріңіз. Java сценарийлер кітапханасының файлдары сайттың негізгі бетімен бір жерде орналасуы керек екенін ұмытпаңыз, әйтпесе оларға басқа жолды жазыңыз. Сайттағы суретті үлкейту үшін файлдар кітапханасын жүктеп алуға болады. Енді, ең бастысы, суретіңізді үлкейтетін болсаңыз, оған келесі қасиеттерді қосыңыз.

Бұл мақалада біз үлкенірек кескіні бар модальды терезені қалай жасау туралы айтатын боламыз.

Кейде қалқымалы терезеде суретті басқан кезде оны үлкейту қажет болады. Нәтижесінде біз қараңғы фонмен үлкейтілген кескінді аламыз.

Бұл jQuery кітапханасын пайдалану арқылы өте оңай. Бізге үш файл қажет - index.html, template.css деп аталатын CSS қалтасындағы мәнерлер файлы және popup_img.js сценарий файлы. Және суреттер қалтасында тағы үш сурет

Алдымен беттің HTML белгілеуін жазайық, стиль файлын және jQuery кітапханасын қосуды ұмытпаңыз:

Біз сонымен қатар бетке суреттерімізді қосамыз. Әрбір сурет үшін біз кескін класын қосамыз, оның көмегімен болашақта сценарийдегі суреттерге сілтеме жасаймыз.

Келесі қадам - ​​қараңғы фон мен үлкейтілген кескінді қосатын сценарий жазу.

$(document).ready(function() ( // Беттің жүктелуін күтіңіз $(".image").click(function()( // Кішкентай суретті басу оқиғасы var img = $(бұл); // Алу басылған сурет var src = img.attr("src"); // Осы суреттен суретке жолды алыңыз $("body").append("

"+ //Құжаттың негізгі бөлігіне қалқымалы терезе белгілеуін қосу"

"+ // күңгірт фон ретінде қызмет ететін блок" "+ // Үлкейтілген фотосуреттің өзі"

Мұнда бәрі пікірлерге байланысты. Келесі қадам - ​​стильдерді қосу, ол үшін мен түсініктемелерді сипаттамаймын, сіз CSS-ті жақсы білесіз деп болжанады.

дене ( жиек:0; ) .image ( жиек:30px; қалқымалы:сол; курсор:көрсеткіш; max-height:100px; ) .popup (позиция: абсолютті; биіктік:100%; ені:100%; жоғарғы:0; сол жақ: 0; дисплей: жоқ; мәтінді туралау: орталық; ) .popup_bg (фон: rgba(0,0,0,0,4); орын: абсолютті; z-индекс: 1; биіктік: 100%; ені: 100% ; ) .popup_img (позиция: салыстырмалы; маржа: 0 авто; z-индекс: 2; max-height: 94%; макс-ені: 94%; маржа: 1% 0 0 0; )

Нәтиже үшін демонстрациялық бетті қараңыз.

Бұл мақалада ұсынылған ақпарат, ең алдымен, жаңадан бастаған веб-шеберлерге арналған.

Сипаттама

«JQuery Image Magnify v1.11» сценарийі беттегі кез келген кескінді қажетті өлшемге дейін үлкейтуге мүмкіндік береді. Көбейту немесе қайтару бастапқы күйкескіннің үстіне тінтуір түймесін басқанда пайда болады. Кескін қажетті өлшемдермен бір данада дайындалады және jquery.magnifier.js файлындағы параметрлерге сәйкес үлкейтіледі.

Файлдарды, мысалы, браузер арқылы жүктеп алу кезінде қиындықтар туындаса, сілтемені көшіріп алыңыз ( оң жақ түймебасыңыз → сілтеме мекенжайын көшіру) және файлды жүктеу шебері арқылы жүктеп алыңыз.

Мұрағатты жүктеп алғаннан кейін оны компьютердегі ағымдағы қалтаға шығарып алыңыз. jQueryImageMagnify қалтасында сіз мынаны көресіз:

• jpg пішіміндегі алты кескіні бар кескіндер қалтасы;
• jquery.magnifier.js java сценарий файлы және magnify.cur масштабтау курсор файлы бар js қалтасы (барлық браузерлерде көрсетілмейді!);
• demo.html демо файлы.

Соңғысын пайдаланып жатқан браузерде ашыңыз және демонстрация жұмыс істеп тұрғанына көз жеткізіңіз.

Сіз алған мысалда "JQuery Image Magnify v1.11" тек Интернет қосылған кезде ғана жұмыс істейді, себебі файл соңғы нұсқасы jQuery кітапханалары - "jquery.min.js" Google API сайтынан жүктеледі.

Барлығының дербес жұмыс істеуін қаласаңыз, jQuery кітапханасының соңғы нұсқасын ресми сайттан жүктеп алып, қосыңыз.

Егер сізде соңғы немесе кейінгі нұсқасының jQuery кітапханасы болса (мақала жарияланған кезде - 3.1.1 нұсқасы) немесе сіз оны пайдаланып жатсаңыз қашықтан қосылу jQuery веб-сайтының немесе Google API нұсқасының соңғы нұсқасы, әрине, оны қайта қосуға болмайды.

Веб-сайтты орнату нұсқаулары (бір сурет)

Қадам 1. Қажетті суретті таңдап, оны сайттың түбірлік қалтасында орналасқан кескіндер қалтасына жүктеңіз.

2-қадам. js қалтасының мазмұнын сайттың түбіріндегі аттас қалтаға жүктеңіз.

3-қадам. jQuery және jquery.magnifier.js java сценарийін қосу үшін келесі кодты беттің басты немесе негізгі бөліміне қосу керек:

4-қадам. Және бұл код сіздің парағыңыздың негізгі бөлімінде орналасуы керек:

Түсініктемелер:

Сіз таңдаған кескін файлына жол.

Үлкейту алдындағы кескін өлшемдері. Оларды өз қалауыңыз бойынша көрсетіңіз.

Қарапайым тілмен айтқанда, негізгі бөлімде сіз оған class="magnify" беру арқылы әдеттегі кескін кодын енгізесіз. Кескінде анық өлшем атрибуттары болса (ені мен биіктігі), бұл пайдаланушыға jquery.magnifier.js сценарий файлындағы параметрлерге сәйкес кескінді үлкейтуге мүмкіндік береді. Егер өлшемдер көрсетілмесе, онда кескіннің нақты өлшемдері үлкейтуге негіз болады.

Нәтижені көрейік:

Кескінді орналастыру нұсқалары

Түсініктемелер:

Сол жақта орналасу.

Оң жақта орналасу.

Кескіннің бастапқы өлшемдерін ені және биіктігі атрибуттары арқылы өзгертуге болады.

jQuery.imageMagnify=( dsettings: ( үлкейту: 5, // кескінді үлкейту коэффициенті (әдепкі - 3)ұзақтығы: 500, // миллисекундтағы анимация ұзақтығы (әдепкі - 500)Қолайсыздық: 0,2 // үлкейтілген кескін оны жабатын кездегі түпнұсқа кескіннің мөлдірлік дәрежесі (әдепкі бойынша 0,2)

Сурет жақтауын қалай алып тастауға болады?

Мен бұл сұрақты жеке бөлімге қойдым, себебі ол сайтқа кірушілердің бірінен туындаған.

Тінтуірді басқаннан кейін үлкейтілген кескін жақтаусыз көрсетілуі үшін сізге қажет:

• jquery.magnifier.js файлын ашыңыз. Мұны кез келген мәтіндік редактормен жасауға болады, бірақ мен Notepad++ ұсынамын
• Код бөлігін табыңыз (Блокнот++ бағдарламасында ол 51-жолда болады)
  var $clone=$target.clone().css((позиция:"абсолют", сол жақ:0, жоғарғы:0, көріну:"жасырын", жиек:"1px қатты сұр" , курсор:"көрсеткіш")). appendTo(document.body)
• Маркермен ерекшеленген жолда шекара мәнін нөлге қойыңыз немесе сұр (сұр) түсті ақ (ақ) немесе тақырып бойынша сізге сәйкес келетін кез келген басқа өзгертіңіз. Осымен болды!

Екі бетте. 1-беттің соңы.

Блог сайтының барлық оқырмандарына сәлем. Менің блогымда жарияланған мақалалар бар баған тар емес. Скриншоттар мен кескіндерді үлкен көлемде орналастыруға болады, сонда оларда бәрі анық көрінеді. Дегенмен, басқа күні мен іздеу жүйелеріндегі сайттың орнын тексеру үшін жасалған Majento PositionMeter бағдарламасына шолу жаза бастағанда, мен скриншотты толық экранда көрсеткім келді.

Әрине, сұлулық үшін емес, блогқа келушілер үшін, қолданушылардың ыңғайлылығы үшін. Менің шошқа білім банкімде дайын сенімді шешім бар, бірақ қызығушылықтың жетегінде мен Интернетте аздап google-ді іздеп, қызықты нәрсе табуды шештім.

Бұл «Крокодил Дандидегі» сияқты болды - серуен созылды. Жұмыс кестесінен шығып, іздестіру жұмыстарына өзі берген барлық шектеулерді бұзған. Жарайды, Алла разы болсын, бекер емес деп үміттенемін. Мүмкін менің жұмысым біреуге пайдалы болар. Мен сіздердің назарларыңызға басқан кезде суретті арттыру үшін екі жақсы шешімді ұсынамын.

Екінші шешімді мен блогымда көрсетемін. Өкінішке орай, Александрдан айырмашылығы, мысал ретінде бағдарламаның скриншоттарын ғана пайдалануға тура келеді.

Highslide JS көмегімен суретті нұқу арқылы үлкейтіңіз

Норвегиялық Highsoft AS компаниясы әзірлеген Highslide JS сценарийін пайдалана отырып, басу арқылы үлкейтуден басқа, html, ajax, Iframe және флэш-те жұмыс істейтін медиа галереялар, қалқымалы терезелер жасауға болады. Әрекет етейік. Біз http://highslide.com сценарийін жүктеп алу бетіне өтіп, жаңа мұрағатты жүктеп алып, оны орамнан шығарамыз.

Біз индекс кеңейтімі бар файлды табамыз, оны кез келген браузермен ашамыз, мысалдары бар терезе пайда болады. Көрнекі әсерлері сізге көбірек ұнайтынын таңдаңыз. Басқан кезде кескінді үлкейту үшін сценарийді конфигурациялаудың бес дайын нұсқасы бар.

Біз жұмыс үстелінде жаңа мәтіндік файл жасаймыз, оған скриншотта бөлінген код бөліктерін бір-бірінен аз қашықтықта қызыл және жасыл шаршымен көшіреміз. Оларды өңдеп көрейік. Бірінші кодты сайтымыздың беттеріндегі басты тегтердің арасына орналастыруымыз керек. Ол не үшін жауапты? Пікірлерді оқып көрейік.

Бірінші нөмірдің астындағы түсініктемеде JS және CSS файлдарына жолдарды көрсету қажет және олар сөзсіз біздің серверде орналасуы керек дейді. Түсініктемелерді жоямыз, сценарий файлдары бар каталог орналасатын жолды жазамыз. Біз барлық қос нүктелерді жүктелген каталогтың атауымен ауыстырамыз - highslide-4.1.13. Біз highslide.js файлын неғұрлым функционалды highslide-full.js файлымен ауыстырамыз. Болашақта кенеттен тағы бірнеше Highslide JS тәттілерін пайдаланғыңыз келеді. Екінші түсініктемеде сценарий графикалық каталогына жолды көрсету маңызды екендігі айтылады. Және бұл жерде параметрлерді өзгертуге болады. Мынадай нәрсе шығуы керек.

Қазір дайын коджабу белгісінің алдында бас бөлігінде орналасуы керек. WordPress блогымда мен оны қолданып жатқан тақырыптың footer.php файлына жабу тегіне дейін орналастырдым..

Екінші кодты өңдеуді бастайық, оны басқан кезде суретті үлкейту үшін мәтіні бар беттерге тікелей кірістіреміз. Пайдалануға ыңғайлы болу үшін оны келесі пішінге келтіреміз:

Қалқымалы кескінге мәтін қосыңыз

Енді highslide-4.1.13 каталогынан қажет емес нәрселердің барлығын алып тастаймыз.

Біз highslide қалтасын тауып, оны ашамыз және графикалық қалтадан басқаның барлығын және енгізілген highslide-full.js, highslide.css, highslide-ie6.css файлдарын жоямыз. Біз highslide-4.1.13-ті веб-сайтымыздың түбірлік каталогына орналастырамыз. Сценарий жұмыс істеуге дайын. Суреттерді жүктеп салуға, сценарий кодын бетке орналастыруға және оны басқан кезде суретті үлкейту әсерінен ләззат алуға болады.

Highslide JS сценарийі WordPress-те дұрыс жұмыс істеуі үшін алдымен бір мәселені шешу керек. Html редакторынан визуалды редакторға ауысқан кезде сценарий кодының бір бөлігі жоғалады - onclick="return hs.expand(this)" .
Тақырыптың functions.php файлын ашып, төменгі жағындағы ?> белгісінің алдына келесі кодты қосыңыз.

// сүзгі функциясы change_mce_options($initArray) ( $initArray["verify_html"] = false; $initArray["cleanup_on_startup"] = false; $initArray["тазалау"] = 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[_]false; $initArrays ="wse $initArray["fix_table_elements"] = false; $initArray["entities"] = "160,nbsp,38,amp,60,lt,62,gt"; return $initArray; ) add_filter("tiny_mce_before_init", "change_mce_options" );

Өзгерістерді сақтаңыз, мәселе шешілді.

Кескінді үлкейту сценарийін басу арқылы пайдалану ыңғайлы болу үшін WordPress html редакторына қосымша түймелерді қосуға болады.

Highslide JS үшін html редакторындағы қосымша түймелер

Тақырыптың functions.php файлын қайта ашыңыз және ?> белгісінің алдына келесі кодты ең төменгі жағына қойыңыз.

// Қосымша түймелер html өңдегіші add_action("admin_print_footer_scripts", "add_sheens_quicktags"); add_sheens_quicktags() функциясы ( ?>

mo1 түймешігінде блогымның ені=”730″ үшін нобай дисплейінің рұқсат етілген ең үлкен енін орнатқанымды ескеріңіз. Маған кішірек нобай қажет болса, мәнді өзгертемін. Рұқсат етілген енді өз мәніңізбен ауыстырыңыз. Сондай-ақ биіктікті орнатуға болады.

Біз сақтаймыз, мәтіндік редакторға барамыз, біз келесіні көреміз.

div, mo1, mo2, float-l, float-r түймелерін пайдаланып, қажетті Highslide JS сценарий кодын енді тез және ыңғайлы түрде көрсетуге болады. Суреттерге жолды жазу, тақырыпты толтыру, alt және суреттерге қосымша мәтін жазу қалады.

Highslide JS өңдегішін пайдаланып өзіңіздің сценарий конфигурацияңызды жасай аласыз. Блогым үшін дәл осылай жасадым.

Highslide JS редакторын пайдалану

Әзірлеушілер сайтының ашық терезесінің сол жақ бағанында Өңдеу түймесін басу арқылы Highslide JS редакторына өтіңіз. Біздің алдымызда терезе ашылады - Highslide редакторына қош келдіңіз.

Жасыл түймені басыңыз Жұмысты бастаңыз!

Highslide JS редакторын қалай пайдалану керектігі туралы қадамдық. Қысқаша ұсыныстар.

Жалпы қойындысы әдепкі бойынша ашылады.

Жалпы

тіл

Барлығы 35 тіл тілі бар. Оның үшеуі посткеңестік кеңістіктегілер. Литва, орыс, украин. Оны қызықтыратын тілге аудару оңай. Аздап аудару үшін төменде оның қай файлда орналасқанын түсінесіз. Қажетті тілді таңдап, жалғастырыңыз.

жүктеу мысалы

Басқан кезде кескіннің үлкейтуін көрсету үшін опцияны таңдаңыз. Көрсеткі бар түймені басыңыз, қалқымалы терезеде опциялар пайда болады. Біз өзімізге ұнайтын нәрсеге тоқтаймыз. Олардың төртеуі ғана бірінші келеді. Қалғандары басқа тапсырмаларға арналған - галереяны, қалқымалы терезелерді көрсету. Мен шекарасыз, қарапайым жабу түймесін қолдандым.

• Ақ дөңгелек контур
• Ақ жиек және көлеңке
• Жиек жоқ, қарапайым жабу түймесі
• Контурсыз, түрлі-түсті CSS жиектері

Опциялардың кез келгенін көру үшін алдымен оң жақтағы суретті басыңыз, содан кейін әсерлер арқылы өтіңіз. Өзіңізге ұнайтынын таңдап, келесі қойындыға өтіңіз. Әрі қарай, барлық параметрлерде алдымен оң жақтағы суретті нұқыңыз, содан кейін редактор параметрлеріндегі өзгерістерді қолдана отырып, біз бәрі көрнекі түрде қалай көрінетінін байқаймыз.

Галерея және HTML

Мен бұл екі тармақты өткізіп жібердім, өйткені олар менің тапсырмаларымда жоқ. Мен суретті басқан кезде ғана масштабтауға қызығамын.

стиль

Нобай
Түсіндіру белгісі

Нобайдың көрінісі мен әсерлерін теңшеңіз.

Таңдау үшін үш параметр. Сіз нобай астында кеңестерді көрсете аласыз.

Ешбірі - шақыру жоқ, Төмендегі мәтін - түсіндірме мәтінімен, Белгіше және төменде мәтін - сурет пен мәтінмен. Менің ойымша, кеңестер артық.

Нобай шекарасының түймесі

Осы түймені басу арқылы сіз миниатюраның жиектерінің қалыңдығы мен түсін реттей аласыз.

жапсырма стилі

Алдын ала қарауға құсбелгі қойыңыз және жүктеп алу белгішесінің дисплейін таңдаңыз. Бұл сурет басылған жағдайда және оның өсуін көрсетуге асықпау керек.
Қалқымалы терезе стильдері
фон

Мұнда қалқымалы терезенің көрінісін өзгертуге болады. Сурет тақырыбының фонын өзгертіңіз. Үлкейтілген кескіннің жиектерінің енін және түсін өзгертіңіз.
Күңгірттену
Бетті күңгірттеу маскасын қолданыңыз

Кескінді үлкейту үшін басқан кезде беттің фоны күңгірттенуін қаласаңыз, осы параметрдегі құсбелгіні қойыңыз. Күңгірттеу опцияларын басу арқылы күңгірттеу опцияларын орнатыңыз, түсті таңдаңыз.

Мінез-құлық

Behavior қолданбасында қалқымалы терезенің әрекетін орнатамыз.
анимация
Жеңілдету
Үлкейтілген кескінді көрсету кезінде төрт анимация опциясы.

Кеңейтілген анимация түймесі

Үлкейтілген кескіннің пайда болу және жоғалу жылдамдығын реттеңіз.

Кеңейту кезінде нобайды жасыру (галерея емес)

Егер бұл элемент белгіленсе, сурет үлкейтілгенде, нобайдың өзі көрінбейтін болады.
Қалқымалы терезе өлшемі және туралау
Үлкен терезенің өлшемдерін реттеу және оны туралау.

Туралау

Үлкейтілген кескін үшін әдепкі туралау опциясын таңдаңыз. Мен бетте үлкейтілген суретті көрсетуді таңдадым - avto.

Кеңейтілген туралау түймесі

Осы түймені басу арқылы сіз минималды, максималды және бекітілген кескін өлшемдері үшін ені мен биіктігі параметрлерін орнатуға болады. Толтырғышты реттеңіз - жоғарғы, оң, төменгі, сол жақ.

Қабаттамалар

Үлкейтілген кескінге мәтін қосу.
Менің үлкейтілген суретімдегі қолтаңба басылғанда, төменгі жағында көрсетіледі. Тақырып жоғарғы жағында көрсетіледі. Екі абзацта да үлкейтілген суреті бар мәтін көрсетілетін төрт бірдей көздер ұсынылады. Кескін тақырыбымен, нобай атауымен және alt және div ішіне оралған кейінгі өздігінен жазылған мәтінмен.

Тақырып үлкен суреттің атауынан алынған, тақырып div-ге оралған мәтіннен алынған.

Мен келесі екі элементті алып тастадым. Жабу түймесі - жоғарғы оң жақ бұрышта жабу крестін көрсетеді. Кредиттерді көрсету - әзірлеушілердің сайтына жасырын сілтемені көрсетеді.

Біз қалаған нәрсеге қол жеткіздік, суреті бар қалқымалы терезенің пайда болуы бізге сәйкес келеді, әрі қарай жылжиды.

Сайт файлдарын өңдеу, сценарийді біріктіру

Ұсынылған үш қадамды орындау арқылы жеке сценарий конфигурациясын қосамыз.

Алдымен мысал терезесінде «Жариялау» қойындысын ашыңыз, «Иә» түймесін басыңыз, «Zip мұрағатын жүктеу» түймесін басу арқылы өз конфигурацияңызбен мұрағатты компьютеріңізге жүктеңіз. Осыдан кейін оны орауыштан шығарыңыз және әзірге оны жай қалдырыңыз. Кейінірек өңдеу үшін 2-қадам және 3-қадам мазмұнын жасалған мәтіндік файлға көшіріңіз, терезені жабыңыз.

Сценарий жұмыс істеуі үшін сайт беттеріндегі басты бөлімде кодты жазу арқылы оған тікелей файлдарға, графикасы бар қалтаны және CSS мәнерлерін көрсету керек. Бұл 2-қадамнан көшірілген код, оны өңдеуді бастайық. Менің жағдайда бұл келесідей көрінді: