Qo'ng'iroq shakli 2

Bunday holda, bir nechta shakllarni chaqirish uchun kodning ushbu qismlariga e'tibor bering:

6. Feedburner obuna shaklini ko'rsatish

OBUNA BO'LING

Faqat https://feedburner.google.com/fb/a/mailverify?uri=Cms-info tasma manzilini oʻzingizga oʻzgartirish orqali obuna formangiz uchun ushbu koddan foydalanishingiz mumkin.

Easy Fancybox kabi fancybox plaginidan foydalanayotgan bo'lsangiz, quyidagi kodni qo'shing:
on_sent_ok: $.fancybox.close();
shaklingizning Qo'shimcha sozlamalar bo'limida.

Agar u xato qilsa: so'ralgan tarkibni yuklab bo'lmaydi. Iltimos keyinroq qayta urinib ko'ring

Bunday xato bo'lishi mumkin oxirgi versiyalari wordpress dvigateli uchun havoladagi sinfni o'zgartirish tavsiya etiladi:
qayta aloqa
ga o'zgartirish:
qayta aloqa

Biz fancybox-ni fancybox-inline-ga o'zgartirdik.

Muammolar va yechimlar:

2. Agar sizda ulangan galereya (masalan, NextGEN Gallery) yoki allaqachon “lightbox” effektiga ega boʻlgan mavzu oʻrnatilgan boʻlsa, natija quyidagicha boʻladi: oʻrnatilgan yorugʻlik qutisi va EasyFancy Boxʼning boshqa yorugʻlik qutisi bilan ochilgan fotosuratlar, bu ya'ni, keyin ularni ikki marta yopishingiz kerak.
Buning oldini olish uchun EasyFancy Box sozlamalarida belgini olib tashlang tasvirlar va qalqib chiquvchi shakl kodining yuqori qismida fancybox sinfini fancybox-inline bilan almashtiring. Sizning kodingiz quyidagicha ko'rinadi:

qayta aloqa

Hammasi shu, agar siz bizning IT hamjamiyatimizga "minnatdorchilik" bildirmoqchi bo'lsangiz - sizda shunday imkoniyat bor: o'ng tomonda portalni rivojlantirish uchun xayriya variantlari mavjud. Yoki maqolani quyidagi xizmatlar orqali ijtimoiy tarmoqlaringizda baham ko'ring.

it-media.kiev.ua

WordPress-dagi Easy Fancybox-ning xususiyatlari

• asosiy grafiklardan tashqari, Webp va SVG formatlari mavjud;
• qalqib chiquvchi oynada Vimeo, Youtube, Dailmotion-dan videolarni ko'rsatishga ruxsat beriladi;
• PDF va Flash fayllarni qo'llab-quvvatlaydi;
• oddiy HTML-kod va tashqi sahifalar mazmuni bilan ishlay oladi;
• asosiy WordPress galereyasi, shuningdek NextGEN bilan mos keladi;
• Imagemaps, Jetpack cheksiz aylantirish va menyu bandlariga yorug'lik qutisini o'rnatishda sizda hech qanday muammo bo'lmaydi;
• tasvirlarni avtomatik qayta ishlash haqida yuqorida aytib o'tilgan;
• qo'shimcha funktsiyalardan veb-resurs sahifalarini yuklashda qalqib chiquvchi oynaning avtomatik faollashuvi mavjud;
• 7-sonli aloqa shakli uchun modal oyna sifatida foydalanishga ruxsat beriladi - Easy Modalga alternativa (ombordagi tavsifdagi ko'rsatmalar);
• sozlamalarda siz ochilish effektlarini, rang va shaffof qoplamani va boshqa vizual variantlarni tanlashingiz mumkin.

Fancybox plaginining 12 dollarga premium versiyasi + yiliga 4 dollarlik keyingi obuna mavjud. Ijobiy tomonlari orasida ajralib turadi: qo'shimcha dizayn variantlari va qalqib chiquvchi avtomatik faollashtirish, slayd-shou effektlari, hoverda sarlavhani ko'rsatish va hk. Agar siz asosiy funktsiyalarni kengaytirmoqchi bo'lsangiz, bu haqda batafsilroq o'qing. shaxsan men bepul versiya boshdan-oyoq.

Shuningdek, modulning rasmiy sahifasida Fancybox nima uchun WordPress-da ishlamasligining bir nechta variantlari mavjud, ular quyidagilar bo'lishi mumkin:

• shunga o'xshash echimlar bilan ziddiyatlar;
• altbilgida wp_footer() yo'q;
• ba'zi plagin muammolari: Hammasi bir SEO to'plamida, jQuery Updater va WordPress-dagi Google Analytics va boshqa bir nechta;
• andozalar bilan ziddiyatlar - ko'pincha premiumlar shunga o'xshash effekt uchun o'zlarining skriptlariga ega (men bu vaziyatni quyida ko'rib chiqaman);

Bundan tashqari, wordpress.org saytidagi omborda tekshirish bo'yicha nazorat ro'yxati mavjud mumkin bo'lgan xatolar va ularni tuzatish uchun qanday choralar ko'rish kerak. Bu juda ko'p vaqt ajratilgan bir nechta kengaytmalardan biridir mumkin bo'lgan muammolar va noto'g'ri ishlash sabablari. Agar siz bilan shunga o'xshash narsa yuz bergan bo'lsa, uni o'qishni maslahat beraman.

Easy Fancybox-ni o'rnatish va sozlash

O'rnatish jarayoni standartdir - bu yerdan qo'lda yuklab oling yoki boshqaruv paneli orqali faollashtiring. Lightbox darhol saytda mavjud rasmlar va galereyalarga ulanadi (tasvir havolalarining ochilishi media fayllar sifatida o'rnatilishi kerak).

Barcha tahrirlanadigan variantlar asosiy tarkib ostidagi "Sozlamalar" - "Media fayllari" bo'limida joylashgan.

Bu erda bir nechta kichik nuqtalar mavjud:

• Media - modul ishlaydigan fayl turlarini tanlash.
• Overlay - rang / shaffoflik va qoplama chiqishi (quyuq fon).
• Oyna - ramka, sarlavha, yopish tugmasi va oyna harakati parametrlari.
• Turli (turli xil) - Avtomatik urish va mavzu/plagin moslik imkoniyatlari.
• Tasvirlar - ishga tushirish uchun tasvir kengaytmalarini, ba'zi dizayn xususiyatlari va galereyalarni o'rnatadi.

Umuman olganda, men sizga nima borligini bilish uchun barcha variantlarni ko'rib chiqishni maslahat beraman. Rostini aytsam, ko'p hollarda men bu erda hech narsani o'zgartirmayman - sukut bo'yicha hamma narsa yaxshi ishlaydi. Ba'zi elementlarning yonida premium versiyadagi mavjud qo'shimcha funktsiyalarni ko'rsatadigan "Qo'shimcha imkoniyatlar" kabi havolalar mavjud.

Rasmiy tavsifda siz juda ko'p qiziqarli narsalarni topasiz Plagin oson Fancybox - FAQ bo'limiga o'ting. Bu erda PDF-ga qo'ng'iroq qilish, aloqa shaklini ochish, oddiy modal oyna, Youtube video va h.k.

Sahifadagi skriptni o'chiring

Men ishlagan premium shablonlardan birida ichki yorug'lik qutisi mexanizmi taqdim etilgan, shuning uchun nizolarni oldini olish uchun Fancybox faqat saytning ma'lum bir joyiga yuklangan bo'lishi kerak edi.

Bu mavzuning funksiyalar faylida (functions.php) quyidagi kod orqali amalga oshiriladi:

Bu !is_page_template('page-menu.php') ni alohida sahifa shabloni bilan tekshiradi, lekin siz boshqa shartli iboralardan foydalanishingiz mumkin - is_single, is_home, is_category va hokazo. O'zgaruvchini False ga o'rnatish modulni o'chiradi.

Jami. Men WordPress-ga Fancybox plaginini deyarli har doim rasmlar va galereyaga oddiy yorug'lik qutisi qo'shish kerak bo'lganda o'rnataman. O'rnatishdan so'ng darhol ishlaydi, qoida tariqasida, boshqa skriptlarga zid kelmaydi, bir nechta sozlamalarga ega va muntazam yangilanadi. Ko'proq, printsipial jihatdan, undan hech narsa kerak emas.

Aytgancha, agar siz ushbu muammo uchun boshqa echimlardan foydalansangiz - yozing, boshqa narsani sinab ko'rish qiziq.

wordpressinside.com

Kirish

WordPress-da fotosuratlar bilan ishlash, fotosuratlar va boshqa media fayllarni sayt mazmuniga joylashtirish uchun ajoyib vositalar mavjud. WordPressning rivojlanishi bilan fotosuratlar va sayt galereyalari namoyishi ham yaxshilanmoqda. Fotosuratlarni ko'rsatishning deyarli barcha variantlari mavjud: eskizlarning avtomatik o'lchamlari bilan galereyalar yaratish, fotosuratlarni yangi sahifada va yangi tabda ko'rsatish, fotosuratlarning o'lchamini o'zgartirish va hk. Hamma narsa bor, lekin modal oynalarda fotosuratlar ko'rsatilmaydi - maqolaning tepasida alohida oynada paydo bo'ladigan oynalar.

Easy FancyBox Modal Windows Media Window WordPress plagini

WordPress sayt maqolalarida fotosuratlar va boshqa media fayllarni ko'rsatishni yaxshilaydigan plaginlardan mahrum emas. Afsuski, barcha plaginlar o'z vaqtida yangilanmaydi va tizim yangilanishlariga moslashmaydi. Natijada, modal oynalar ishlashni to'xtatadi va plaginni qayta o'rnatish kerak bo'ladi.

"WordPress saytidagi Lightbox effekti uchun 14 ta plagin" maqolasida men qalqib chiquvchi plaginlar haqida yozganman. Men Easy FancyBox plaginini sinab ko'rmagunimcha, ularning aksariyatini o'rnatdim, qayta o'rnatdim. Bu haqda batafsilroq gaplashamiz.

Plaginni yuklab oling va o'rnating

Plaginni saytning ma'muriy panelidan, yorliqda o'rnating Plagin → Qo'shish yangi. Agar bunday o'rnatishning iloji bo'lmasa, plaginni rasmiy plagin sahifasida yuklab oling: https://wordpress.org/plugins/easy-fancybox/, paketini oching va /plugins katalogiga yuklang.

Plaginni faollashtirgandan so'ng, u konsolda alohida qator sifatida ko'rinmaydi. Siz uning sozlamalarini yorliqdan kiritishingiz mumkin Plaginlar → Easy FancyBox → Parametrlar yoki media fayllar.

Easy FancyBox sozlamalarini organik tarzda o'rnatish Umumiy sozlamalar WordPress media fayllari, plaginning ishonchliligini o'ziga jalb qiladi va oshiradi.

Sozlamalar sahifasini ochib, biz barcha kerakli, minimal sozlamalar o'rnatilganligini ko'ramiz. Juda ko'p sozlamalar mavjud, ammo ulardan foydalanganda, ulardan ba'zilari mijoz tomonida sahifa yuklanishini oshirishini yodda tutishingiz kerak.

Plaginni faollashtirgandan so'ng, maqolalarga kiritilgan barcha fotosuratlar (jpeg, png, gif) maqolaning yuqori qismidagi modal oynalarda ko'rsatiladi, agar:

• Fotosuratni qo'shganda, ilova sahifasiga emas, balki media faylga havola o'rnatildi;
• Surat asl nusxaga nisbatan kichikroq.

Sozlanishi mumkin:

• Oynani ochish/yopishning uchta modal effektini tanlash;
• Overlay rejimida oynani tanlash imkoniyati;
• Sayt sahifalarida miniatyura galereyasini ko'rsatish;
• Sichqoncha g'ildiragini aylantirish orqali galereyani ko'rib chiqing.

Xulosa qilib shuni ta'kidlash kerakki, Easy FancyBox plaginining sozlamalarida YouTube, Dailymotion, Vimeo, videolar uchun modal oynalar kiritilgan. PDF hujjatlar, SWF, SVG. Boshqa resurs uchun iFrame yaratishingiz mumkin. Biroq, bu variantlar faqat pro versiyasi bitta domen uchun $10.

© www.wordpress-abc.ru

www.wordpress-abc.ru

Ko'pincha siz ajoyib qalqib chiquvchi kontakt shaklini yaratishingiz kerak bo'ladi, bu saytning "Qayta qo'ng'iroqqa buyurtma berish" sarlavhasidagi ilova yoki sevimli shnyaga bo'lishi mumkin.
Buni faqat ikkita plagin yordamida amalga oshirish mumkin,
va aloqa shakli

Hammasi odatdagidek qidiriladi va o'rnatiladi rasmiy ombor WordPress - hech qanday sir yo'q.
Keling, sozlashga o'tamiz,
Avval plaginni sozlaymiz
Sozlamalar - Media fayllar bo'limiga o'ting va Inline tarkibni tekshiring (Men sizga "Rasmlar" belgisini olib tashlashni maslahat beraman, chunki ko'pchilik mavzularda allaqachon o'zlarining qalqib chiquvchi oynalari va ularning uslublari mavjud va ziddiyatga yo'l qo'ymaslik uchun biz uni olib tashlaymiz)
"data-lazy-original="http://wpwh.ru/wp-content/uploads/2015/04/fansybox-300×171.jpg" alt="fansybox" width="300" height="171" / >

Bu plagin bilan hamma narsa. Keling, shaklning o'zini yaratishga o'tamiz. Plaginga o'ting Kontakt formasi Yangi shakl yarating va kerakli maydonlarni qo'shing. Aslida, plaginning o'zi sinov shaklini yaratadi, ba'zilari uchun bu etarli.

Biz plagin sozlamalari bilan tugatdik. Keling, tugmani o'zi qilaylik.
sinab ko'rish uchun istalgan postga o'ting va ushbu kodni joylashtiring

Agar to'g'ridan-to'g'ri shablon kodiga kirmasangiz, bu koddan foydalaning

tugmani yanada chiroyli qilish uchun, siz styles.button1 qo'shishingiz mumkin, bu kod misol sifatida, siz o'z uslubingizni yozishingiz mumkin, uni nusxalash va mavzuingizning style.css fayliga joylashtirish kerak.

To'liq kod shunday ko'rinadi

Bularning barchasi qanday ishlashiga misolni http://antiseptik.tv/ saytida topish mumkin, sarlavhada yashil tugma mavjud.

Xatoga duch kelganlar uchun " Soʻralgan kontentni yuklab boʻlmaydi. Iltimos keyinroq qayta urinib ko'ring” (bu WordPress dvigatelining so'nggi versiyalarida sodir bo'ladi) havoladagi sinfni o'zgartirish tavsiya etiladi:

ga o'zgartirish:

wpwh.ru

O'rnatish va sozlash

O'rnatish standart bo'lib, plaginning o'zi bepul ombordan yuklab olinishi mumkin WordPress plaginlari. Xo'sh, yoki men ushbu maqolada aytib o'tganimdek, to'g'ridan-to'g'ri administrator panelidan o'rnating. O'rnatish va faollashtirilgandan so'ng, plagin hech qanday qo'shimcha sozlamalarsiz ishlaydi, bu "qutidan tashqarida" deb ataladi. "Tanlash va sozlash" ning barcha muxlislari o'zlarining Sozlamalar - Media fayllar bo'limiga o'tishlari kerak. Bu erda Easy FancyBox uni yaratadi qo'shimcha sozlamalar. Ularning barchasi bir nechta asosiy bo'limlarga bo'lingan:

OAV - barcha qo'llab-quvvatlanadigan formatlar va fayl turlari ro'yxati. Odatiy bo'lib, faqat rasmlar kiritilgan, ammo siz PDF, YouTube, Vimeo, iFrames va boshqalarni qo'shishingiz mumkin.

qoplama - rasmni ko'rsatishda sahifa fon sozlamalari. Siz uni butunlay olib tashlashingiz yoki o'zingizning rangingiz va shaffoflikni o'rnatishingiz mumkin. Fon ustiga bosganingizda tasvirni yopishni o'chiring.

Oyna - rasmning o'zi bilan oynaning parametrlari bilan bog'liq hamma narsa. Rang, o'lchamlar, shaffoflik, ramka va boshqalar.

tasvirlar - kerakli rasm formatining barcha kengaytmalarini o'rnating. Kichik bo'limda Xulq-atvor chiqish animatsiyasini moslashtiring. Tasvir ustiga sichqoncha kursorini olib kelganda displeyni moslashtiring. Sarlavhani ko'rsatishni va standart WordPress galereyalarini qo'llab-quvvatlashni xohlaysizmi yoki yo'qligini aniqlang? Agar siz ba'zi uchinchi tomon galereyalaridan foydalanayotgan bo'lsangiz, tasvirlarning chiqishini takrorlamaslik uchun qo'llab-quvvatlashni o'chirib qo'ygan ma'qul.

Agar birinchi bo'limdagi rasmlarga qo'shimcha ravishda, masalan, ba'zi boshqa turdagi fayllarni belgilasangiz, ular uchun qo'shimcha sozlamalar mos ravishda sozlamalarda paydo bo'ladi. Masalan, YouTube videosi uchun siz oyna o'lchamlarini belgilashingiz mumkin.

Va nihoyat, agar bu erda imkoniyatlar etarli bo'lmasa, muallif plaginga 10 evroga premium kengaytmani sotib olishni taklif qiladi, bu erda yanada ko'proq xususiyatlar qo'shiladi.

wpnice.ru

WordPress uchun FancyBox: Tasvirlar va galereyalarni chiroyli ko'rsatish

Agar siz WordPress-da rasmlar bilan allaqachon ishlagan bo'lsangiz va ularni postlar va sahifalarga joylashtirgan bo'lsangiz, katta kengaytmali rasmlar shablonni qisqartirishini payqadingiz. Va ba'zida bu siz etkazmoqchi bo'lgan ma'lumotlarning to'g'ri ko'rsatilishiga ta'sir qiladi, chunki hamma narsani tahlil qilib bo'lmaydi. Media faylga o'zingizga havola qo'shish orqali bunga qarshi kurashishingiz mumkin. Ammo bu holda, rasmni bosganingizda, sozlamalarga qarab, u to'liq sahifa bilan bir xil oynada yoki yangi yorliqda ochiladi. Qabul qiling, ikkala variant ham eng qulay emas va foydalanuvchidan mutlaqo asossiz ravishda qo'shimcha harakatlar va vaqt talab qiladi.

Ushbu noqulaylikni bartaraf etish va WordPress blogida tasvirlarni ko'rsatish jarayonini yaxshilash uchun WordPress uchun FancyBox maxsus plagin ishlab chiqildi. Bu tashrif buyuruvchiga tasvirni bosish orqali faollashtirish, uni boshqa oynalar ustida ochish imkonini beradi. Mana bunday:

Keling, WordPress omboridan saytimiz uchun plaginni o'rnatamiz.

Biz FancyBox for WP-ni faollashtiramiz va u rasmlarga o'zining asosiy sozlamalarini qo'llagan holda darhol ishga tushadi. Buni blogimizga kirib, uni yangilash va mavjud rasmlardan birini bosish orqali tekshirishimiz mumkin.

Bunday holda, tasvir katta hajmga o'tkaziladi va biroz qoraygan tarkibning qolgan qismining ustidagi qalqib chiquvchi oynaga joylashtiriladi. Modal oynani yopish uchun siz yuqori o'ng burchakdagi xochni yoki rasm tashqarisidagi sahifaning istalgan joyini bosishingiz mumkin.

Agar FancyBox For WordPress ishlamasa yoki aniqrog'i tasvirlarni bosish mumkin bo'lmasa, muharrirga yuklash uchun rasmni tanlashda faylni ko'rsatish sozlamalari to'g'ri o'rnatilganligini tekshiring. "Link" maydoni "Media fayl" ga o'rnatilishi kerak.

Oldindan o'rnatilgan variantlardan tashqari, FancyBox For WordPress yanada moslashuvchan sozlamalarni taklif qiladi. Biz ularni WP konsolida, "Sozlamalar" - "WP uchun FancyBox" menyusida topishimiz mumkin. Havolani bosish orqali biz ma'lum parametrlarni tahrirlash uchun mas'ul bo'lgan ko'p sonli yorliqlarni ko'ramiz. Ular asosan rasmlarni ko'rsatish ko'rinishini o'zgartirish bilan bog'liq. Afsuski, plagin butunlay ingliz tilida. Ammo hozircha, agar standart sozlamalar sizning ehtiyojlaringizga mos kelmasa, sizga kerak bo'lishi mumkin bo'lgan barcha qiziqarli qismlarni ko'rib chiqamiz.

Boshlash yorlig'i - "Ma'lumot". Bu erda ishlab chiquvchilar va umuman mahsulot haqida ma'lumotlarga havolalar mavjud. Plaginni yaratuvchilarning ta'kidlashicha, agar siz barcha taklif qilingan sozlamalarni o'rganishni xohlamasangiz, unda bu holda ham sozlamalarning asosiy versiyasi juda jozibali natija beradi. Shuningdek, ular sizdan e'tibor berishingizni so'rashadi, agar tahrir qilgandan so'ng siz darhol o'zgarishlarni sezmasangiz, bu ko'pincha FancyBox For WordPress ishlamaydi degani emas. Agar sizda Hyper Cache kabi keshlash plagini o'rnatilgan bo'lsa, o'zgarishlarni saqlaganingizdan so'ng keshni tozalashingiz yoki sozlamalar bilan ishlashda plaginni o'chirib qo'yishingiz kerak.

Keyingi yorliq - Tashqi ko'rinish. Bu qalqib chiquvchi oynalar paydo bo'lishi uchun javobgar bo'lgan asosiy variantlarni sozlashimiz mumkin bo'lgan sahifa. Agar katakcha belgilansa, funktsiya yoqiladi, agar bo'lmasa, o'chiriladi:

• "Chegara" - modal oyna atrofida ramkani ko'rsatishni tanlash. Odatiy bo'lib yo'q. Agar biz "ha" variantini tanlasak, chegara rangini tanlash uchun o'n oltilik formatda (#000000) qo'shimcha maydon paydo bo'ladi. Ramka kengligini sozlash imkoniyati yo'q;
• "Yopish tugmasi" - yorug'lik qutisida oynani yopish tugmasi (xoch) va qaerda joylashganligini aniqlang (Chap (chap) / O'ng (o'ng) / Pastki (pastki) / Yuqori (yuqori)). Boshlang'ich qiymat yuqori o'ngda;
• "To'ldirish" - bu element FancyBox For WordP-da sozlash uchun javobgardir ress qalqib chiquvchi oynaning chetidan undagi tasvirgacha bo'lgan plomba rangi va kengligi. Standart qiymat oq, 10 piksel;
• "Overlay Options" - butun sahifa mazmunini qamrab oluvchi qalqib chiquvchi rasm ostida paydo bo'ladigan fonni xiralashtiruvchi fonning xususiyatlarini o'rnating. Dastlab aniqlangan: rang sifatida - kulrang, shaffoflik (shaffoflik) sifatida - 0,3. Shaffoflik xususiyati 0,0 dan 1,0 gacha o'lchanadi va qiymat qanchalik kichik bo'lsa, fon shunchalik shaffof bo'ladi. Shunga ko'ra, agar siz modal oyna orqasida qolgan tarkibni to'liq yashirishni istasangiz, shaffoflikni tanlashingiz mumkin: 1;
• "Sarlavha" - biz tasvirga sarlavha (ya'ni, tasvirning sarlavha atributining qiymati) ko'rsatiladimi yoki yo'qmi va qanday qilib tayinlaymiz. Bu erda siz nomning joylashishini qalqib chiquvchi oynaning to'ldirishiga (Ichkarida (ichki) / Tashqi (tashqi) / Yuqorida (yuqorida)) va uning rangiga nisbatan o'rnatishingiz mumkin. "Inside" va "Outside" qiymatlari matnni mos ravishda modalning pastki chetiga va uning ostiga qo'yadi. Va "Oddiy" opsiyasini tanlayotganda, ism quyuq shaffof substratda tasvirning o'zi tepasida, pastki chiziq ustida joylashgan bo'ladi;
• "Navigatsiya strelkalari" - navigatsiya strelkalarini ko'rsatish yoki ko'rsatmaslikni tanlang. Ular kursorni rasm ustiga olib borganingizda paydo bo'ladi.

"Animatsiyalar" yorlig'iga o'ting. Bu erda biz qalqib chiquvchi animatsiyani boshqarish uchun mas'ul funktsiyalarni sozlaymiz:

E'tibor bering, ushbu sozlamalar faqat "O'tish turi" parametrida elastik bo'lgan modal oynalarni ochish/yopish uchun qo'llanilishi mumkin.

To'g'ridan-to'g'ri engillashtirish sozlamalari bo'lgan maydonlardan so'ng FancyBox For WP mualliflari bizga havolalarga rioya qilishni va ular taklif qilgan yumshatish funksiyasi imkoniyatlari qanday ishlashini ko'rishni taklif qilishadi. (Birinchi havola hozircha mavjud emas.)

Keyingi yorliq - Xulq-atvor sozlamalari. U qalqib chiquvchi oynaning harakatini o'rnatish uchun javobgardir va "o'rta" maqomiga ega. Shu munosabat bilan, FancyBox For WordPress-ni ishlab chiquvchilari, agar biz bu erda joylashgan parametrlar bilan qanday ishlashni bilmagunimizcha, ushbu sahifadagi hamma narsani avvalgidek qoldirish yaxshiroq ekanligi haqida ogohlantirmoqda. Shuning uchun biz barcha variantlarga batafsil to'xtalmaymiz. Ularning har biri nima uchun javobgar ekanligi skrinshotdan aniq:

Beshinchi yorliq - "Galereyalar". Bu rasm galereyalariga oid sozlamalarning ilg'or darajasi:

• "Sahifadagi barcha rasmlar uchun galereya yaratish (standart)" - sahifadagi barcha rasmlar uchun galereya yaratish (standart). Ya'ni, agar sahifada bir nechta rasm bo'lsa, ular sukut bo'yicha plagin tomonidan galereyaga birlashtiriladi. Natijada, ularning istalgan birini modal oynada ochgan holda, biz rasmlarni aylanib chiqish orqali qolganlarini ko'rishimiz mumkin;
• "Galereyadagi rasmlarni avtomatik ravishda guruhlamang (agar siz galereyani qo'lda galereya yaratmoqchi bo'lsangiz, bundan foydalaning rel atribut)" - rasmlarni avtomatik ravishda galereyaga birlashtirmang (agar siz rel atributidan foydalanib galereyani qo'lda yaratmoqchi bo'lsangiz, ushbu parametrdan foydalaning). Men ushbu FancyBox For WordPress variantidan amalda qanday foydalanishni batafsilroq o'rganishni taklif qilaman.

Aytaylik, sizning sahifangizda shartli ravishda bir nechta semantik bloklarga bo'lingan material mavjud. Masalan: ulardan birida siz yaratish jarayonini tasvirlash uchun rasmlarni joylashtirasiz Ochilish sahifasi WP-da va quyida - eng muvaffaqiyatli sotiladigan sahifalarning misollari. Va siz ushbu ikki guruh tasvirlarni bitta modal oynada aralashtirishni emas, balki turli xil yorug'lik qutilarida ko'rsatilishini xohlaysiz. Rejangizni amalga oshirish uchun avval "Galereyadagi rasmlarni avtomatik ravishda guruhlamang" plagin variantini tanlang.

Endi muharrirda kerakli nashrni oching va "Matn" rejimiga, ya'ni html kodi ko'rsatiladigan rejimga o'ting. Rasmlarning birinchi guruhini va barcha havolalarni toping (teg a), unda har bir tasvir o'ralgan (teg img), hamma uchun bir xil qiymatga ega atributni tayinlang. Masalan: rel = "gal1".

Media fayllarning ikkinchi guruhi uchun bir xil amallarni takrorlang, lekin boshqa rel qiymati bilan, masalan: rel = "gal2";

• “Har bir post uchun galereya yarating (faqat mavzuingiz ishlatilsa ishlaydi sinf = « post» WordPress-da keng tarqalgan har bir postda)" - har bir post uchun galereya yarating (faqat sizning mavzuingiz WordPress uchun odatiy bo'lgan har bir post uchun "post" sinfidan foydalansa ishlaydi);
• "FancyBox-ni qo'llash uchun maxsus ifodadan foydalaning" - plagin tomonidan taklif qilingan variantlar sizga mos kelmasa va sizga yanada moslashuvchan individual sozlamalar kerak bo'lsa, WordPress uchun FancyBox-ni sozlash uchun maxsus jQuery ifodasini qo'llang. Ushbu variantni ishlatmaslik yaxshiroqdir.

Quyidagi yorliqlarni tahrir qilmaslik ham yaxshiroqdir, ular faqat ilg'or foydalanuvchilar uchun tushunarli va foydali bo'ladi.

Ishonchim komilki, yuqoridagi barcha ko'rsatmalar sizga FancyBox For WordPress-ni blogingizga muvaffaqiyatli integratsiyalash uchun, qalqib chiquvchi oynada tasvirlarni samarali ko'rsatish uchun etarli bo'ladi.

Ammo foydalanuvchilar vaqti-vaqti bilan Internetdagi plaginning zaifligi haqida shikoyat qilishlariga e'tibor bermaslik mumkin emas, bu esa WordPress boshqaruv paneli va hostingga kirish imkoni bo'lmaganda ham saytlarni viruslar bilan yuqtirishga olib keladi. Agar veb-resursingizni buzish muammosiga duch kelsangiz, iloji boricha tezroq saytdan viruslarni tekshirish va tozalash muhimdir. Men sizga yorug'lik qutilarida tasvirlarni ko'rsatish uchun muqobil variantni taklif qilmoqchiman. Va keyin biz VI uchun FancyBox uchun asosiy raqobat bo'lgan plagin bilan tanishamiz. Aynan u mening blogim sahifalarida ishlatiladi.

Easy FancyBox: plaginning asosiy xususiyatlari

Oldingi plagin kabi WordPres uchun Easy FancyBox s barcha tasvirlarga nisbatan CMS-da standart o'rnatishdan so'ng darhol ishlay boshlaydi. Agar siz sozlamalarni "o'zingiz uchun" sozlashni istasangiz, "Sozlamalar" - "Media fayllari" konsolidagi manzil sahifasida WordPress uchun FancyBox opsiyalariga deyarli o'xshash variantlarni topasiz.

Uning xarakterli farqlari:

Yoki "Avtogalereya" maydonidagi "Galereya" blokidagi plagin sozlamalarida "Hammasi bitta galereyada" bandini tanlang;

Plagin ishida sezilarli kamchiliklar aniqlanmagan. Ammo agar sizda WordPress shabloniga o'rnatilgan mahalliy yorug'lik qutisi bo'lsa, ziddiyat yuzaga kelishi ehtimoli yuqori va WordPress uchun Easy FancyBox ishlamayotganini ko'rishingiz mumkin. Bunday holda, qo'llab-quvvatlash xizmatiga murojaat qilish mantiqan.

pro-wordpress.com

Salom do'stlar! Bugun biz bir necha daqiqada fotosuratlar, videolar va boshqa media fayllarni chiroyli bezab turgan plagin yordamida ajoyib foto galereyasini qanday yaratish haqida gaplashamiz.

Ushbu maqoladan siz Easy FancyBox plaginini qanday o'rnatishni, uni WordPress saytida to'g'ri sozlashni o'rganasiz, shuningdek, boshqa maqolada boshqa qiziqarli echimlar bilan tanishasiz - Wordpressdagi foto galereya - nima osonroq bo'lishi mumkin?!

Aytgancha, uzoq vaqt yozmaganim uchun uzr, blogga umuman vaqt yo'q edi! Ishda ruxsatnomani o'tkazdim, men uni chaqiraman - yilda bir kun sharmandalik Endi siz dam olishingiz va ishlashingiz mumkin!

Mening yangi tug'ilgan qizim Yananing qorni doimo og'riyapti. Mana, xotinim bilan tun bo'yi qiynalib yuramiz - tong otamiz, toshbo'ron qilamiz va ertalab uxlaymiz, bu sanchig'i, oshqozon ko'nikadi, deyishadi - tezroq normal holatga qaytgan bo'lardi! Xo'sh, biz omon qolamiz va bu ...

Men mijoz saytining, to'g'rirog'i, onlayn-do'konning moslashtirilgan tartibi ustida ishlashni tugatdim - umuman olganda, bu ajoyib bo'ldi. Tarmoqda tobora ko'proq moslashuvchan saytlar paydo bo'lmoqda, bu meni juda xursand qiladi - resurslar sifati yaxshilanmoqda, bu ajoyib!

Yangiliklarim haqida ko'proq alohida maqolada yozaman, shunchaki ajoyib sovg'alar bilan yangi tanlovni kuting! Yangiliklardan xabardor bo'lish uchun mening blogimga obuna bo'ling. Va endi galereya yaratish mavzusiga qaytsak ...

WordPress uchun Easy FancyBox plaginini o'rnatish

Fotogalereya standart sifatida ma'muriy panel orqali o'rnatiladi. "Plugins" bo'limiga o'ting va "Yangi qo'shish" tugmasini bosing.
Plaginlar nomini qidirish satriga nusxa ko'chiring va "topish" tugmasini bosing. Ro'yxatdan plaginimizni tanlang va "O'rnatish" tugmasini bosing.

Siz to'g'ridan-to'g'ri saytingizga kirishingiz va plagin qanday ishlashini ko'rishingiz mumkin. Sog'lik to'g'rimi?! Endi barcha fotosuratlar ajoyib dizaynga ega. Nima juda yoqimli!

Easy FancyBox plagin sozlamalari

Printsipial jihatdan, hamma narsa allaqachon sukut bo'yicha o'rnatilgan, lekin siz ozgina hiyla-nayrang o'ynashingiz va plaginni o'zingizning didingizga qarab sozlashingiz mumkin. Keling, bu erga boraylik: Va biz boramiz puxta sozlash Easy FancyBox:
Bu yerda siz qaysi turdagi fayllar uchun plaginni qo'llab-quvvatlashni, modal oynalarni vizual tarzda loyihalashtirishni va boshqa texnik muammolarni tanlashingiz mumkin.

Bundan tashqari, siz tasvirni ko'rsatishda fonni, shuningdek, rang va shaffoflikni sozlashingiz mumkin. Rasmni yopish funktsiyasini bajaradigan xochni olib tashlashingiz mumkin, tasvir paging tugmasi. Shundan so‘ng foydalanuvchi sichqonchaning g‘ildiragi yordamida rasmlarni aylanib chiqish imkoniyatiga ega bo‘ladi.

WordPress uchun oson FancyBox foto galereyasini qanday yaratish mumkin

Keling, ushbu plagin yordamida qanday qilib foto galereya yaratishni aniqlaymiz. Buning uchun postni tahrirlash bo'limiga o'ting va "Media fayl qo'shish" tugmasini bosing.

Fayl kutubxonasini oching va "Galereya yaratish" tugmasini bosing.
Keyin, fayllar kutubxonasidan galereyada ko'rishni xohlagan rasmlarni tanlang. Rasmga bosing - uning yonida tasdiq belgisi paydo bo'ladi. Agar kerak bo'lsa, boshqa rasmlarni yuklashingiz mumkin. Sahifaning pastki qismida tanlangan fayllarning umumiy sonini ko'rishingiz mumkin.

Barcha tanlangan rasmlar bo'ladi ajralmas qismi galereyalar. Har bir alohida rasm uchun siz sarlavha, sarlavha va tavsif yaratishingiz mumkin.

Barcha sozlamalardan so'ng "Yangi galereya yaratish" tugmasini bosing. Ko'rsatilgan bo'limda rasmlarni joylarga ko'chirish orqali alohida raqamlashni yaratishingiz mumkin. Galereya sozlamalarida siz ustunlar sonini tanlashingiz mumkin. Xo'sh, printsipial jihatdan, bu erda hech qanday murakkab narsa yo'q, siz tushunasiz deb o'ylayman ...

Ana xolos! Biz hozirgina WordPress uchun Easy FancyBox foto galereyasini o'rnatdik va hozir hammamiz yaxshi sozlangan bo'lishimiz kerak. Boshqa shunga o'xshash plaginlardan foydalanasizmi? Tajribangizni baham ko'ring!

Savollar bo'ladi, izohlarda yozing! Mening blogimni o'qiyotganingizdan xursandman - Sizga hurmat va hurmat

savme.ru

FancyBox - bu chiroyli modal oynalarda foto galereyalar va boshqa kontent yaratish uchun jQuery plaginidir. Agar siz sayt va foto galereyani rejalashtirmoqchi bo'lsangiz va modal oynalarda ba'zi tarkiblarni joylashtirsangiz, ushbu skriptga e'tibor bering.

Jquery, jquery.easing va jquery.fancybox plaginlarini, jquery.fancybox.css uslublar jadvalini qo'shing

Biz fotogalereya yaratamiz.
Boshlash uchun biz fancybox-ga qo'ng'iroq qilishimiz va uni osib qo'yadigan ob'ektlarni belgilashimiz kerak. Bosh teglar orasiga quyidagilarni qo'shing:

FancyBox - Fotogalereya

bitta rasm

Rasmlar guruhi (rasmlar galereyasi)

Fotosuratlar bir xil galereyaga tegishli ekanligiga e'tibor berish kerak, ularning barchasi bir xil sinfga ega bo'lishi kerak (misolda class="gallery") va rel atributi (misolda rel="group"). Misolda, birinchi fotosuratda rel atributi mavjud emas. Sarlavha atributi ixtiyoriy, lekin agar mavjud boʻlsa, u suratga sarlavha sifatida xizmat qiladi.

Endi keling, fancybox-ga qo'ng'iroq qilishda o'rnatishimiz mumkin bo'lgan variantlarni ko'rib chiqamiz, bu foto galereyaning ko'rinishi va hissiyotiga ta'sir qiladi. Tajribamiz uchun biz shunga o'xshash HTML kodini yaratamiz (misol keltirmayman, u yuqoridagiga mutlaqo o'xshash), yagona farq barcha teglar sinf tayinlash galereya 2, va uning uchun quyidagi funksiyani yozing (biz m/y ni bosh teglari bilan ham joylashtiramiz):

$("a.gallery2").fancybox(
{
"to'ldirish": 20,
"imageScale": noto'g'ri,
"zoomOpacity": noto'g'ri,
"zoomSpeedIn": 1000,
"zoomSpeedOut": 1000,
"zoomSpeedChange": 1000
"ramka kengligi": 700
"ramka balandligi": 600
"overlayShow": rost
"overlayOpacity": 0,8,
"hideOnContentClick":noto'g'ri,
"centerOnScroll" : noto'g'ri

Bularning barchasi nimani anglatadi:
to'ldirish- oynaning chetidan tarkibni (fotosuratlarni) cheklash. Namoyishda men 20px o'rnatdim, bu, albatta, biroz ko'p, lekin bu ingl;
tasvir miqyosi- true qiymatini qabul qiladi - kontent (tasvirlar) oynaga mos ravishda masshtablanadi yoki noto'g'ri - oyna mazmunga mos ravishda cho'ziladi. Standart rost;
zoomOpacity- animatsiya paytida kontent shaffofligini o'zgartirish (standart noto'g'ri). Esda tutingki, shaffoflik 0 dan 1 gacha o'rnatiladi;
zoomSpeedIn- fotosuratni kattalashtirishda animatsiya tezligi ms (sukut bo'yicha 0);
zoomSpeedOut- fotosuratni kichraytirishda animatsiya tezligi milodiy (standart 0) ;
zoomSpeedChange- fotosuratni o'zgartirganda animatsiya tezligi ms (sukut bo'yicha 0);
ramka kengligi - oyna kengligi, px (425px - sukut bo'yicha);
ramka balandligi- oyna balandligi, px(355px - sukut bo'yicha);
overlayShow-(standart rost) agar rost boʻlsa, qalqib chiquvchi oyna ostidagi sahifani soya qiladi. Rang jquery.fancybox.css da o'rnatiladi - div#fancy_overlay
overlayOpacity- Shaffoflikni qorayish (sukut bo'yicha 0,3);
hideOnContentClick- Agar rost bo'lsa, oynani uning istalgan nuqtasini bosish orqali yopadi (navigatsiya elementlaridan tashqari). Standart rost;
centerOnScroll- Agar rost bo'lsa, foydalanuvchi sahifani aylantirganda oyna ekranning markazida joylashgan bo'ladi.
Bizning qo'limizda foto galereyalar yaratish uchun juda moslashuvchan vositani ko'rib turibmiz va nafaqat...

Lekin bu ajoyib plagin galereyalardan biri emas. Fancybox yordamida biz chiroyli oynalarda nafaqat fotosuratlarni, balki boshqa kontentni ham bemalol ko'rsatishimiz mumkin.
Youtube dan video (rutube, video.mail va boshqalar)

Modal oynada youtube.com dan video

Hammasi juda oddiy. Biz tegdamiz belgilangan sinf galereyasi, href atributidagi identifikator #testtuba. YouTube video kodi div#testube konteyneriga joylashtirilgan.

Google uni?

To'g'ri, bitta "lekin" bor. Sinf nomi bo'lishi kerak iframe. Shunga ko'ra, biz ushbu sinfga fancybox osib qo'yishimiz kerak

$("a.iframe").fancybox(
{
"frameWidth" : 800, // oyna kengligi, px (425px - standart)
"frameHeight": 600 // oyna balandligi, piksel (355px - standart)
});

O'z mazmuniga ega modal oynalar:

Oldingi misolga o'xshash tarzda amalga oshirildi:

Yig'la

Content.html fayli modal oynada ko'rsatiladigan htm kodini o'z ichiga oladi. E'tibor bering, content.html faylining o'zida CSS uslublari yoki ularga havolalar mavjud emas. Namoyish sahifasida, bosh teglar orasida, men .green sinfini va modal oynadagi matnni yaratdim (ilovada joylashgan).

) yashil rangda.

Biz ham atributdamiz href php ni ham belgilashimiz mumkin. Uni amalga oshiraylik. Buning uchun oddiy php-fayl content2.php yaratamiz:

Siz oyna raqamini ochdingiz.

Va misollarimiz bilan sahifada biz yozamiz:

Modal oynadagi kontentingiz 2-variant.

Birinchi oyna

Ikkinchi oyna

Biz havolalar GET - parametrga ega ekanligini va ushbu parametrdagi raqamga mos kelishini ko'ramiz content2.php har qanday amallarni bajarishi mumkin.Shunday qilib, ma’lumotlar bazasidagi kontent modal oynada ko‘rsatilishi, fikr-mulohaza shaklini amalga oshirish mumkin va hokazo. va h.k.

Endi bitta katta nuance haqida kontentingizni modal oynalarda ko'rsatish haqida.
Chunki qidiruv tizimlari javascriptni tushunmaydi, ular uchun bizning modal oynalarimiz shunchaki yangi sahifa. Hech qanday qidiruv tizimi hech kimga bunday sahifaga to'g'ridan-to'g'ri havola bermasligiga ishonch hosil qilishimiz kerak, lekin ayni paytda modal oynalar tarkibi odatdagidek indekslanishi mumkin.
Buni qilishingiz mumkin:

Modal oynadagi kontentingiz 2-variantni takrorlash bilan.

Birinchi oyna

Ikkinchi oyna

Bu erda for_spider.php - bu saytning oddiy sahifasi bo'lib, unda uslublar, skriptlar mavjud. Ushbu sahifada biz modal oynadagi kabi tarkibni ko'rsatamiz. Qidiruv mexanizmlari tomonidan indekslansin va JavaScript-ni o'chirib qo'ygan mehmonlar unga yetib borsin. . Oddiy odamlar uchun esa almashtirishni amalga oshiramiz. jQuery yordamida for_spider.php ni content2.php bilan almashtiramiz. Bosh teglar orasiga "$(document).ready(function() (" dan keyin quyidagi kodni yozing:

Url = $("a.modalbox").attr("href").replace("for_spider","content2");
$("a.modalbox").attr("href", url);
$("a.modalbox").fancybox(
{
"frameWidth": 400
"ramka balandligi": 400

Bu yerda nima qilyapmiz. Teglar bor biz havolani "chiqaramiz", "for_spider" ni undagi "content2" bilan almashtiramiz va uni o'zgaruvchiga qo'yamiz. url. Keyin xuddi shu teglar uchun atributni almashtiramiz href new (url o'zgaruvchisi qiymati). Xo'sh, keyin bizga allaqachon tanish bo'lgan fancybox plaginining ishga tushirilishi. Saytimizga tashrif buyuruvchi kirishi bilan for_spider.php ga barcha havolalar content2.php - modal oynamizga aylantiriladi.

Bugun hammasi shu, dars katta bo'lib chiqdi, lekin menimcha, bu foydali. E'tiboringiz uchun rahmat va dam olish kunini yaxshi o'tkazing!