Dadałem parę dni temu do działu plików komponenty, oraz moduły galerii zdjęć autorstwa Tobiasa Floery. Pierwszy z nich to PAXXGallery 0.2.3f pl, a drugi, to wcześniejsza wersja komponentu PAXGallery 0.0.1k pl. Opiszę oba komponenty, jako że mam juz z nimi doświadczenia, które mogą przydać się przy ich prawidłowej konfiguracji. PAXXGallery 0.2.3f pl. to Galeria Zdjęć, oparta na skryptach PHP oraz JS, korzystających z technologii AJAX. Komponent jest przystosowany do poprawnej pracy na serwerach z Safe- Mode: ON!. Posiada zintegrowany z komponentem upload plików na serwer. Obie wersje galerii są spolszczone prawie w 100%, oprócz opisów i nazw plików wyświetlanych na stronie frontowej. Odbywa się to za pomocą "parsowania" przez skrypt javy treści do pliku "style.xml" w przypadku PAXXGallery, oraz do pliku "style.tmpl" w przypadku PAXGallery, który konstrukcyjnie odpowiada plikowi XML. Stąd też nie miałem możliwości ominięcia tej przeszkody. Dodałem także w obu przypadkach, oprócz domyślnej szaty graficznej, kilka własnej produkcji. W oparciu o nie, każdy może stworzyć sobie własną, niepowtarzalną "skórkę". Jeżeli chodzi o upload, to może być z tym problem, szczególnie na serwerach, które nie mają określonej ścieżki "tmp". Dlatego lepiej wczytywać obrazki normalnie, lub w postaci zipa. Według moich testów, na moim serwerze, maksymalną wielkością ładowanego pliku "zip", jest 1MB. Przy większych rozmiarach, komponenty mogą zwrócić błąd. Ale nie muszą. Wszystko zależy od serwera. Zaletą komponentów jest to, że w prosty sposób możemy sobie stworzyć mnóstwo różnych tematycznie galerii, w oparciu o jeden komponent. Dodatkowo pokaz slajdów, po uprzednim włączeniu, u mnie pracuje przwidłowo, co w przypadku galerii Pony było niemożliwe. Jeżeli chodzi o pliki styli, to możemy w nich formatowć treść, jak w zwykłym pliku "html", czyli wstawiać tabele, znaczniki div, th, span itd., oraz wstawiać odnośniki. W ten sposób możemy dostosować wygląd galerii do własnego gustu, lub szaty strony. PAXXGallery korzysta z pliku "style.css", natomiast PAXGallery z "style_css.php". Oczywiście treść tych plików jest w obu przypadkach oparta o wzorce kaskadowych dokumentów styli, czyli CSS. I w tej części jeszcze bardzo ważna rzecz. Nie powinno się zmieniać domyślnych ustawień, np ścieżki do folderu tymczasowego w PAXXGallery. Jest w obu galeriach opcja zmiany chmodów plików po wczytaniu. Zalecam nie korzystać z tego, chyba że tak wymaga serwer. Podczas usuwania galerii, należy najpierw usunąć zdjęcia znajdujące się w galerii, a dopiero później galerię. Jeżeli usuniemy wczesniej galerię, zdjęcia zostaną w bazie danych, wraz z przyporządkowanym do nich ID pliku, oraz ścieżkami GID, czyli ścieżkami do galerii. Spowoduje to bałagan, czego efektem może byc konieczność ręcznego usuwania wpisów z bazy danych. Dodatkowo moduły do wyświetlania slajdów na stronie frontowej PAXGallery Slider 0.0.2, oraz PAXGallery Slider 0.0.1 będą wyświetlać puste obrazki. W dalszej części artykułu, opiszę jak można zmieniać wygląd galerii.
Na poniższym obrazku są pewne oznaczenia, które postaram się objaśnić. Wykorzystane jest zdjęcie z PAXGallery , ale style dla obu komponentów są identyczne. Na przykład klasa PAXXimgContainer, odpowiada klasie PAXimgContainer:
- Selektor #PAXXimgContainer odnosi się tylko do samego obrazka, i w tej klasie nic nie zmieniamy, bo efekt zmiany będzie żaden. Domyślne wpisy są wystarczjące.
- Poniżej Kod:
#PAXXimgContainer {
position: relative;
top: 0px;
left: 0px;
padding: 0px;
margin: 2px;
width: 98%;
overflow:hidden;
clear: both;
} - Selektor #PAXXshowContainer odnosi się do całego boksu galerii, w jakim jest osadzony obrazek, i tutaj możemy ustalić kolor obramowania całej galerii: "border: 1px solid gray;" oznacza ramkę grubości 1px w kolorze szarym. Możemy zmienić kolor ramki, lub pozbyć się jej całkowicie, poprzez usunięcie linii:"border: 1px solid gray;", lub zamianę na "border: 0px solid gray;".
- Parametr "width: 98%;" definiuje szerokość galerii względem dostępnego pola naszej templatki. Oryginalnie był ustawiony na "100%", ale wówczas obrazek wychodził poza pole komponentu. Rada: nie zmieniać domyślnego wpisu, czyli "width: 98%;".
- Parametr " background-color: white;" służy do ustalenia koloru otaczającego zdjęcie, oznaczone na obrazku żółtą linią. Oczywiście ze możemy go zmieniać, wykorzystując wszystkie dostępne kolory, np." background-color: blue;" otoczy nasze zdjęcia kolorem niebieskim. Przejrzyjcie sobie temolatki, dodane do komponentu mojej twórczości. Tam są przykłady wykorzystania kolorów.
- Poniżej Kod:
#PAXXshowContainer {
width: 98%;
background-color: white;
border: 0px solid gray;
margin-top: 10px;
} - Selektor #PAXXimgTitle oraz #PAXXimgDesc odnosi się do rodzaju czcionki, wielkości, koloru oraz ewentualnego obramowania tekstów nazwy zdjęcia i tekstów opisów. Także wyrównanie do lewej i szerokość pola tekstowego wraz z dopełnieniem komórek tabel.
- Poniżej Kod:
#PAXXimgTitle {
width: 96%;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
z-index:1000;
text-align: left;
padding-left: 5px;
padding-top:3px;
padding-bottom:3px;
vertical-align: middle;
border-bottom: 0px solid gray;
} - Selektor #PAXXmenu nie ma żadnego wpływu na galerię.
- Selektory #PAXselectorContainerH oraz #PAXselectorContainerV odnoszą się tylko do "PAXGallery", i dotyczą scrolla z miniaturkami nad głównymi zdjęciami. Ustalamy tutaj szerokość przewijanego paska z miniaturami, wysokość, oraz kolor tła, który nalezy uwzględnić przy zmianie koloru galerii. Parametr"overflow: auto;" oznacza, że przy większej ilości zdjęć, a tym samym miniatur, włączy się automatycznie pasek przewijania. Podobnie jest przy #PAXselectorContainerV, z tym że nie jest on nigdzie wykorzystywany.
- Poniżej Kod:
PAXselectorContainerH {- height: 120px;
width: 100%;
background-color: white;
overflow: auto;
}Poniżej opiszę co oznaczają poszczególne numeracje w kółkach na obrazku: 1 - To jest ramka obrazka, której grubość i kolor można zmienić tylko w pliku "paxxgallery.js", lub analogiczniw w pliku "paxgallery.js" . Jest tam taka linia: imgField.innerHTML = '<div style="width: '+width+'px; height: '+height+'px; margin-top: '+margintop+'px; border: 1px solid gray;"><img src="'+imgPath+arr[1]+'" width="'+width+'" height="'+height+'" border="0" style="margin: 0px; padding: 0px;"></div>'; i właśnie w tej linii, oznaczonej na czerwono, możemy zmienić grubość ramki wokół obrazka, oraz kolor. Tylko tu. W tym przypadku jest to 1px w kolorze szarym. Ustawienie 0px, zlikwiduje ramkę wokół obrazka. 2 - To jest ramka, określona w selektorze #PAXXshowContainer wokół całej galerii. 3 - To jest obszar określony w selektorze #PAXXimgContainer, czyli szerokość galerii, itp. Kolor możemy ewentualnie wstawić, ale jest on pobierany z naszego pliku CSS templatki. Możecie poeksperymentować. Zachęcam. 4 - Odnosi sie tylko do PAXGallery, i parametry tego obszaru ustalane są w #PAXselectorContainerH. 5 - Sam obrazek, określony w selektorze #PAXXimgContainer, a tak naprawdę to w panelu administratora, czyli maks.szerokość obrazków, i maks. wysokość obrazków. Te ustawienia są obowiązujące. 6 - Odnosi sie tylko do PAXGallery. To wpisy w selektorze #PAXselectorContainerH czyli szerokość miniatury i wysokość scrolla. 7 - To selektor #PAXXshowContainer, o którym możecie poczytac wyżej. Na koniec porada: żeby zmienić kolorystykę skórki, wystarczy wyedytować plik " style.css", lub plik" style_css.php", i wpsać w edytorze w pole "zamień" wybrany przez nas kolor. Zazwyczaj templatki galerii mają wpisany jeden kolor, np." white", i wystarczy że zamienimy go we wszystkich selektorach. I jeszcze jedno. Jeżeli uzywacie Firefoxa, a powinniście, zainstalujcie sobie dodatek " Color Zilla", ze strony: mozillapl.org oraz ewentualnie BBcode. Oba te dodatki, a szczególnie " Color Zilla", są bardzo pomocne przy budowie strony. Pobierasz sobie próbkę koloru z dowolnego miejsca w przeglądarce, i możesz modyfikować templatkę. Polecam. Ja korzystam z tego dodatku na codzień. Miłej zabawy życzę. Autor artykułu i polskiej adaptacji komponentów. Jeżeli o czymś zapomniałem, to proszę pisać na stronę. Zapomniałem!, że do pobrania są jeszcze moduły do pokazów slajdów na stronie głównej witryny, mianowicie:
|
Pony Gallery ML 2...
htaccess Standard SEF
PAXXGallery Slider 0.0.2pl
