(3)
1
Strona wtyczki
Oficjalna witryna wtyczki
Zobacz więcej
Plugin tworzy responsywną siatkę zdjęć koncentrując się na zapewnieniu odpowiedniej wielkości zarówno miniatury fotografii jak i pełnego widoku obrazu.
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 );
});
Demo
Pobierz demo
lub zobacz wersję on-line
mobile