Մեծացնել պատկերը մկնիկի սեղմումով: JQuery Image Magnify v1.11. Պատկերի ընդլայնման սցենար WordPress-ում
Այս հոդվածում ներկայացված տեղեկատվությունը հիմնականում ուղղված է սկսնակ վեբ վարպետներին:
Երկու էջի վրա. Էջ 1. Հաջորդ >>> Նկարագրություն«Jquery Image Magnify v1.11» սցենարը թույլ է տալիս էջի ցանկացած պատկեր մեծացնել պահանջվող չափի: Բարձրացնել կամ վերադառնալ սկզբնական վիճակտեղի է ունենում, երբ մկնիկի կոճակը սեղմվում է պատկերի վրա: Պատկերը պատրաստվում է մեկ օրինակով՝ պահանջվող չափսերով և ընդլայնվում՝ ըստ jquery.magnifier.js ֆայլի կարգավորումների։
Եթե ֆայլեր ներբեռնելու հետ կապված խնդիրներ ունեք, օրինակ՝ բրաուզերի միջոցով, պատճենեք հղումը (մկնիկի աջ կոճակը → պատճենեք հղման հասցեն) և ներբեռնեք ֆայլը Download Master-ի միջոցով:
Արխիվը ներբեռնելուց հետո այն հանեք ձեր համակարգչի ընթացիկ թղթապանակում: jQueryImageMagnify թղթապանակում կտեսնեք.
- պատկերների թղթապանակ վեց պատկերով jpg ձևաչափով;
- js թղթապանակ jquery.magnifier.js java script ֆայլով և magnify.cur խոշորացման կուրսորային ֆայլով (ոչ բոլոր բրաուզերներում արտացոլված):
- 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=«մեծացնել» ։ Եթե պատկերը պարունակում է բացահայտ չափի ատրիբուտներ (լայնություն և բարձրություն), ապա դա թույլ է տալիս օգտվողին մեծացնել պատկերը ըստ jquery.magnifier.js սցենարի ֆայլի պարամետրերի: Եթե չափերը նշված չեն, ապա իրական չափերըպատկերները հիմք կհանդիսանան խոշորացման համար։
Մենք նայում ենք արդյունքին. Մեծացնելու/նվազելու համար մկնիկի օգնությամբ կտտացրեք պատկերի վրա Տարբերակներ՝ պատկերների տեղադրմամբ
Բացատրություններ:
Դիրքավորումը ձախ կողմում:
Դիրքորոշում աջ կողմում.
Պատկերի սկզբնական չափերը կարող են փոխվել՝ օգտագործելով լայնությունը և բարձրությունը ատրիբուտները:
Հնարավոր կարգավորումներ jquery.magnifier.js ֆայլում
jQuery.imageMagnify=( dsettings. ( խոշորացում՝ 5, // մեծացման գործակիցը պատկերի համար (կանխադրվածը 3 է) տևողությունը՝ 500, // անիմացիայի տևողությունը միլիվայրկյաններով (կանխադրվածը 500 է) անթափանցիկություն՝ 0,2 //բնօրինակի անթափանցության աստիճան պատկերը, երբ խոշորացված պատկերը ծածկում է այն (կանխադրվածը 0,2 է)
Ինչպե՞ս հեռացնել նկարի շրջանակը:
Ես այս հարցը հատուկ դնում եմ առանձին ենթաբաժնում, քանի որ այն առաջացել է կայքի այցելուներից մեկից։
Որպեսզի մկնիկի սեղմումից հետո ընդլայնված պատկերը ցուցադրվի առանց շրջանակի, դուք պետք է.
- Բացեք jquery.magnifier.js ֆայլը: Դուք կարող եք դա անել ցանկացած տեքստային խմբագրիչով, բայց ես խորհուրդ եմ տալիս Notepad++-ը
- Գտեք կոդի մի կտոր (Notepad++-ում այն կլինի 51-րդ տողում)
var $clone=$target.clone().css((դիրք:"բացարձակ", ձախ:0, վերև:0, տեսանելիություն:"թաքնված", եզրագիծ:"1px պինդ մոխրագույն" , կուրսորը:"ցուցիչ")): appendTo(document.body) - Մարկերով ընդգծված տողում սահմանեք եզրագծի արժեքը զրոյի կամ փոխեք մոխրագույն (մոխրագույն) գույնը սպիտակ (սպիտակ) կամ որևէ այլ, որը ձեզ հարմար է թեմայի վերաբերյալ: Այսքանը:
Երկու էջի վրա. 1-ին էջի վերջ.
Իհարկե, պատկերները մեծացնելու բազմաթիվ եղանակներ կան: Եվ հիմնականում օգտագործվում էր սկրիպտների և պլագինների օգտագործումը: Իմ կարծիքով, նման մեթոդներն արդարացված են հսկայական քանակությամբ լուսանկարներով կամ ցանկացած նկարներով ռեսուրսների դեպքում։ Իմ բլոգն այդպիսին չէ։ Եվ, ինչպես միշտ, ես գնում եմ իմ կայքի ժամանակի, գիտելիքի և ռեսուրսների նվազագույն ծախսերի ճանապարհով։
Ես ձեզ առաջարկում եմ կայքի պատկերը մեծացնելու միջոց՝ առանց որևէ սկրիպտ օգտագործելու, այլ միայն html-ի օգնությամբ։
Կայքում պատկերը մեծացնելու այս եղանակը թույլ կտա ընթերցողին արագ տեսնել նկարը, քանի որ ձեր կայքը ստիպված չի լինի լրացուցիչ բեռնել սկրիպտներ։
Կայքում պատկերի մեծացում 1 ճանապարհ - մեծացրեք պատկերը կայքում սավառնելիսՇատ պարզ, լավ, ամենապարզ ճանապարհը, անկեղծ ասած: Պատկերի հատկություններին անհրաժեշտ է ավելացնել հետևյալ կոդը.
Onmouseover="this.style.width="մեծ px պատկերի լայնության արժեքը"" onmouseout="this.style.width="փոքր px պատկերի լայնության արժեքը""
Երբ սավառնում եք մկնիկի վրա, պատկերը մեծանում է:
Հուսով եմ հասկանում եք, որ այս ամենը արվում է տեքստային խմբագրիչում:
Մեթոդը նման է, պարզապես onmouseover-ը փոխարինեք onclick-ով: Պատկերի հատկություններին ավելացվում է հետևյալ կոդը.
Style="width: "փոքր px պատկերի լայնության արժեքը; border:2px solid black;" onclick="this.style.width=width value of large px image "" onmouseout="this.style.width="width value of small px image""
Ամբողջովին այսպիսի տեսք կունենա
Ահա արդյունքն ու կոդը նկարի համար, որի հետ pussy.
Երբ սեղմում եք մկնիկի վրա, նկարը մեծանում է բնօրինակ պատկերի չափին կամ ձեր նշած չափին: Չափը նվազեցնելու համար, այսինքն՝ վերադարձրեք պատկերն իր սկզբնական չափին, պարզապես սեղմեք էջի ցանկացած կետ:
Հուսով եմ, որ դուք չեք դժվարացել օգտագործել նման մեթոդներ՝ օգտագործելով html, կայքի պատկերը մեծացնելու համար:
Ընդհանրապես, կարծում եմ, որ շատ վեբ վարպետներ չեն սահմանափակվում միայն որևէ շարժիչ օգտագործելով և իրենց կայքերում կիրառում են html կոդեր։
Կարդացեք նաև.
2015-10-27T16:07:59+00:00 Նադեժդա Սկրիպտներն ու կոդերը մեծացնում են պատկերը կայքում, մեծացնում պատկերը կայքումԻհարկե, պատկերները մեծացնելու բազմաթիվ եղանակներ կան: Եվ հիմնականում օգտագործվում էր սկրիպտների և պլագինների օգտագործումը: Իմ կարծիքով, նման մեթոդներն արդարացված են հսկայական քանակությամբ լուսանկարներով կամ ցանկացած նկարներով ռեսուրսների դեպքում։ Իմ բլոգն այդպիսին չէ։ Եվ, ինչպես միշտ, ես գնում եմ իմ կայքի ժամանակի, գիտելիքի և ռեսուրսների նվազագույն ծախսերի ճանապարհով։ Ես առաջարկում եմ ձեզ մեծացնելու միջոց...
Նադեժդա Տրոֆիմովա [էլփոստը պաշտպանված է]Ադմինիստրատորի բլոգի կայք Ձեզ նույնպես կարող է հետաքրքրել.
Ինչպես ստեղծել տեքստի ստվեր 5 րոպեում
Բարև իմ բլոգի սիրելի ընթերցող: Այս հոդվածում դուք կսովորեք, թե ինչպես ստեղծել տեքստի ստվեր 5 րոպեում՝ օգտագործելով css ոճերը և html կոդը:
Ինչպես կատարել վեբ կայքի համար կոճակներ
Այս հոդվածը գրված է հոդվածի շարունակությունում, թե ինչպես կարելի է կոճակ պատրաստել կայքի համար։
Ինչպես հեռացնել գրառումը հիմնական էջից՝ օգտագործելով կոդը
Բարև իմ բլոգի սիրելի ընթերցող: Ես կարիք ունեի թաքցնելու որոշ հոդվածներ գլխավոր էջից։ Ընդհանրապես ոչ թե այն ընթերցողների հասանելիությունից հեռացնելու համար, այլ հանելու համար ...
Մենք հեռացնում ենք վերնագիրը հիմնական էջից և RSS գրառումներից
Մենք շարունակում ենք բարելավել կայքի ֆունկցիոնալությունը և տեսքը: Մենք հեռացնում ենք ավելորդ գրառումները գլխավոր էջից և RSS-ից:
Հաց փշրանքները wordpress կայքում
Աղբից և հասկացա՝ ԺԱՄԱՆԱԿԸ: Ժամանակն է նկարներ տեղադրել բլոգի հոդվածներում, որպեսզի երբ սեղմեք դրանց վրա, դրանք մեծանան և ցուցադրվեն իրենց սկզբնական չափերով:
Ավելին, որպեսզի խոշորացման էֆեկտը հարմար լինի օգտատիրոջը (ձեզ), որպեսզի ես՝ որպես հեղինակ, նկարներ հոդվածների մեջ տեղադրելիս երկար ժամանակ չխոթվեմ կոդերով (կայանքներով), և որ ծանրաբեռնվի. բլոգում նվազագույն է: Ես չեմ ուզում օգտագործել բոլոր տեսակի պլագինները և բեռնել նույն Mysql տվյալների բազան:
Ես դիմեցի մասնագետների օգնությանը, և նրանք ինձ ասացին, թե ինչ պետք է անեմ, և ես ամեն ինչ կարգավորեցի ընդամենը 3 րոպեում: Կրկին, առանց որևէ պլագին օգտագործելու, ինչպիսիք են Auto Highslide և այլն: Կատվին ինձ համար երկար չքաշենք... ու գործի անցնենք։
Ես փորձեցի պատկերների ընդլայնման սցենարների բոլոր տեսակի տարբերակները, բայց ուշադրությունս դադարեցրի սցենարի վրա, որը ստեղծում է հենց այդպիսի էֆեկտ: Նայեք օրինակին, սեղմեք ձախ կողմում գտնվող նկարի վրա.
Հետաքրքիր էֆեկտ. Մենք սեղմում ենք նկարի վրա և այն չի բացվում նոր պատուհանում (ինչը շատ անհարմար է), այլ բացվում է նույն էջում մեծացված ձևով, գեղեցիկ շրջանակի մեջ՝ խաչով, իսկ ստորև փոխարինված է նկարի նկարագրությունը։
Եթե Ձեզ դուր է գալիս պատկերի ընդլայնման էֆեկտը, ապա կարող եք օգտագործել այն: Այդ մասին կգրեմ ստորև։
Այստեղ կրկնում եմ, որ նման էֆեկտը պարզապես անհրաժեշտ է։ Կան պատկերներ, որոնց պետք է շատ ուշադիր նայել՝ այնտեղ ինչ-որ բան տեսնելու համար: Նրանք, ովքեր վատ տեսողություն ունեն, ընդհանրապես ոչինչ չեն տեսնի։ Պատկերի ընդլայնման սցենարը հարմար կլինի:
Այսպիսով, եկեք սկսենք: Ամեն ինչ արվում է երեք պարզ քայլով.
1. Ներբեռնեք սցենարը և վերբեռնեք այն ձեր հոսթինգում (սերվեր)
2. Ավելացրեք որոշ կոդ footer.php ֆայլին
3. Պատկերներ ավելացրեք բլոգի հոդվածներին:
GOU! Ներբեռնեք սցենարն ինքնին: Ամբողջ բովանդակությունը գցեք ձեր բլոգի արմատում: Բլոգի արմատը բլոգի հիմնական գրացուցակն է, որտեղ տեղակայված են այնպիսի թղթապանակներ, ինչպիսիք են wp-admin, wp-content և այլն: Աղիքներ Նրանք դա արեցին։
Երկրորդ քայլը ձեր բլոգի թեմայի footer.php ֆայլին հատուկ կոդ ավելացնելն է: Ահա նա.
Ուշադրություն. Կոդում site.ru-ն փոխարինեք ձեր տիրույթով։ Դուք պետք է կոդի ավելացնեք footer.php-ում մինչև փակվող պիտակը
Աղիքներ Դե, հիմնականում ամեն ինչ! Հիմա ամենակարևոր մասը. Մենք նկարներ կտեղադրենք հոդվածների մեջ, որպեսզի սեղմելիս դրանք մեծանան, ինչպես ցույց տվեցի վերևում օրինակում: Ընդհանուր առմամբ, նայեք. Այստեղ ամեն ինչ պարզ է, թեև սկզբում ինչ-որ մեկին դժվար կթվա: Ես սովորականի պես նկարներ եմ տեղադրում գրառման մեջ տեքստային խմբագրիչի կոճակի միջոցով - Ավելացնել մեդիա ֆայլ.
ԼԱՎ. Հիմա ես պարզապես ջնջում եմ այս ամենը (որը պատկերված է վերևի նկարում) խմբագրիչում գտնվող պատկերի html կոդը և տեղադրում եմ այս մեկը իր տեղում.
Արդյունքում մենք ստանում ենք հետևյալը.
Տեսնում ենք, որ վերևում ունենք սկզբնական չափի պատկերի հղում, իսկ ներքևում նույն պատկերն է (նույն url-ը), բայց փոքրացնելու համար տրված են չափեր։ Ի դեպ, չենք մոռանում նաև օպտիմալացման մասին, նկարում առկա է նաև alt-ը։ Ամեն ինչ թույն է:
ԹԱՐՄԱՑՆԵԼ Այս հոդվածի մեկնաբանություններում Դմիտրի Շկուրինն առաջարկել է այս սցենարն օգտագործելու էլ ավելի հեշտ միջոց։ Այժմ դուք ընդհանրապես կարիք չունեք շրջել ծածկագրի մեջ.
Այսինքն, երբ մենք սկրիպտը գցեցինք բլոգի արմատը + ավելացրինք հատուկ կոդ footer.php-ին, մենք այլևս կարիք չունենք որևէ բան ընտրել հոդվածում նկար ավելացնելու համար։ Մենք ամեն ինչ անում ենք հետևյալ կերպ. Ինչպես միշտ, «Ավելացնել մեդիա ֆայլ» ֆունկցիայի միջոցով հոդվածին նկար ենք ավելացնում։ Այժմ ֆայլի ցուցադրման պարամետրերում մենք նշում ենք հղումը որպես «մեդիա ֆայլ»:
Բնականաբար, մենք չափերը հարմարեցնում ենք այնպես, որ նկարը ճիշտ տեղավորվի հոդվածի մեջ, այնուհետև անցնում ենք «Ընդլայնված» ներդիր և «Վերաբերմունք» սյունակում գրում ենք - «Թարմացնել»: Պատրաստ.
Ամեն ինչ արագ է, պարզ և նույնիսկ ավելի հարմար: Շատ շնորհակալ եմ Դմիտրի! Օգնեց շատ!
Ամեն ինչ պարզ է! Ո՞վ ինչ չի հասկանում: Այստեղ ամեն ինչ տարրական է։ Ամենաթեժն այն է, որ ես չեմ կարող խոշորացման էֆեկտ տալ բոլոր նկարներին, այլ միայն նրանց, որոնք ուզում եմ տալ: Եթե, օրինակ, ես նկար եմ տեղադրում հոդվածի մեջ և կարիք չունեմ այն կրճատելու, որպեսզի այն տեղավորվի գրառման մեջ, ապա պետք չէ ստեղծել մեծացման էֆեկտ:
վերջ։ Վայելե՛ք։ Կամ գուցե ինչ-որ մեկը գիտի ավելի լավ միջոց: Գրեք մեկնաբանություններում։ Ի դեպ, այս սկրիպտը կարելի է օգտագործել ոչ միայն բլոգում, այլև տարբեր մեկէջանոց կայքերում: Լավ, ցտեսություն բոլորին:
Հարգանքներով՝ Ալեքսանդր Բորիսով
Բարեւ Ձեզ! Դա տեղի է ունենում այսպես. դու գնում ես բլոգ, տեսնում ես էկրան, բայց այն, ինչ կա դրա մեջ, ընդհանրապես չի երևում: Այսպիսով, դուք կարծում եք, թե ինչ է ցանկացել ցույց տալ այս գրառման հեղինակը դրանում: Բայց կա ելք՝ կտտացնելիս պատկերը մեծացնելու սցենար:
Շատ լավ բան, այս սցենարը: Տեսեք ինքներդ, սեղմեք մեծացնելու համար.
(կտտացնելով)
Իրականում, բլոգի հոդվածում նկարը մեծացնելու համար շատ տարբեր էֆեկտներ կան, բայց այս էֆեկտն իմ կարծիքով լավագույնն է:
Ո՞ւմ է ձեռնտու այս պատկերի ընդլայնման սցենարը:Հիանալի: Այժմ մենք պետք է տեղադրենք սցենարը մեր կայքում: Տեղադրումն իրականացվում է 3 քայլով.
Այսպիսով, եկեք սկսենք:
Երկրորդ քայլը սկրիպտի կոդը տեղադրելն է: Որտեղ տեղադրել կոդը: Կարող է սահմանվել header.php, footer.php, function.php, index.php, բայց ես սովորաբար սահմանում եմ footer.php, նախքան պիտակը,որպեսզի կոդը բեռնվի վերջինը:
Ահա ինքնին կոդը.
// Պատկերի ընտրանքներ«և պարբերությունում» Հղում«ընտրել» մեդիա ֆայլ" .
Ողջույն սիրելի սկսնակներ։
WordPress-ում լռելյայնորեն պատկերի վրա սեղմելիս օգտատերը տեղափոխվում է պատկերի էջ։ Համաձայն եմ - շատ անհարմար է, երբ հանկարծ քեզ մեկ այլ էջ են նետում։
Որպեսզի պատկերն ուղղակիորեն մեծանա այն էջում, որտեղ այն գտնվում է, կայքում պետք է տեղադրվի հատուկ սկրիպտ։
Դուք կարող եք տեսնել, թե ինչպես է այն աշխատում վերևի նկարում կամ կողային գոտու նկարներում:
Ինտերնետում այն գտնելը խնդիր չէ, բայց, ցավոք, բոլոր առաջարկներն ունեն մեկ թերություն. Սկրիպտի կոդը, երբ ստուգվում է վավերացնողում, սխալ է տալիս:
Ես ստիպված էի մի փոքր լարվել և շտկել այս իրավիճակը, այնպես որ հետո մենք կխոսենք բոլոր ձևանմուշների վրա կատարյալ աշխատանքի և վավեր սցենարի մասին:
Այն տեղադրելու եղանակը հասանելի է նույնիսկ նրանց համար, ովքեր ոչինչ չգիտեն սկրիպտների և ընդհանրապես ծրագրավորման լեզուների մասին:
Միաժամանակ նա գերազանց արդյունք, թույլ է տալիս անել առանց plugin-ի, և պահանջում է alt թեգի պարտադիր լրացում համապատասխան տեքստով, և դա շատ լավ կազդի կայքի օպտիմալացման վրա։
Գաղտնիք չէ, որ պլագինները դանդաղեցնում են բեռնման արագությունը, քանի որ նրանցից շատերը տեղադրում են իրենց սցենարները գլխի բլոկում:
Իսկ alt թեգը լրացնելը հաճախ պարզապես ժամանակի կորուստ է: Հենց այնտեղ, ուզես թե չուզես, պետք է մուտքագրես համապատասխան տեքստը, քանի որ այն կցուցադրվի որպես ստորագրություն մեծացված նկարի տակ։
Դուք կարող եք պարզապես էջադրել, եթե կան շատ պատկերներ:
Մեկ այլ հնարք այն է, որ սցենարը չի մեծացնում ամեն ինչ, այլ միայն այն պատկերները, որոնց վրա մատնանշում եք:
Հարմարավետ? Հարմարավետ. Ի վերջո, եթե սկզբնական չափի նկարը հիանալի տեղավորվում է էջում, ապա ինչու մեծացնել այն։
Եկեք անցնենք տեղադրմանը:
Դուք կարող եք անվճար սկրիպտով zip ստանալ՝ պարզապես այն ներբեռնելով իմ Yandex Disk-ից: Բեռնել
Դրանից հետո այն պետք է նետվի կայքի արմատի մեջ: Արմատային թղթապանակը այն թղթապանակն է, որը պարունակում է wp-admin, wp-content և այլն:
Մենք բեռնում ենք zip-ը FTP-ի միջոցով, ապափաթեթավորում ենք այն, որից հետո գրացուցակում հայտնվում են երեք ֆայլ և մեկ թղթապանակ։
Zip թղթապանակը պետք է ջնջվի: Բացի այդ, այժմ դուք պետք է հեռացնեք, եթե եղել է, պատկերները մեծացնող պլագին:
Հաջորդ քայլը պետք է կատարվի footer.php ֆայլում: դուք կարող եք անցնել wp-content - թեմաներ - ձեր թեմա - footer.php առանց սերվերից դուրս գալու:
Եվ դուք կարող եք գնալ կայքի վահանակ, այնուհետև Արտաքին տեսք- Խմբագիր - footer.php կամ Footer: Եվ այսպես և այնպես հնարավոր է։
Այս ֆայլում, հենց վերջում, պիտակից առաջ, անհրաժեշտ է տեղադրել հետևյալ կոդը.
(գործառույթ ()(
var boxes=,els,i,l;
if(document.querySelectorAll)(
els=document.querySelectorAll("a");
Box..css»);
Box..js",function()(
simplebox.init();
for(i=0,l=els.length;i
