Gamma gallery
Strona wtyczki
Oficjalna witryna wtyczki
Zobacz więcej
Gamma gallery
Strona wtyczki: | Strona wtyczki |
Instalacja
- Biblioteki
- HTML
- JS
<link href="demo.css" rel="stylesheet" />
<link href="noJS.css" rel="stylesheet" />
<link href="style.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="01modernizr.custom.70736.js"></script>
<script src="gamma.js"></script>
<script src="jquery.history.js"></script>
<script src="jquery.masonry.min.js"></script>
<script src="jquerypp.custom.js"></script>
<script src="js-url.min.js"></script>
<div class="gamma-container gamma-loading" id="gamma-container">
<ul class="gamma-gallery">
<li>
<div data-alt="img01"
data-description="<h3>Test</h3>"
data-max-width="1800"
data-max-height="2400"
>
<div data-src="http://jquery.netid.pl/media/sample/700x500/1.jpg" data-min-width="1300"></div>
<div data-src="http://jquery.netid.pl/media/sample/700x500/1.jpg" data-min-width="1000"></div>
<div data-src="http://jquery.netid.pl/media/sample/700x500/1.jpg" data-min-width="700"></div>
<div data-src="http://jquery.netid.pl/media/sample/700x500/1.jpg" data-min-width="300"></div>
<div data-src="http://jquery.netid.pl/media/sample/700x500/1.jpg" data-min-width="200"></div>
<div data-src="http://jquery.netid.pl/media/sample/700x500/1.jpg" data-min-width="140"></div>
<div data-src="http://jquery.netid.pl/media/sample/700x500/1.jpg"></div>
<noscript>
<img src="http://jquery.netid.pl/media/sample/700x500/1.jpg" alt="img01"/>
</noscript>
</div>
</li>
<li>
<div data-alt="img02"
data-description="<h3>Test</h3>"
data-max-width="1800"
data-max-height="2400"
>
<div data-src="http://jquery.netid.pl/media/sample/700x500/2.jpg" data-min-width="1300"></div>
<div data-src="http://jquery.netid.pl/media/sample/700x500/3.jpg" data-min-width="1000"></div>
<div data-src="http://jquery.netid.pl/media/sample/700x500/2.jpg" data-min-width="700"></div>
<div data-src="http://jquery.netid.pl/media/sample/700x500/2.jpg" data-min-width="300"></div>
<div data-src="http://jquery.netid.pl/media/sample/700x500/2.jpg" data-min-width="200"></div>
<div data-src="http://jquery.netid.pl/media/sample/700x500/2.jpg" data-min-width="140"></div>
<div data-src="http://jquery.netid.pl/media/sample/700x500/2.jpg"></div>
<noscript>
<img src="http://jquery.netid.pl/media/sample/700x500/2.jpg" alt="img02"/>
</noscript>
</div>
</li>
<li>
<div data-alt="img03"
data-description="<h3>Test</h3>"
data-max-width="1800"
data-max-height="2400"
>
<div data-src="http://jquery.netid.pl/media/sample/700x500/3.jpg" data-min-width="1300"></div>
<div data-src="http://jquery.netid.pl/media/sample/700x500/3.jpg" data-min-width="1000"></div>
<div data-src="http://jquery.netid.pl/media/sample/700x500/3.jpg" data-min-width="700"></div>
<div data-src="http://jquery.netid.pl/media/sample/700x500/3.jpg" data-min-width="300"></div>
<div data-src="http://jquery.netid.pl/media/sample/700x500/3.jpg" data-min-width="200"></div>
<div data-src="http://jquery.netid.pl/media/sample/700x500/3.jpg" data-min-width="140"></div>
<div data-src="http://jquery.netid.pl/media/sample/700x500/3.jpg"></div>
<noscript>
<img src="http://jquery.netid.pl/media/sample/700x500/3.jpg" alt="img03"/>
</noscript>
</div>
</li>
</ul>
<div class="gamma-overlay"></div>
</div>
$(function() {
var GammaSettings = {
// order is important!
viewport : [ {
width : 1200,
columns : 5
}, {
width : 900,
columns : 4
}, {
width : 500,
columns : 3
}, {
width : 320,
columns : 2
}, {
width : 0,
columns : 2
} ]
};
Gamma.init( GammaSettings );
});