我的图库加载更多按钮时遇到问题。
我使用的是非常古老的剧本Gamma Gallery。您可以在此处的链接中看到此消息：http://tympanus.net/codrops/2012/11/06/gamma-gallery-a-responsive-image-gallery-experiment/
我的问题是：当我点击＆＃34;显示更多＆＃34;按钮li元素重叠。有时位置计算正确，有时不正确，我不知道为什么。我花了8个小时，我需要＆＃34;新鲜的外观＆＃34;明智的家伙。
正确加载所有脚本。下面你可以看到加载正常的简单列表：
<div class="gamma-container gamma-loading" id="gamma-container">
<ul class="gamma-gallery">
<li>
<div data-alt="img03" data-description="<h3>Citroen Banner</h3>" data-max-width="1800" data-max-height="1350">
<div data-src="/img/realizacje/citroen.jpg" data-min-width="1300"></div>
<div data-src="/img/realizacje/citroen.jpg" data-min-width="1000"></div>
<div data-src="/img/realizacje/citroen.jpg" data-min-width="700"></div>
<div data-src="/img/realizacje/citroen.jpg" data-min-width="300"></div>
<div data-src="/img/realizacje/citroen.jpg" data-min-width="200"></div>
<div data-src="/img/realizacje/citroen.jpg" data-min-width="140"></div>
<div data-src="/img/realizacje/citroen.jpg"></div>
<noscript>
<img src="/img/realizacje/citroen.jpg" alt="img03" />
</noscript>
</div>
</li>
<li>
<div data-alt="img03" data-description="<h3>Euro Laser Clinic Logo</h3>" data-max-width="1800" data-max-height="1350">
<div data-src="/img/realizacje/laser.jpg" data-min-width="1300"></div>
<div data-src="/img/realizacje/laser.jpg" data-min-width="1000"></div>
<div data-src="/img/realizacje/laser.jpg" data-min-width="700"></div>
<div data-src="/img/realizacje/laser.jpg" data-min-width="300"></div>
<div data-src="/img/realizacje/laser.jpg" data-min-width="200"></div>
<div data-src="/img/realizacje/laser.jpg" data-min-width="140"></div>
<div data-src="/img/realizacje/laser.jpg"></div>
<noscript>
<img src="/img/realizacje/laser.jpg" alt="img03" />
</noscript>
</div>
</li>
...
div class="gamma-overlay"></div>
<div id="loadmore" class="loadmore">Wczytaj więcej naszych realizacji</div>
以及我如何使用init脚本：
jQuery(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, fncallback );
//
var page = 0
, items = ['<li><div data-alt="img03" data-description="<h3>PrzyodniaZalesie</h3>" data-max-width="1800" data-max-height="1350"><div data-src="/img/realizacje/obraz3.jpg" data-min-width="1300"></div><div data-src="/img/realizacje/obraz3.jpg" data-min-width="1000"></div><div data-src="/img/realizacje/obraz3.jpg" data-min-width="700"></div><div data-src="/img/realizacje/obraz3.jpg" data-min-width="300"></div><div data-src="/img/realizacje/obraz3.jpg" data-min-width="200"></div><div data-src="/img/realizacje/obraz3.jpg" data-min-width="140"></div><div data-src="/img/realizacje/obraz3.jpg"></div><noscript><img src="/img/realizacje/obraz3.jpg" alt="img03"/></noscript></div></li><li><div data-alt="img03" data-description="<h3>Mucha&Lech</h3>" data-max-width="1800" data-max-height="1350"><div data-src="/img/realizacje/obraz4.jpg" data-min-width="1300"></div><div data-src="/img/realizacje/obraz4.jpg" data-min-width="1000"></div><div data-src="/img/realizacje/obraz4.jpg" data-min-width="700"></div><div data-src="/img/realizacje/obraz4.jpg" data-min-width="300"></div><div data-src="/img/realizacje/obraz4.jpg" data-min-width="200"></div><div data-src="/img/realizacje/obraz4.jpg" data-min-width="140"></div><div data-src="/img/realizacje/obraz4.jpg"></div><noscript><img src="/img/realizacje/obraz4.jpg" alt="img03"/></noscript></div></li><li><div data-alt="img03" data-description="<h3>PrzychodniaZalesie</h3>" data-max-width="1800" data-max-height="1350"><div data-src="/img/realizacje/obraz5.jpg" data-min-width="1300"></div><div data-src="/img/realizacje/obraz5.jpg" data-min-width="1000"></div><div data-src="/img/realizacje/obraz5.jpg" data-min-width="700"></div><div data-src="/img/realizacje/obraz5.jpg" data-min-width="300"></div><div data-src="/img/realizacje/obraz5.jpg" data-min-width="200"></div><div data-src="/img/realizacje/obraz5.jpg" data-min-width="140"></div><div data-src="/img/realizacje/obraz5.jpg"></div><noscript><img src="/img/realizacje/obraz5.jpg" alt="img03"/></noscript></div></li><li><div data-alt="img03" data-description="<h3>Mucha&Lech</h3>" data-max-width="1800" data-max-height="1350"><div data-src="/img/realizacje/obraz6.jpg" data-min-width="1300"></div><div data-src="/img/realizacje/obraz6.jpg" data-min-width="1000"></div><div data-src="/img/realizacje/obraz6.jpg" data-min-width="700"></div><div data-src="/img/realizacje/obraz6.jpg" data-min-width="300"></div><div data-src="/img/realizacje/obraz6.jpg" data-min-width="200"></div><div data-src="/img/realizacje/obraz6.jpg" data-min-width="140"></div><div data-src="/img/realizacje/obraz6.jpg"></div><noscript><img src="/img/realizacje/obraz6.jpg" alt="img03"/></noscript></div></li><li><div data-alt="img03" data-description="<h3>PrzyodniaZalesie</h3>" data-max-width="1800" data-max-height="1350"><div data-src="/img/realizacje/obraz7.jpg" data-min-width="1300"></div><div data-src="/img/realizacje/obraz7.jpg" data-min-width="1000"></div><div data-src="/img/realizacje/obraz7.jpg" data-min-width="700"></div><div data-src="/img/realizacje/obraz7.jpg" data-min-width="300"></div><div data-src="/img/realizacje/obraz7.jpg" data-min-width="200"></div><div data-src="/img/realizacje/obraz7.jpg" data-min-width="140"></div><div data-src="/img/realizacje/obraz7.jpg"></div><noscript><img src="/img/realizacje/obraz7.jpg" alt="img03"/></noscript></div></li><li><div data-alt="img03" data-description="<h3>Mucha&Lech</h3>" data-max-width="1800" data-max-height="1350"><div data-src="/img/realizacje/obraz8.jpg" data-min-width="1300"></div><div data-src="/img/realizacje/obraz8.jpg" data-min-width="1000"></div><div data-src="/img/realizacje/obraz8.jpg" data-min-width="700"></div><div data-src="/img/realizacje/obraz8.jpg" data-min-width="300"></div><div data-src="/img/realizacje/obraz8.jpg" data-min-width="200"></div><div data-src="/img/realizacje/obraz8.jpg" data-min-width="140"></div><div data-src="/img/realizacje/obraz8.jpg"></div><noscript><img src="/img/realizacje/obraz8.jpg" alt="img03"/></noscript></div></li><li><div data-alt="img03" data-description="<h3>Mucha&Lech</h3>" data-max-width="1800" data-max-height="1350"><div data-src="/img/realizacje/obraz9.jpg" data-min-width="1300"></div><div data-src="/img/realizacje/obraz9.jpg" data-min-width="1000"></div><div data-src="/img/realizacje/obraz9.jpg" data-min-width="700"></div><div data-src="/img/realizacje/obraz9.jpg" data-min-width="300"></div><div data-src="/img/realizacje/obraz9.jpg" data-min-width="200"></div><div data-src="/img/realizacje/obraz9.jpg" data-min-width="140"></div><div data-src="/img/realizacje/obraz9.jpg"></div><noscript><img src="/img/realizacje/obraz9.jpg" alt="img03"/></noscript></div></li><li><div data-alt="img03" data-description="<h3>Play</h3>" data-max-width="1800" data-max-height="1350"><div data-src="/img/realizacje/play.jpg" data-min-width="1300"></div><div data-src="/img/realizacje/play.jpg" data-min-width="1000"></div><div data-src="/img/realizacje/play.jpg" data-min-width="700"></div><div data-src="/img/realizacje/play.jpg" data-min-width="300"></div><div data-src="/img/realizacje/play.jpg" data-min-width="200"></div><div data-src="/img/realizacje/play.jpg" data-min-width="140"></div><div data-src="/img/realizacje/play.jpg"></div><noscript><img src="/img/realizacje/play.jpg" alt="img03"/></noscript></div></li>']
function fncallback() {
$(' #loadmore ').show().on( 'click', function() {
++page;
var newitems = items[page-1];
if( page <= 1 ) {
Gamma.add( $( newitems ) );
}
if( page == 1 ) {
$( this ).remove();
};
});
}
});
表＆＃34;项目＆＃34;是缩小列表，我试图加载点击。但李元素的位置是错误的。
您可以在网站nowy.drukarniacreative.pl/realizacje
上看到它如果你能帮助我，我将很高兴。