Elektroda.pl
Elektroda.pl
X

Search our partners

Find the latest content on electronic components. Datasheets.com
Elektroda.pl
Please add exception to AdBlock for elektroda.pl.
If you watch the ads, you support portal and users.

[PHP][JavaScript][MySQL] Skrypt na tworzenie galerii

zbychoxD 26 Sep 2012 22:05 4326 18
SterControl
  • #1
    zbychoxD
    Level 11  
    Witam, przedstawię zarys co chce zrobić:

    Robię stronkę gdzie będą dodawani klienci lista typu:
    Dulux
    Pronto itp.

    i chce żeby do każdego mógłbym robić galerie typu: http://fancybox.net/ na samym dole image gallery. Zrobiłem już dodawanie klientów(wysyła do tabeli o nazwie klienci id_klienta,nazwa), upload plików tez zrobiłem, przy tym wybiera się dla jakiego klienta ma być ładowany obrazek(do tabeli o nazwie up_gal leci id_zdjecia, id_klienta, link_zdjecia) . i skrypt na wyświetlenie czegoś takiego wygląda (czysty, jak w oryginale):

    Code: javascript
    Log in, to see the code



    ja przerobiłem go na takie coś:

    Code: javascript
    Log in, to see the code



    czyli tworzy odnośniki href tylko do zdjęć danego klienta. Działa to bo sprawdziłem, ale teraz mam WIELKI problem, jak to ruszyć, jak zrobić żeby tworzył mi to z panelu admina i podpinał pod odpowiedniego klienta to

    Code: html4strict
    Log in, to see the code


    Macie jakiś pomysł?

    Proszę poprawić błędy pisowni w swoich wypowiedziach! Niewykonanie polecenia nagrodzę ostrzeżeniem. 3.1.13. (Zabronione jest publikowanie wpisów naruszających zasady pisowni języka polskiego, niedbałych i niezrozumiałych. [DriverMSG]
  • SterControl
  • #2
    tom3kk
    Level 19  
    Albo twój problem jest prosty, albo nie wiem o co Ci chodzi.

    Przy generowaniu stuktury HTML, generujesz linki z odp. id klienta, który pobierasz z bazy - w czym problem?
  • #3
    zbychoxD
    Level 11  
    Przepraszam za błędy już poprawiłem.
    To napisze teraz dokładnie o co mi chodzi.
    Na stronie będą wyświetlać się nazwy klientów w taki sposób:
    [PHP][JavaScript][MySQL] Skrypt na tworzenie galerii

    Klienta dodaje poprzez formularz:
    Code: php
    Log in, to see the code



    Teraz pokaże wam mój skrypt na dodawanie zdjęć dla wybranego klienta:
    Code: php
    Log in, to see the code


    Wybieram plik do uploadu, klienta dla którego ma być zdjęcie. Do bazy leci id_zdjecia , id_klienta , link_zdjecia.

    Dla każdego klienta chcę mieć możliwość stworzenia własnej galerii. Żeby każdy, obojętnie jaki klient miał swoją galerie.

    Na stronie było by wyświetlane w taki sposób:
    [PHP][JavaScript][MySQL] Skrypt na tworzenie galerii

    Klikam w ikonkę aparatu i wyświetlają mi się zdjęcia które sam dodałem.

    Znalazłem w internecie, dokładnie tutaj: http://fancybox.net/ fajną galerie opartą na jQuery. Chodzi mi o ostatnią opcje, jak zjedziecie na sam dół macie "Image gallery"
    [PHP][JavaScript][MySQL] Skrypt na tworzenie galerii

    Po kliknięciu na ten link pojawia nam się zdjęcie, oraz strzałki żeby przeskoczyć do następnego zdjęcia.
    [PHP][JavaScript][MySQL] Skrypt na tworzenie galerii [PHP][JavaScript][MySQL] Skrypt na tworzenie galerii

    I to jest to czego potrzebuje.
    Skrypt na wyświetlenie czegoś takiego wygląda tak:
    Code: html5
    Log in, to see the code


    żeby dodać drugą taką galerie kopiuje i wklejam niżej ten fragment:
    Code: javascript
    Log in, to see the code


    oczywiście zmieniam "#fancybox-manual-c" na np: "#klient2"
    i na koniec dodaje do BODY
    Code: html4strict
    Log in, to see the code



    Przerobiłem tą część odpowiadającą za pojedynczą galerie w taki sposób:
    Code: javascript
    Log in, to see the code

    Widzimy że tutaj daje nazwę funkcji taką jakie jest id klienta oraz pobiera mi wszystkie zdjęcia dla klienta o danym ID.

    I teraz potrzebuje waszej pomocy, bądź jakiejś podpowiedzi. Jak stworzyć formularz który będzie tworzył galerie dla wybranego klienta oraz dodawał do wybranego klienta w body:
    Code: html4strict
    Log in, to see the code


    Z tego co ja wywnioskowałem to może by to zadziałało, że:
    w środku tego javascript daje pętle , daje selecta z tabelki w której znajdują sie klienci dla których ma być stworzona galeria w srodku pętli daje ten echo lub print żeby wyświetlił ten kod:

    Code: javascript
    Log in, to see the code


    ale jak to poprawnie napisać, plus jeszcze dodanie odnośnika do galerii w body.

    Jak coś niejasno napisałem to zwróćcie mi uwagę, bądź zapytajcie.

    Pozdrawiam.
  • #4
    tom3kk
    Level 19  
    Powiedzmy że powoli zaczynam pojmować o co Ci chodzi.

    Mamy dwa produkty - cokolwiek:
    produkt A
    produkt B

    Klikając na 'produkt A' chcesz przeglądnąć szereg fotek tego produktu, natomiast klikając 'produkt B' chcesz przeglądnąć zdjęcia owego produktu.

    Zakładamy ze tych produktów może być kilkanaście na jednej stronie.
    Czyli twój pytanie - to, jak zapiąć każdy link/button pod oddzielną cześć kodu JS aby były wyświetlane odpowiednio zdjęcia przypisane do produktu, a nie żeby wyświetlić serię 40 zdjęć ze wszystkich naraz po kliknięciu tylko w jeden link?
  • SterControl
  • #5
    zbychoxD
    Level 11  
    Dokładnie
  • #6
    tom3kk
    Level 19  
    Jako że wybrałeś sobie fancyboksa i że jego struktura kodu w tym przypadku jest jaka jest to sprawa wydaje się być prosta.
    Proponuję Ci abyś w topie strony, w <head> zamieścił sobie sekcję <script> i niej w PHP wygenerował odpowiedni kod JS dla fancyboksa.

    Generujesz stronę w PHP, to zapewne wiesz co na nie będzie gdyż gdzieś w topie możesz pobrać listę klientów, tak aby później wygenerować z tych ID klientów kod JS oraz linki i co tam jeszcze potrzebujesz.

    Czyli schemat byłby taki, pobierasz gdzieś na 'początku' strony PHP klientów, generujesz sobie kod JS, przykładowo:
    Code: jquery
    Log in, to see the code


    Jak już masz kod JS w <script>, to nie pozostaje nic innego jak gdzieś w body strony dodać linki do akcji tych właśnie bindów.

    <a id='klient1'>klient 1</a>
    <a id='klient2'>klient 2</a>

    etc.

    Takie rozwiązanie jest poprawne.
    Co do fancyboksa, poczytaj gdyż ja nie pamiętam czy da się zglobalizować cześć opcji, np:
    Code: jquery
    Log in, to see the code


    Tak żeby nie generować bez sensu tego samego.
    Bez tego generowałbyś same definicje dla pliczków galerii, nie musiałbyś się powtarzac co prowadzi do odciążenia kodu JS, który jest parsowy po stronie przeglądarki.
  • #7
    zbychoxD
    Level 11  
    Dzięki za informacje.

    ta część skryptu co odpowiada za daną galerie wygląda tak:
    Code: javascript
    Log in, to see the code



    Jak do tego wrzucić php, pętle while która będzie generowała ten kawałek
    Code: javascript
    Log in, to see the code


    a potem generowała ten nagłówek
    Code: javascript
    Log in, to see the code


    mogę pomiędzy <script> dawać php?
  • Helpful post
    #8
    tom3kk
    Level 19  
    Możesz cokolwiek gdyż PHP generuje Ci strukture HTML oraz kod JS, tak więc to nie ma znaczenia. PHP nie będzie w polu <script>, tylko wynik jego działania/kompilacji, przykładowo:

    Code: php
    Log in, to see the code


    Te taby (\t) oraz nowe linie (\n) dałem w celach stylistycznych, żeby były wcięcia oraz nowe linie w źródle dokumentu przy podglądaniu.

    Powyższy kod generuje Ci HTMLa z kodem JS:
    Code: html4strict
    Log in, to see the code


    [PHP][JavaScript][MySQL] Skrypt na tworzenie galerii

    Mam nadzieję że zrozumiałeś, jak działa PHP.
    Oczywiście trzeba go poprawić, to jako przykład działania.
  • #9
    zbychoxD
    Level 11  
    Yay, dzięki Tobie przejrzałem jak to ogarnąć, dzięki wielkie ,ale mam jeszcze jedną wątpliwość.
    Zrobiłem już pobieranie klientów z bazy i ładnie tworzy skrypt, ale teraz powiedz mi jak zrobić żeby przydzielał odpowiednie linki do danego klienta?
    mam np:
    Klient1 (jego id to np 1)
    auto1.jpg (inf w bazie wyglada tak id_zdjecia, id_klienta, sciezka, czyli by bylo np tak 1,1,'img/auto1.jpg')
    auto2.jpg (2,1,'img/auto2.jpg')

    Klient2 (jego id to np 2)
    auto3.jpg (3,2,'img/auto3.jpg')
    auto4.jpg (4,2,'img/auto4.jpg')

    Masz jakiś pomysł co z tym zrobić?


    Edit.

    Chyba mam pomysł, jak by przerobić to co zrobiłeś tak że w momencie kiedy wypisuje 'href' czyli ścieżkę do tych zdjęć przerobić ta pętle , przed nią dać pobieranie linków z bazy gdzie id_klienta = id klienta dla którego jest robiony skrypt.
  • Helpful post
    #10
    tom3kk
    Level 19  
    W tej sekcji od 'href' w kodzie JS możesz pobrać PHPem dane drugą pętlą i wygenerować linki, bądź zmienić sobie jakoś strukture w bazie.

    Istnieje pare sposobów na to.
  • #11
    zbychoxD
    Level 11  
    Udało mi się! podpina zdjęcia odpowiednio jak im się należą :)
    Teraz pozostało mi rozwiązać sprawę z dodaniem odnośnika

    Code: html4strict
    Log in, to see the code


    Musi to być dodawane z panelu administratora.

    Edit1

    Zrobiłem połączyłem to ze swoją strona, ale kłóci się z innymi skryptami, od scrollowania strony i slidera, jak usune je to galeria działa;/
  • #12
    tom3kk
    Level 19  
    Musisz coś mieć źle w kodzie JS, to musi dzialać.
    Możesz mieć w kodzie 20 plików JS dołączonych i bedzie dzialać, do tego skrypt nagłówkowy.
  • #13
    zbychoxD
    Level 11  
    cały kod wygląda tak:
    Code: html4strict
    Log in, to see the code



    gdy usunę to:
    Code: html4strict
    Log in, to see the code


    to wtedy galeria działa.



    Edit.
    wgrałem na serwer tą strone:
    tutaj bez slidera dziala:
    Bez slidera

    a ze sliderem nie:
    z sliderem
  • #14
    xxdragus
    Level 9  
    Jeszcze czegoś takiego nie widziałem:
    Code:

          echo "\t\t" . "}" . "\n";
                                    echo "\t" . "], {" . "\n";
                                            echo "\t\t" . "helpers : {" . "\n";
                                                    echo "\t\t\t" . "thumbs : {" . "\n";
                                                            echo "\t\t\t\t" . "width: 75," . "\n";
                                                            echo "\t\t\t\t" . "height: 50" . "\n";
                                                    echo "\t\t\t" . "}" . "\n";
                                            echo "\t\t" . "}" . "\n";
                                    echo "\t". "});" . "\n";
                            echo "});" . "\n";
     


    A potem ludzie się dziwią, że nic nie chce chodzić, nie w tym jest problem, ale staraj się pisać jakoś bardziej optymalnie, i bez żadnych "Tricków" - bo tym akurat utrudniasz sobie życie, na twoim miejscu zacząłbym od początku z tym jquery, bo to jest zrobione kopiuj wklej jak myślę.

    PS: nie powinno mieszać się HTML z PHP w jednym pliku.
  • #15
    zbychoxD
    Level 11  
    to mi kolega wyżej zaproponował. i to chodzi, tylko nie rozumiem czemu z sliderem nie i częścią skryptów
  • #16
    tom3kk
    Level 19  
    Kod powyżej jest przykładowy, taby i nki są tylko i wyłącznie w celach prezentacyjnych (przejrzyste źródło)

    @zbycho - ten mój kód to sobie wyczyść, tak jak pisałem wcześniej to przykład - nie dawaj tych tabów etc, to głupota - a dwa, on nie jest idealny.

    Co do twojego JS.
    Wydaje mi się że masz tam lekki burdel, wszystkie statyczne skrypty JS powinieneś ładnie upchać do jednego plikczu, tak żeby nie tworzyć po 10 razy bloku <script>
  • #17
    zbychoxD
    Level 11  
    Posprawdzałem co tej galerii nie pasuje i wyszło na to że obojętnie co z tego włożę:
    Code: html5
    Log in, to see the code


    To już przestaje działać. nie mam pomysłu o co chodzi.
  • #18
    tom3kk
    Level 19  
    A czemu nie tak - w ogóle to dwa razy ładujesz jquery, tak jak pisałem lekki burdel masz:
    Code: html4strict
    Log in, to see the code


    Google narazie olej, staraj sobie ułatwiać debugowanie i zaczynaj od mniejszych ilości kodu, jak zadziała - to wtedy dodajesz następną funkcjonalność.

    Nie weryfikuje twojego kodu pod względem błędów, musisz sobie sam o to zadbać.

    Widze że masz tam też 'main.js' czyli zaś jakiś kod etc., potestuj bez tego - potem dalej bo tak nie dojdziesz w czym jest błąd.
    No i jak wyżej napisane, nie kopiuj z neta 'na pałe' przykładów, czy też jakiś tutoriali, w ten sposób nakładasz na siebie to samo i nie działa.
  • #19
    zbychoxD
    Level 11  
    Panowie, Dziękuje wszystkim za odp. ogarnąłem to na lightboxie którego już miałem.
    Działa tak jak chciałem. Podgląd.
    Tak że dzięki wielkie. Zamykam