Facebook slider bez JS
Jak dodać do strony bardzo prosty animowany slider LikeBox-a z Facebook-a? Ostatnio na tym blogu wspominałem o pluginie MUSLI oraz o możliwości podpięcia go pod blog na Bloggerze. W pierwszym poście wyjaśniłem jak podpiąć bibliotekę jQuery, jak podpiąć plugin MUSLI, jak dodać dodatkowe style CSS do szablonu i kod zakładek, oraz jak wykorzystać w tym kodzie grafikę umieszczoną na bloggerze.
Natomiast dzisiaj zmienimy nieco podejście i zbudujemy bardzo podobny, również w podobny sposób, slider LikeBoxa, ale tym razem bez JavaScript, czyli bez js, bez jQuery i bez pluginu MUSLI.
Czy można osiągnąć efekt slidera bez javascript? Obecnie CSS transitions stają się coraz popularniejsze i coraz szerzej wspierane przez przeglądarki. Wykorzystując techniki CSS transitions zbudujemy efekt imitujący wyjeżdżanie zakładki z boku okna przeglądarki.
Zdecydowany plus takiego rozwiązania to oczywiście pominięcie skryptów js, czyli jQuery i MUSLI. Minus to kompatybilność z przeglądarkami, dlatego każdy musi sobie sam odpowiedzieć na pytanie czy to rozwiązanie nadaje się na jego stronę, czy blog.
Na moim blogu o WordPress dodałem wczoraj podobny wpis o sliderze LikeBoxa bez JS, więc tutaj po prostu troszkę to przerobimy, aby dostosować pod wymagania bloggera... :)
Oprócz tego napisałem jeszcze przykładowe demo z realizacjami z jQuery, z MUSLI i z jQuery easing plugin, dzięki którym osiągnąć można całkiem ciekawy efekt. Tylko pytanie czy opłaca się podpinać aż trzy skrypty, aby realizować to zadanie? Oceńcie sami. :)
Facebook LikeBox slider bez JS
Tutaj znajduje się demo slidera, o którym wspominałem wcześniej, jest to efekt końcowy produktu do którego dążymy w tym wpisie.HTML slidera
Na początek prawidłowy kod HTML. Jak zwykle jest to lista nieuporządkowana (ul), we wnętrzu każdego elementu listy (li) umieszczamy -- obrazek (img), który będzie imitował zakładkę
- blok (div) z zawartością zakładki. We wnętrzu tego bloku możemy umieścić właściwie cokolwiek (zdjęcie, formularz, napis, linki).
<ul class="musli"> <li> <img src="c-icons/fb.png" /> <div class="musli-facebook">KOD ZAKŁADKI</div> </li> <li> <img src="c-icons/gp.png" /> <div class="musli-google">KOD ZAKŁADKI</div> </li> </ul>
Powyższy kod tworzy dwie zakładki, ale można zrobić jedną albo więcej.
Domyślnie slider wyświetli się z prawej strony, ale możemy dodać do listy dodatkową klasę, która zmieni pozycję slidera:
- musli-left - aby przenieść zakładki na lewą stronę
- musli-top - aby wyświetlać zakładki na górze strony
- musli-bottom - aby wyświetlać zakładki na dole strony
CSS
/* reset */
.musli *{
padding:0;
margin:0;
list-style:none;
}
.musli{
position:fixed;
right:0px;
top:150px; /* tutaj można ustawić odległość
od góry strony dla zakładek znajdujących się po prawej stronie */
z-index:100;
list-style:none;
}
.musli-bottom{
left:300px; /* tutaj można ustawić odległość
od lewej strony dla zakładek znajdujących się na dole */
bottom:0px;
right:auto;
top:auto;
}
.musli-top{
left:300px; /* tutaj można ustawić odległość
od lewej strony dla zakładek znajdujących się na górze */
top:0px;
right:auto;
bottom:auto;
}
.musli-left{
left:0px;
top:200px; /* tutaj można ustawić odległość
od góry strony dla zakładek znajdujących się po lewej stronie */
right:auto;
bottom:auto;
}
.musli > li{
cursor:pointer;
width:35px;
height:35px;
margin-bottom:1px;
position:relative;
}
.musli-bottom > li, .musli-top > li{
margin-right: 1px;
margin-bottom: 0;
float:left;
}
/* Zaokrąglone rogi dla obrazków zakładek -
skasuj, jeżeli nie chcesz zaokrąglać rogów przez CSS */
.musli > li > img{
-moz-border-radius: 5px 0 0 5px;
-webkit-border-radius: 5px 0 0 5px;
border-radius: 5px 0 0 5px;
}
.musli-bottom > li > img{
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
.musli-top > li > img{
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
.musli-left > li > img{
-moz-border-radius: 0 5px 5px 0;
-webkit-border-radius: 0 5px 5px 0;
border-radius: 0 5px 5px 0;
}
/* Koniec Zaokrąglone rogi dla obrazków zakładek */
.musli > li > div{
padding:5px;
background: #fff;
float:left;
width:286px;
height:296px;
-moz-border-radius: 0 0 0 8px;
-webkit-border-radius: 0 0 0 8px;
border-radius: 0 0 0 8px;
position:absolute;
top:0;
left:35px;
z-index:100;
border: solid #0170cf 3px;
}
.musli-bottom > li > div{
top:35px;
left:auto;
-moz-border-radius: 0 8px 0 0;
-webkit-border-radius: 0 8px 0 0;
border-radius: 0 8px 0 0;
}
.musli-top > li > div{
bottom:35px;
left:auto;
top:auto;
-moz-border-radius: 0 0 8px 0;
-webkit-border-radius: 0 0 8px 0;
border-radius: 0 0 8px 0;
}
.musli-left > li > div{
top:0px;
left:auto;
right:35px;
-moz-border-radius: 0 0 8px 0;
-webkit-border-radius: 0 0 8px 0;
border-radius: 0 0 8px 0;
}
.musli-google{
border: solid #cd3c2a 3px !important;
}
.musli-facebook{
border: solid #0170cf 3px !important;
}
.musli-twitter{
border: solid #07afee 3px !important;
}
.musli-nk{
border: solid #8fc44c 3px !important;
}
/** transitions **/
/** wymiary diva - width:286px; height:296px; **/
.musli>li{
right:0;
-moz-transition:.5s linear;
-webkit-transition:.5s linear;
transition:.5s linear;
}
.musli>li:hover{
right:302px; /* szerokosc diva w którym znajduje się LikeBox */
}
.musli-left>li{
left:0px
}
.musli-left>li:hover{
right:auto;
left:302px; /* szerokosc diva w którym znajduje się LikeBox */
}
.musli-top>li{
top:0;
}
.musli-top>li:hover{
right:auto;
top: 312px; /* wysokosc diva + (paddingi + grubosc ramki) * 2 */
}
.musli-bottom>li{
bottom:0;
}
.musli-bottom>li:hover{
right:auto;
bottom: 312px; /* 286px + (10px + 3px) * 2 = 312px */
}
/** END transitions **/
