Facebook slider już nie raz był tematem na tym blogu, a ponieważ wpisy dotyczące tego rodzaju rzeczy cieszą się sporym zainteresowaniem postanowiłem dodać coś nowego w tym właśnie temacie.
Chęć posiadania LikeBoxa (który już niedługo zostanie zastąpiony Page Pluginen) w „przyklejonym” do okna przeglądarki okienka jest dosyć spora. Takie rozwiązanie jednocześnie wyróżnia, to co się w nim znajduje, ale też nie rzuca się w oczy. No i jest to też ciekawe urozmaicenie na stronie.
z0, czyli tabsy bez JS
Tym razem mamy do czynienia z nieco inny podejściem. Ten Slider Facebook-a został zbudowany i działa bez użycia JavaScrtipt. Jedno czego potrzebujemy to wygenerowany kod HTML, oraz CSS. Opcją (preferowaną) jest skorzystanie z ikon Font Awesome, które bardzo przyspieszą cały proces instalacji na stronie. Zastosowanie innej biblioteki ikon wymagało by pewnych drobnych regulacji, ale nie będzie to bardzo trudne.
To w zasadzie wszystko. z0, bo tak brzmi nazwa kodowa Slidera Facebook-a bez JS, powinien działać we wszystkich współczesnych przeglądarkach i w sporej części tych starszych.
Pod linkiem poniżej znajduje się strona demonstracyjna tego tworu, zapraszam:
Strona Demoz0 – Facebook slider dla leniwych
Przyznam, że HTML i CSS są nieco zawiłe w tym rozwiązaniu. Dla ułatwienia stworzyłem prosty generator kodu, dzięki któremu w łatwy i szybki sposób stworzymy zakładki i pasujący do nich kod CSS. 🙂
Generator z0
Tak wygląda podstawowa wersja, którą z powodzeniem można na bardzo wiele sposobów modyfikować:
Warto zwrócić uwagę jak przy zmianie rozmiaru zakładki jest ona płynnie środkowana wertykalnie.
W porównaniu do MUSLI, z0 :
- Nie wymaga dodatkowych skryptów JavaScript, co za tym idzie nie potrzebuje dodatkowych bibliotek typu jQuery. Animacja odbywa się za pomocą CSS Transitions. Dla jednych może to być zaletą dla innych niekoniecznie.
- Ilość zakładek może być tak jak w MUSLI dowolna, ale tutaj wyświetlane są na ekranie maksymalnie 3. Możemy mieć bardzo dużo zakładek, a zajmą one zawsze tyle samo miejsca, minus tego rozwiązania to oczywiście to, że użytkownik nie może zobaczyć ile tych zakładek jest i wybrać od razu tej interesującej go.
- Szerokość slidera niestety musi być jednakowa dla wszystkich zakładek.
- Ciekawy efekt.
Łał, ten slider działa bardzo płynnie, muszę zapytać mojego webmastera czy dałoby się umieścić go na mojej stronce 🙂
Na pewno się da! Z generatorem każdy powinien sobie poradzić 🙂
Wspaniała strona. Gratuluję profesjonalizmu. Aż chwilami się można załamać .. z ilości własnych „braków” 🙂
Czy może jest szansa aby dodać opcję ustawiania szerokości dla każdej zakładki ?
Z tego co widzę to by się wiązało z większą zmianą w kodzie CSS ale za to jaka wartość dodana nowej funkcjonalności 🙂
O ile 300px dla FB jest OK to dla playlisty Youtube już zdecydowanie za mało.
Dziękuję za komentarz. Co do braków, niestety informatyka jest już tak obszerną dziedziną, że nikt nie ogarnie wszystkiego. Całe szczęście w internecie są blogi popularno naukowe, z których można się czegoś nauczyć. 😀
Odnośnie slidera, to szczerze mówiąc, kiedy na początku myślałem jak najlepiej byłoby to zrobić, odrzuciłem pomysł na oddzielne ustawianie szerokości każdej z zakładek, bo uznałem, że trochę dziwne byłoby wysunięcie się zakładki do pewnego poziomu, a po przejściu do kolejnej – „krótszej”, slider by „umykał” przed kursorem i się zamykał. Na pewno coś jeszcze było na rzeczy, tylko nie pamiętam już dokładnie co.
W tym przypadku również wolałbym poszerzyć page plugin FB, niż żeby cokolwiek mi wystawało/nie mieściło się. 🙂
Witam
Mam takie może banalne pytanie. W którym miejscu wstawiamy link do np. fwacebooka?
W miejscu
Tab 1 contentwrzucasz zawartość pierwszej karty,Tab 2 content– zawartość drugiej itd. Zawartością może być praktycznie cokolwiek. 🙂 Jeżeli chcesz umieścić Page Plugin od FB, to musisz udać się do strony developerów FB i wygenerować odpowiedni kod, który później wklejasz do zakładki.Stronę o której wspomniałem znajdziesz wpisując w google facebook page plugin. Tam wklejasz link do FB, kasujesz wszystko z pola zakładki, klikasz [Uzyskaj kod], w okienku wybierasz pływająca ramka, kopiujesz wszystko z pola, które tam się znajduje i wklejasz w miejscu
Tab 1 content.Dzięki serdeczne:-) zaraz będę testował
Pozdrawiam
W razie problemów pisz. Postaram się coś pomóc. 🙂