SuperBox
Adam Merrifield, Todd Motto and others
Wersja: 3.1.1
Numer wersji wtyczki
Dokumentacja
Sprawdź wszystkie opcje jakie oferuje plugin
Strona wtyczki
Oficjalna witryna wtyczki
Github
Repozytorium Github
Wersja jQuery: jquery >=1.8
Wersja jQuery z którą współpracuje plugin
Licencja: MIT
Licencja
Zobacz więcej
SuperBox
Autor | Adam Merrifield, Todd Motto and others |
Wersja: | 3.1.1 |
Dokumentacja: | Dokumentacja |
Strona wtyczki: | Strona wtyczki |
Github: | Github |
Wersja jQuery: | jquery >=1.8 |
Licencja: | MIT |
Zgłoś błąd: | Zgłoś błąd |
Data opublikowania: | 2013-06-20 |
Historia wersji
Wersja | Data publikacji |
---|---|
3.1.1 | 2013-06-20 |
3.1.0 | 2013-05-09 |
3.0.9 | 2013-05-08 |
3.0.7 | 2013-05-02 |
3.0.6 | 2013-05-01 |
3.0.5 | 2013-04-30 |
3.0.4 | 2013-04-29 |
3.0.3 | 2013-04-29 |
3.0.2 | 2013-04-27 |
3.0.1 | 2013-04-26 |
3.0.0 | 2013-04-26 |
Stylem i sposobem działania przypomina znany system galerii Google.
Plugin można odpowiednio dostosować korzystając z dostępnych opcji konfiguracji. Ponadto oferuje łatwą konfigurację wizualną poprzez dostosowanie przycisków nawigacyjnych za pomocą styli css.
Plugin jest responsywny - skaluje się do rozdzielczości dowolnego ekranu urządzenia mobilnego czy stacjonarnego.
Więcej informacji o SuperBox można znaleść na stronie autora pluginu.
Tagi
Instalacja
- Biblioteki
- HTML
- JS
<link href="demo.css" rel="stylesheet" />
<link href="superbox.min.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="jquery.superbox.min.js"></script>
<div class="myGallery">
<div>
<img src="http://jquery.netid.pl/media/sample/700x500/3.jpg" data-img="http://jquery.netid.pl/media/sample/700x500/3.jpg" alt="">
</div>
<div>
<img src="http://jquery.netid.pl/media/sample/700x500/2.jpg" data-img="http://jquery.netid.pl/media/sample/700x500/2.jpg" alt="">
</div>
<div>
<img src="http://jquery.netid.pl/media/sample/700x500/1.jpg" data-img="http://jquery.netid.pl/media/sample/700x500/1.jpg" alt="">
</div>
</div>
$('.myGallery').SuperBox({
background : '#3f3f3f', // Full image background color. Default: #333
border : '#3f3f3f', // Full image border color. Default: #222
height : 600, // Maximum full image height. Default: 400
view : 'landscape|square|portrait', // Sets ratio on smaller viewports. Default: landscape
xColor : '#CCC', // Close icon color. Default: #FFF
xShadow : 'none' // Close icon shadow. Default: none
});