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 (http://www.youtube.com/watch?v=sP13afNRpjE) Válasszuk a következő menüpontokat:
Content
image
style-t?
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; }
