Hogyan készítsünk Colorbox-os képgalériát Drupal 7-ben?



Hasonló dokumentumok
Duál Reklám weboldal Adminisztrátor kézikönyv

9. Entitás modulok. Nagy Gusztáv: Drupal 7 alapismeretek Fejlesztői verzió: október 6.

Az alábbi leírás bemutatja a KryoNet E-számlák elektronikus aláírásának és időbélyegzőjének ellenőrzését.

Útmutató az OKM 2007 FIT-jelentés telepítéséhez

Oktatási segédanyag. Weboldalszerkesztési gyakorlatok

A WORDPRESS TESTRESZABÁSA (MEGJELENÉS MENÜ ELEMEI)

1.A. feladat: Programablakok

Megújított tanúsítvány cseréje a Windows tanúsítványtárban

Tele Élettel Programportál. Adminisztrátori segédlet

A webáruház kezdőlapján háromféle diavetítés beállítására van lehetőség:

Tájékoztató a Budapesti Gazdasági Főiskolán üzemelő vezeték nélküli (WiFi) hálózat használatához

Sygic: Voucher Edition for Android telepítése

A nyomtatókkal kapcsolatos beállításokat a Vezérlőpulton, a Nyomtatók mappában végezhetjük el. Nyomtató telepítését a Nyomtató hozzáadása ikonra

Navigációs GPS adatok kezelése QGIS programmal (1.4 verzió) Összeállította dr. Siki Zoltán

Invitel levelezés címek esetén

Korábbi e-számlák esetén a Mávinformatika tanúsítványát töltse le, mely hiteles szolgáltatói tanúsítvány:kgyhsz_ca_ cer.

EDInet Connector telepítési segédlet

E-book export, letöltés, offline olvasási segédlet

Stíluslapok használata (CSS)

Rendszergazda Debrecenben

VARIO Face 2.0 Felhasználói kézikönyv


BaBér. Bérügyviteli rendszer. Telepítési segédlet 2014.

kommunikáció Megoldások

ÁVF oktatási és közösségi portál

Tájékoztató a Budapesti Gazdasági Főiskolán üzemelő vezeték nélküli (WiFi) hálózat használatához

Astra áttöltés Dimension-be

Levelezési beállítások

Heti Hálózati Hírek kapcsolt dokumentumok megnyitása

Verziószám 2.2 Objektum azonosító (OID) Hatálybalépés dátuma szeptember 2.

Hiteles elektronikus postafiók Perkapu

Online naptár használata

VirtueMart bővítmény letölthető termékek eladásához

A Google űrlap (form) használata

Egyszerűbb a Google keresőbe beírni a Sharepoint Designer 2007 letöltés kulcsszavakat és az első találat erre a címre mutat.

15.4.2a Laborgyakorlat: Böngésző beállítása

Microsec Zrt. által kibocsátott elektronikus aláírás telepítése Windows 7 (x86/x64) Internet Explorer 9 (32 bites) böngészőbe

R-LINK 2 A szoftver használati útmutatója

A MOKKA hitelesítő szoftver telepítése és használata

Apache OpenOffice telepítési útmutató

Force-X Content Management System, keskenynyomda.hu felhasználói dokumentáció

Ablak és ablakműveletek

Egzinet Partner Portál

A Zotero hivatkozáskezelő program bemutatása. Mátyás Melinda

Bevezetés a QGIS program használatába Összeálította dr. Siki Zoltán

AZ N-WARE KFT. ÁLTAL ELEKTRONIKUSAN ALÁÍRT PDF DOKUMENTUMOK HITELESSÉGÉNEK ELLENŐRZÉSE VERZIÓ SZÁM: 1.3 KELT:

TESZTELÉSI SEGÉDLET. regisztráció I első naplóváz elkészítése I első napló kitöltése I applikáció letöltése I naplózás applikációval

WINDOWS TELEPÍTÉSI ÉS AKTIVÁLÁSI ÚTMUTATÓ A FOTOBETYAR.HU - PHOTOSHOP PLUGINJEIHEZ

TERC V.I.P. hardverkulcs regisztráció

Felhasználói leírás a DimNAV Server segédprogramhoz ( )

NINJA kezelői program letöltése és installálása

FELHASZNÁLÓI ÚTMUTATÓ A MOBIL BROKER KERESKEDÉSI FELÜLET HASZNÁLATÁHOZ

WordPress segédlet. Bevezető. Letöltés. Telepítés

GIRO GSM MODEM/VPN KAPCSOLAT TELEPÍTÉSI ÚTMUTATÓ

IBM TRIRIGA használatának megkezdése - TRIRIGA környezet személyre szabása videó parancsfájl

SzePi Moodle tanári kézikönyv 1.0. A Dugonics András Piarista Gimnázium Moodle rendszerének elérése:

Gábor Dénes Számítástechnikai Emlékverseny 2005/2006 Alkalmazói kategória, III. korcsoport Második forduló

ADATSZOLGÁLTATÁS központi honlap használata esetén

Ingyenes DDNS beállítása MAZi DVR/NVR/IP eszközökön

A TERC VIP költségvetés-készítő program telepítése, Interneten keresztül, manuálisan

Első lépések. A Microsoft Outlook 2013 külsőre kicsit más, mint elődei, ezért ezzel az útmutatóval szeretnénk megkönnyíteni a program megismerését.

SportinvazioClub felhasználói kézikönyv v

A Buda-cash Trader V2 Pro online kereskedési rendszer munkafelületének bemutatása

ios iphone Az iphone beállítása Ahhoz, hogy használni tudd az iphone-od, először be kell állítani (aktiválni) az itunes-ban.

15.4.2b Laborgyakorlat: Mappa és nyomtató megosztása, a megosztási jogok beállítása

O365 és felhő szolgáltatások igénybevételéhez szükséges beállítások

Hallgatói segédlet a tananyag megjelenítéséhez

Vodafone GPRS Kapcsolat létrehozása Win XP alatt a Connect Me használata nélkül. A képek a Win XP Professional angol verziójából származnak

Felhasználói útmutató Created vasárnap 08 február 2015

Hírek és Programok beküldése

HTML é s wéblapféjlészté s

Több oldalas dokumentum készítése. MS Word 2010 szövegszerkesztővel

Összetett feladatok. Föld és a Hold

SZE INFORMATIKAI KÉPZÉS 1

Titkosított kommunikáció. Mindenkivel. Egyszerűen.

HVK Adminisztrátori használati útmutató

Kezdeti Útmutató a Szolgáltatáselemző Rendszer használatához. szakembereknek számára. Tartalom

ÁVF oktatási és közösségi portál

A WORDPRESS TELEPÍTÉSÉNEK LÉPÉSEI

E-Freight beállítási segédlet

Rajz 01 gyakorló feladat

ÚTMUTATÓ. az MTA Akadémiai Adattárba (AAT) való regisztrációhoz és adatkitöltéshez, adatfrissítéshez

KFKI Unified Messaging Server (UMS) Felhasználói Útmutató

Modem telepítése Windows 98 alatt

Prezentáció, Nyomtatás előkészítése. Előkészületek

Felhasználói segédlet

Vodafone-os beállítások Android operációs rendszer esetében

Hogyan töltsünk fel dolgozatokat a DE SzTDP e-portfóliójába? 3. A könyvtárszerkezet létrehozása

Felhasználói útmutató a portal.nakvi.hu oldalhoz

First Voice Kft. Stilldesign Üzletág

A LOGO MOTION TANÍTÁSA

WordPress jegyzet 0.1 verzió. Pál László

Az Óbudai Egyetem Moodle rendszere. Felhasználói kézikönyv hallgatóknak

Kezdő lépések Microsoft Outlook

SafeQ nyomtatató telepítése

Az importálás folyamata Felhasználói dokumentáció verzió 2.1.

Felhasználói kézikönyv. Tőkepiaci Közzététel. Magyar Nemzeti Bank

ClusterGrid for Windows

Használati útmutató áruházi adományok jelentéséhez verzió:

Átírás:

Hogyan készítsünk Colorbox-os képgalériát Drupal 7-ben? (Jó segítség: http://www.youtube.com/watch?v=gstnfznz3hg) I. Telepteni kell az alábbi három dolgot 1. A Colorbox modult (https://www.drupal.org/project/colorbox) Az oldal alján lévő 7.x verziójú.zip-et töltsük le és csomagoljuk ki a saját számítógépünkre. Majd a mappát másoljuk be a webszerver sites\all\modules mappába. 2. A Lightbox plugint. A Colorbox modul oldalán lévő Colorbox linkre klikkelve (az alábbi képen pirossal bekeretezve látható) elérhetjük lightbox oldalát, ahonnan letölthetjük a lightbox plugint (Download gomb a 2. ábrán). A letöltött állományt csomagoljuk ki, nevezzük át colorbox -ra a mappát és a teljes mappát másoljuk be a sites\all\libraries mappába. 1. ábra A Colorbox modul oldala 2. ábra A Colorbox megvalósításához szükséges lightbox plugin oldala

3. A Libraries API modult. Modul kicsomagolása és a szerver sites\all\modules mappájába feltölteni. Ezek után engedélyezzük a drupal oldalunkon a két modul működését! II. Oldjuk meg a Colorboxos fotógalériát az Article tartalomtípuson belül 1. Először is tekintsük meg az Article tartalomtípus mezőit! Felépítés>Tartalomtipus>Article>Mezők kezelése fül Structure>ContentType>Article>Manage Fields A mezők: 2. Engedélyezzük azt, hogy az Article tartalomtípushoz több képet is fel lehessen tölteni, ne csak az alapértelmezett egyet! Az előző ábrán lévő bekarikázott szerkesztésre klikkeljünk rá, ennek hatására az Article tartalomtípus Image mezőjének beállításait végezhetjük el, gördítsünk az oldal aljára és az Image mező beállításai blokk alatt az Értékek száma alatt válasszuk ki az 1 szám helyett azt, hogy Korlátlan (Unlimited). Ezzel elérjük azt, hogy az Article tartalomtípusú tartalom létrehozása esetén több képet is feltölthetünk az oldalra.

3. Állítsuk be az Article tartalomtípus megjelenítésénél a képek esetében a Colorboxot! Felépítés>Tartalomtipus>Article>Megjelenítés beállítása Structure>ContentType>Article>Manage Display Ügyeljünk arra, hogy három panel is létezik, amely ugyanolyan (Alapértelmezés, Teljes tartalom és Bevezető (Teaser)), mindhárom esetében egyaránt beállíthatjuk a képre a Colorbox-ot. Ügyeljünk arra, hogy a Teljes tartalom esetében tegyük ezt, amennyiben azt szeretnénk, hogy a galéria összes bélyegképe látható legyen! A teaser (bevezető) az a nézet, amikor, a hírből, cikkből vagy fotóalbumból csak az eleje jelenik meg az oldalon, s klikkeléssel érhető el a teljes tartalom. (Hol lehet beállítani, hogy a Bevezető és a Teljes tartalom megjelenjenek a fenti panelen? A lap alján van egy ALAPÉRTELMEZÉS SZERINTI MEGJELENÍTÉSI BEÁLLÍTÁSOK szöveg, ezt ha lenyitjuk, akkor kiválaszthatjuk, hogy a Bevezetőt és a Teljes tartalom megjelenítését lehessen beállítani!) Hol lehet beállítani, h. teljes tartalom v teaser jelenjen meg a weboldalon, nem tudom! Miután az Image mezőnél kiválasztottuk a Colorboxot, annak beállításai elérhetővé válnak a sor végén egy fogaskerék ikon segítségével, erre klikkeljünk rá, s további beállítási lehetőségekhez jutunk, az alábbi képernyőkép jelenik meg. A Content image style pont alatt válasszuk ki a Thumbnail képeket. Kiválaszthatunk persze saját magunk által készített Content image style -t is.

((Miként készíthetünk saját Content image style-t? (http://www.youtube.com/watch?v=sp13afnrpje) Válasszuk a következő menüpontokat: Beállítások>Média>Képstílusok>Stílus hozzáadása gomb! Configuration>Media>Image style>add style gomb! Ekkor megjelenik a következő oldal, ahol a Képstílus neve mezőbe írjunk be egy általunk kitalált képstílus nevet, majd az effektusok résznél gördítsük le a listát és válasszunk ki vmilyen effektet (véleményem szerint érdemes az Aránytartó méretezés -t választani, majd a Hozzáadás gombra klikkelni, ezek után megadhatóak az egyedi méretek. Az álló és fekvő képek különbözőségének kiküszöbölése érdekében jó ha a szélességi és a magassági értékek megegyeznek.))

III. Miként érjük el azt, hogy a galéria bélyegképei ne egymás alatt, hanem egymás mellett legyenek? Ezt a CSS állományokba való belenyúlással lehet megoldani! El kell érjük a CSS-sel, hogy a képek blokkon belüli egyes képek egymás mellett helyezkedjenek el, azaz lebegtessük őket egymás mellé: float:left. A kész, jó beépítendő CSS kód az alábbiakban olvasható..field-name-field-image { height: 100%; owerflow: hidden; }.field-name-field-image.field-item { float: left; margin: 0 3px 3px 0; }