Zobacz temat
Strona 1 z 2: 12
|
Nivo Slider Panel - jQuery Image Slider w panelu
|
|
aszynka |
Dodany dnia 06.04.2011 17:19:59
|
Przedszkolak Postów: 5 Data rejestracji: 06.04.2011 17:11 |
Witam serdecznie forumowiczów, zrobiłem sobie ostatnio prostą stronkę w PHP Fusion v7 i chciałbym dodać Nivo Slider (nivo.dev7studios.com) do panela powitalnego, ale jestem strasznie blady w takich rzeczach i nie wiem jak sie za to zabrac. Bardzo prosze o pomoc. PW od moderatora:
Edytowane przez Pieka dnia 06.04.2011 19:04:51 |
|
|
Wścibski Gość |
Dodany dnia 22.11.2024 01:50:40
|
Pan Kontekstualny Postów: n^x Data rejestracji: Zawsze |
|
IP: localhost | |
Chemikpil |
Dodany dnia 06.04.2011 19:42:22
|
Bywalec Postów: 999 Pomógł: 54 Data rejestracji: 04.05.2008 21:46 |
Ogólnie to masz wszystko ładnie opisane u nich na stronie, ale skoro niema tam sposobu dla PHP-Fusion to zaraz to ogarniemy. Zakładam że znasz podstawy CSS bo zaimplementowaniu panelu, samemu trzeba resztę ustawić. Nie napisałeś jaką masz skórkę więc ja robiłem to na Gillette, ale nie powinno być problemu z implementacją w innej. Dobra jazda :) 1. Po ściągnięciu paczki i jej rozpakowaniu, kopiujemy pliki jquery.nivo.slider.pack.js nivo-slider.css do katalogu includes. 2. Teraz musimy dodać te pliki tak by slider mógł zadziałać. Wykorzystam tu OH (dzięki Pieka :)). Tworzymy nowy panel, wklejamy do niego ten kod: ... zapisujemy i włączamy. 3. Zdjęcia, które maja się przewijać, wrzucamy do katalogu images/nivo (katalog nivo musisz utworzyć). 4. W PA w miejscu gdzie umieszczamy treść panelu powitalnego ustawienia->główne umieszczamy ten kod zamiast starego (UWAGA!!! jest to kod proponowany przez twórce, więc tu musisz go rozkminić sam i dodać taki jaki chcesz, ten dodajemy dla sprawdzenia czy panel zadziała): Ja nie nadawałem twardych ścieżek do obrazków, ale ty możesz. 5. Teraz musimy dodać kod CSS do pliku styles.css naszej skórki, u mnie to themes/Gillette/styles.css: 6. Na sam koniec musimy uruchomić nasz slider. Przykładowa metoda na stronie twórcy mówi że ten kod: umieszczamy w sekcji head naszej strony czyli pliku header.php, jednak ja jestem zwolennikiem czystości kody i lepiej jest umieścić to w osobnym pliku. Zakładam że nie masz żadnego własnego pliku JavaScript więc w katalogu skórki utwórz nowy plik np. nivo-slider.js, umieść w nim ten kod: i zapisz. By dodać plik do sekcji head naszej strony ponownie skorzystamy z OH. Musimy więc poddać edycji nasz wcześniej utworzony panel i w miejsce starego kodu wkleić ten: . Ponownie zapisujemy panel. Ogólnie to wszystko, pozostaje kwestia kodu CSS dla przycisków prev i next, oraz dla paginacji obrazków (1,2,3,... etc). Pozostawiam to dla Ciebie choćby jako ćwiczenie, w końcu jak chcesz się nauczyć inaczej niż przez praktykę. U mnie zadziałało, lecz nie posiadam własnej strony testowej w sieci więc nie mogę Tobie udowodnić :) Pozdro. Edytowane przez Chemikpil dnia 13.04.2011 22:19:42 Nie pisać na GG i PW w sprawach technicznych!
ChemikPil - blog (w nowej odsłonie) | ChemikPIL - My twitter |
|
|
Pieka |
Dodany dnia 06.04.2011 19:47:06
|
Postów: 19882 Pomógł: 767 v7.02.03 Data rejestracji: 23.02.2005 18:12 |
Michal, a nie lepiej podac to, co ma byc w header w formie panela? Nie bedzie musial grzebac w plikach.
Jestem jaki jestem
|
|
|
Chemikpil |
Dodany dnia 06.04.2011 20:00:21
|
Bywalec Postów: 999 Pomógł: 54 Data rejestracji: 04.05.2008 21:46 |
Pieka napisał/a: Michal, a nie lepiej podac to, co ma byc w header w formie panela? Nie bedzie musial grzebac w plikach. Mówisz o OH? Można wtedy wyglądało by to tak: 1. Tworzymy nowy panel i umieszczamy w nim ten kod: Zapisujemy i włączamy :). Edytowane przez Pieka dnia 13.04.2011 20:48:33 Nie pisać na GG i PW w sprawach technicznych!
ChemikPil - blog (w nowej odsłonie) | ChemikPIL - My twitter |
|
|
Pieka |
Dodany dnia 06.04.2011 20:03:07
|
Postów: 19882 Pomógł: 767 v7.02.03 Data rejestracji: 23.02.2005 18:12 |
Warto wkomponowac to w tresc pierwszego Twojego posta, bo bedzie balagan
Jestem jaki jestem
|
|
|
Chemikpil |
Dodany dnia 06.04.2011 20:10:23
|
Bywalec Postów: 999 Pomógł: 54 Data rejestracji: 04.05.2008 21:46 |
Mini-tutorial poprawiony W sumie lepiej wygląda z OH, o którym zawsze zapominam ;/
Nie pisać na GG i PW w sprawach technicznych!
ChemikPil - blog (w nowej odsłonie) | ChemikPIL - My twitter |
|
|
aszynka |
Dodany dnia 07.04.2011 16:08:28
|
Przedszkolak Postów: 5 Data rejestracji: 06.04.2011 17:11 |
Dziala jak marzenie! Dzieki wielkie Po zgrzewce piwa Wam wiszę |
|
|
Klubowo |
Dodany dnia 09.04.2011 13:09:28
|
Przedszkolak Postów: 29 Ostrzeżeń: 3 v7.02.03 Data rejestracji: 23.12.2010 11:43 |
Hmm..zrobiłem tak jak opisywał Chemikpil,i nie wyświetla się... Moja strona www.[cenzura] Proszę o pomoc bo próbowałem już chyba wszystkiego... Edytowane przez Pieka dnia 08.07.2011 23:24:07 |
|
|
Gismo_PL |
Dodany dnia 09.04.2011 13:30:59
|
Bywalec Postów: 462 Pomógł: 40 Ostrzeżeń: 2 v7.01.05 Data rejestracji: 25.02.2007 21:13 |
Zacznij najpierw od porządku w swoim kodzie. Nawaliłeś kilkukrotnie odwołania do tych samych plików skryptowych i styli, że aż mi się odechciewa dalszego przeglądania. Rób z głową pewne modyfikacje a nie bezmyślnie kopiujesz i wklejasz gdzie popadnie z myślą, że może zadziała.
|
|
|
Klubowo |
Dodany dnia 13.04.2011 20:44:07
|
Przedszkolak Postów: 29 Ostrzeżeń: 3 v7.02.03 Data rejestracji: 23.12.2010 11:43 |
Zacznij najpierw od porządku w swoim kodzie. Nawaliłeś kilkukrotnie odwołania do tych samych plików skryptowych i styli, że aż mi się odechciewa dalszego przeglądania. Rób z głową pewne modyfikacje a nie bezmyślnie kopiujesz i wklejasz gdzie popadnie z myślą, że może zadziała. Pewnie akurat wtedy byłeś na mojej stronie jak próbowałem kombinować po omacku. Sprawa wyglądała prosto,w ostatnim kodzie który podał Chemikpil zmieniłem "gillette" na "Gillette" i działa. Panel śmiga na 7.02.00. |
|
|
Pieka |
Dodany dnia 13.04.2011 20:51:04
|
Postów: 19882 Pomógł: 767 v7.02.03 Data rejestracji: 23.02.2005 18:12 |
I stad wniosek, ze warto stosowac okreslone stale, w tym przypadku THEME zamiast THEMES.
Jestem jaki jestem
|
|
|
Chemikpil |
Dodany dnia 13.04.2011 22:22:01
|
Bywalec Postów: 999 Pomógł: 54 Data rejestracji: 04.05.2008 21:46 |
Pieka napisał/a: I stad wniosek, ze warto stosowac okreslone stale, w tym przypadku THEME zamiast THEMES. Dokładnie. Kod w moim poście został już poprawiony Nie pisać na GG i PW w sprawach technicznych!
ChemikPil - blog (w nowej odsłonie) | ChemikPIL - My twitter |
|
|
Pieka |
Dodany dnia 13.04.2011 22:28:26
|
Postów: 19882 Pomógł: 767 v7.02.03 Data rejestracji: 23.02.2005 18:12 |
Tylko wywal tego slasha
Jestem jaki jestem
|
|
|
Chemikpil |
Dodany dnia 13.04.2011 23:09:12
|
Bywalec Postów: 999 Pomógł: 54 Data rejestracji: 04.05.2008 21:46 |
Chemikpil napisał/a:
Ogólnie to masz wszystko ładnie opisane u nich na stronie, ale skoro niema tam sposobu dla PHP-Fusion to zaraz to ogarniemy. Zakładam że znasz podstawy CSS bo zaimplementowaniu panelu, samemu trzeba resztę ustawić. Nie napisałeś jaką masz skórkę więc ja robiłem to na Gillette, ale nie powinno być problemu z implementacją w innej. Dobra jazda :) 1. Po ściągnięciu paczki i jej rozpakowaniu, kopiujemy pliki jquery.nivo.slider.pack.js nivo-slider.css do katalogu includes. 2. Teraz musimy dodać te pliki tak by slider mógł zadziałać. Wykorzystam tu OH (dzięki Pieka :)). Tworzymy nowy panel, wklejamy do niego ten kod: ... zapisujemy i włączamy. 3. Zdjęcia, które maja się przewijać, wrzucamy do katalogu images/nivo (katalog nivo musisz utworzyć). 4. W PA w miejscu gdzie umieszczamy treść panelu powitalnego ustawienia->główne umieszczamy ten kod zamiast starego (UWAGA!!! jest to kod proponowany przez twórce, więc tu musisz go rozkminić sam i dodać taki jaki chcesz, ten dodajemy dla sprawdzenia czy panel zadziała): Ja nie nadawałem twardych ścieżek do obrazków, ale ty możesz. 5. Teraz musimy dodać kod CSS do pliku styles.css naszej skórki, u mnie to themes/Gillette/styles.css: 6. Na sam koniec musimy uruchomić nasz slider. Przykładowa metoda na stronie twórcy mówi że ten kod: umieszczamy w sekcji head naszej strony czyli pliku header.php, jednak ja jestem zwolennikiem czystości kody i lepiej jest umieścić to w osobnym pliku. Zakładam że nie masz żadnego własnego pliku JavaScript więc w katalogu skórki utwórz nowy plik np. nivo-slider.js, umieść w nim ten kod: i zapisz. By dodać plik do sekcji head naszej strony ponownie skorzystamy z OH. Musimy więc poddać edycji nasz wcześniej utworzony panel i w miejsce starego kodu wkleić ten: . Ponownie zapisujemy panel. Ogólnie to wszystko, pozostaje kwestia kodu CSS dla przycisków prev i next, oraz dla paginacji obrazków (1,2,3,... etc). Pozostawiam to dla Ciebie choćby jako ćwiczenie, w końcu jak chcesz się nauczyć inaczej niż przez praktykę. U mnie zadziałało, lecz nie posiadam własnej strony testowej w sieci więc nie mogę Tobie udowodnić :) Pozdro. Nie pisać na GG i PW w sprawach technicznych!
ChemikPil - blog (w nowej odsłonie) | ChemikPIL - My twitter |
|
|
Dudeek |
Dodany dnia 14.04.2011 15:35:13
|
Przedszkolak Postów: 6 Ostrzeżeń: 2 Data rejestracji: 02.11.2008 00:24 |
Zrobiłem wszystko zgodnie z instrukcją i smiga na Google Chrome, lecz w Firefox czy Internet Explorer pokazują się obrazki pod obrazkami, w czym może tkwić problem? //wszystko działa Edytowane przez Dudeek dnia 14.04.2011 17:38:03 |
|
|
djdandi |
Dodany dnia 17.07.2011 11:13:13
|
Początkujący Postów: 164 Pomógł: 1 Ostrzeżeń: 5 v7.02.04 Data rejestracji: 05.11.2007 14:14 |
Mam pytanie dlaczego nie ma obrazków tylko są napisy Prev i Next. Dałem obrazki do katalogu mojego thema/images Pozdrawiam all |
|
|
Konto ukryte |
Dodany dnia 17.07.2011 11:15:12
|
Początkujący Postów: 151 Data rejestracji: 29.08.2009 15:26 ZBANOWANY: Dożywotnio |
A w ogóle czytałeś uważnie post? Obrazki dodaje się do folderu images/nivo.
Edytowane przez Pieka dnia 17.07.2011 11:36:00 |
|
|
djdandi |
Dodany dnia 17.07.2011 11:37:49
|
Początkujący Postów: 164 Pomógł: 1 Ostrzeżeń: 5 v7.02.04 Data rejestracji: 05.11.2007 14:14 |
ok to może inaczej chodzi o to że jak wejdziesz na stronę http://nivo.dev7s... i najedziesz na obrazek to pojawiają się strzałki po lewej i po prawej stronie oraz pod spodem jest loader a u mnie tego nie ma zamiast tych obrazków pojawiają się napisy Prev i Next teraz rozumiesz. Wszystko mam zrobione jak podaje instrukcja. Dodam jeszcze to że chcę dać to w theme.php a nie w wiadomości powitalnej. W theme.php dałem taki kod Rozwiń Kod źródłowy PHP
Edytowane przez djdandi dnia 17.07.2011 11:41:57 Pozdrawiam all |
|
|
emil90ck |
Dodany dnia 17.07.2011 11:50:11
|
Bywalec Postów: 376 Pomógł: 30 Ostrzeżeń: 3 v7.00.05 Data rejestracji: 25.07.2008 13:11 |
djdandi napisał/a: ok to może inaczej chodzi o to że jak wejdziesz na stronę http://nivo.dev7s... i najedziesz na obrazek to pojawiają się strzałki po lewej i po prawej stronie oraz pod spodem jest loader a u mnie tego nie ma zamiast tych obrazków pojawiają się napisy Prev i Next teraz rozumiesz. Wszystko mam zrobione jak podaje instrukcja. Dodam jeszcze to że chcę dać to w theme.php a nie w wiadomości powitalnej. W theme.php dałem taki kod Rozwiń Kod źródłowy PHP Podaj prawidłową lokalizacje plików graficznych :) Najlepiej podaj cały adres wraz z www lub zastosuj zmienne. |
|
|
djdandi |
Dodany dnia 17.07.2011 11:58:35
|
Początkujący Postów: 164 Pomógł: 1 Ostrzeżeń: 5 v7.02.04 Data rejestracji: 05.11.2007 14:14 |
No ale przeglądałem wszystkie pliki które są podane w instrukcji napisanej przez Chemikpil i nie ma tan nic odnośnie tych strzałek i tego loadera. Gdzie powinno umieścić się pliki skórek załączonych razem z Nivo Slider. Pozdrawiam all |
|
Strona 1 z 2: 12
Przejdź do forum: |