Skrypty PHP/JS/CSS

Dodano: 2012.10.19

System newsów ilustrowanych

system newsów ilustrowanych w PHP

Przedstawiany tu system newsów można wykorzystać w sytuacji gdy na stronie WWW prezentowane będą niezbyt obszerne teksty uzupełnione kilkoma ilustracjami. Przyjąłem następujący schemat wyświetlania newsów:

  • kolejność wyświetlania - od najnowszych do najstarszych
  • każdy news jest opatrzony datą dodania, wyróżniającym się tytułem 
  • ilustracje wyświetlane są w kolejności ich dodawania, pierwsza wyświetlana jest z prawej strony treści posta i ma większy rozmiar od pozostałych, umieszczonych poniżej tekstu.
  • wielkość ilustracji (poza pierwszą) zależy od ich liczby - do 4 większe, powyżej 4 mniejsze.

System powstał z myślą o tych, którzy preferują gotowe rozwiązania. System został wyposażony w panel administracyjny pozwalający na zarządzanie treścią z poziomu WWW. Posiada opcje tworzenia newsów i ich usuwania.


 W systemie wykorzystałem prezentowany w poprzednich postach edytor oraz slimbox2.

Pakiet systemu składa się z kilku (może kilkunastu) plików - skrypty PHP, JS i CSS oraz niezbędne pliki graficzne. Można go używać bez ograniczeń, modyfikować wg potrzeb. System działa po zainstalowaniu na serwerze. Może być wykorzystany samodzielnie lub jako moduł strony. Dostęp do panelu administracyjnego można ograniczyć dodając procedury autoryzacji (logowania).

Zamieszczone ilustracje dotyczą wersji demo i obrazują sposób wyświetlania postów oraz interfejs panelu administracyjnego

Paczkę można ściągnąć w dziale Do pobrania, a działanie przetestować w zakładce Demo/Testy.

Wszelkie pytania można kierować korzystając z formularza kontaktowego.

 

Liczba komentarzy: 0    Czytaj | Dodaj komentarz

Dodano: 2012.07.12

Edytor na stronę www

Zachodzi czasem potrzeba umieszczenia na stronie www edytora tekstu, aby ułatwić życieużytkownikom nie posiadającym dostatecznych umiejętności w zakresie HTML.Prezentowany tu edytor autorstwa Cezarego Tomczaka i zmodyfikowany przeze mnie pozwalana formatowanie tekstu w podstawowym zakresie, wstawianie odsyłaczy i elementów graficznych.Edytor (skrypt JS, zestaw arkuszy stylów CSS i przykładowe pliki w HTML i PHP) można pobrać w dzialeDo pobrania.

W celu wykorzystania edytora na własnych stronach należy zawartość pakietu umieścić na serwerze.W sekcji head strony, na której będzie wykorzystywany edytor, należy dodać kod wskazujący na skryptedytora i arkusz stylów:

W sekcji body należy umieścić pole tekstowe (textarea) nadać mu id - np: id="body" oraz nazwę - np.: name="body" w którym będzie edytowany tekst, a następnie fragment:

który inicjuje edytor o podanej nazwie (body) z wykorzystaniem podanego arkusza stylów (ste2.css) i zestawem znaków (iso-8859-2).

Aby możliwe było zapisywanie edytowanego tekstu w pliku kod edytora należy umieścić w formularzu (wewnątrz znaczników form).Zawartość edytowanego pola tekstowego przesyłamy np. metodą POST. Modyfikacji wymaga obsługa przycisku SUBMIT

W kolejnym poście pokażę przykłady wykorzystania edytora.

Liczba komentarzy: 0    Czytaj | Dodaj komentarz

Dodano: 2012.07.03

Slimbox 2 - atrakcyjne wyświetlanie zdjęć

Slimbox 2 jest programem zewnętrznym opartym o popularny Lightbox, który sprawia, że zdjęcia, grafiki, galerie wyświetlane są w estetyczny i dynamiczny sposób. Slimbox 2 wykorzystuje bibliotekę jQuery. W paczce dostępnej w dziale Do pobrania znajdują się katalogi: JS i CSS. W pierwszym znajdują się skrypty java, a w drugim arkusz stylów i niezbędne grafiki.

W celu uruchomienia Slimboxa należy zawartość katalogów JS i CSS umieścić na serwerze i przystąpić do edycji strony, na której będą wyświetlane grafiki (zdjęcia). Poniżej przedstawię fragmenty kodu niezbędne do prawidłowego działania Slimboxa.

W sekcji head należy zamieścić:
 

 

Pierwsza linia kodu określa ścieżkę do biblioteki jQuery na naszym serwerze, druga połozenie pliku slimbox2.js, a trzecia do arkusza stylów.

Slimbox 2 do wyświetlania grafik wykorzystuje odnośniki prowadzące bezpośrednio do grafiki. Aby skrypt zadziałał należy w odnośniku zawrzeć atrybut rel="lightbox".

Przykład kodu: pojedyncze zdjęcie - tekst w odsyłaczu:

 

Przykład kodu: pojedyncze zdjęcie - miniatura w odsyłaczu:

 

Aby wyświetlić serię zdjęć należy zmodyfikować atrybut rel="lightbox" dodając po myślniku nazwę grupy zdjęć przeznaczonych do wyświetlania rel="lightbox-nazwa"

 

Przykład kodu: grupa zdjęć - tekst w odsyłaczach:

 

Przykład kodu: grupa zdjęć - miniatury w odsylaczach:

 

Slimbox 2 można przetestować w dziale Demo/testy.

Liczba komentarzy: 0    Czytaj | Dodaj komentarz

Strona główna Starsze posty >>

Lista postów w tej kategorii
  • System newsów ilustrowanych
  • Edytor na stronę www
  • Slimbox 2 - atrakcyjne wyświetlanie zdjęć
  • Galeria internetowa
  • Funkcje i równania

    październik 2017
    NiPnWtŚrCzPtSo
    1234567
    891011121314
    15161718192021
    22232425262728
    293031