(5)
1

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
Plugin SuperBox to lekki i szybki plugin do tworzenia multimedialnych galerii.
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
});