stackoom
  简体   繁体   中英

Load every 6 images after clicking on button with jQuery

 原文  2016-07-22 00:40:57  0   1    javascript/ jquery/ html/ image

Question

I want to add a Load More button to my website with only jQuery (no Ajax). My HTML images section structure is a list of elements mixed with some plugins like lightbox.

I tried many of jQuery tricks even this Fiddle, but no chance:

http://jsfiddle.net/cse_tushar/6FzSb/

Here's my images code with the load more button: 

 <!DOCTYPE html> <head> <title></title> </head> <body> <ul id="portfolio-container" class="portfolio-container real-gapped colored-mask masonry clearlist row portfolio-hover-effect"> <li class="portfolio-item photo col-sm-6 col-md-4 col-xs-12"> <div class="portfolio-item-img"> <img src="http://placehold.it/400x260" alt="portfolio" /> </div> <div class="portfolio-item-info font-second"> <h3 class="portfolio-item-title">sweet nicky</h3> <div class="portfolio-item-detail"> <p>apiente accusantium fugiat</p> <!-- LightBox Button --> <a href="https://vimeo.com/31240369" title="Image description" class="icon-magnifying-glass lightbox" data-lightbox-gallery="gallery1"></a> <!--/ End LightBox Button --> </div> </div> </li> <li class="portfolio-item photo col-sm-6 col-md-4 col-xs-12"> <div class="portfolio-item-img"> <img src="http://placehold.it/400x260" alt="portfolio" /> </div> <div class="portfolio-item-info font-second"> <h3 class="portfolio-item-title">sweet nicky</h3> <div class="portfolio-item-detail"> <p>apiente accusantium fugiat</p> <!-- LightBox Button --> <a href="https://vimeo.com/31240369" title="Image description" class="icon-magnifying-glass lightbox" data-lightbox-gallery="gallery1"></a> <!--/ End LightBox Button --> </div> </div> </li> <li class="portfolio-item photo col-sm-6 col-md-4 col-xs-12"> <div class="portfolio-item-img"> <img src="http://placehold.it/400x260" alt="portfolio" /> </div> <div class="portfolio-item-info font-second"> <h3 class="portfolio-item-title">sweet nicky</h3> <div class="portfolio-item-detail"> <p>apiente accusantium fugiat</p> <!-- LightBox Button --> <a href="https://vimeo.com/31240369" title="Image description" class="icon-magnifying-glass lightbox" data-lightbox-gallery="gallery1"></a> <!--/ End LightBox Button --> </div> </div> </li> <li class="portfolio-item photo col-sm-6 col-md-4 col-xs-12"> <div class="portfolio-item-img"> <img src="http://placehold.it/400x260" alt="portfolio" /> </div> <div class="portfolio-item-info font-second"> <h3 class="portfolio-item-title">sweet nicky</h3> <div class="portfolio-item-detail"> <p>apiente accusantium fugiat</p> <!-- LightBox Button --> <a href="https://vimeo.com/31240369" title="Image description" class="icon-magnifying-glass lightbox" data-lightbox-gallery="gallery1"></a> <!--/ End LightBox Button --> </div> </div> </li> <li class="portfolio-item photo col-sm-6 col-md-4 col-xs-12"> <div class="portfolio-item-img"> <img src="http://placehold.it/400x260" alt="portfolio" /> </div> <div class="portfolio-item-info font-second"> <h3 class="portfolio-item-title">sweet nicky</h3> <div class="portfolio-item-detail"> <p>apiente accusantium fugiat</p> <!-- LightBox Button --> <a href="https://vimeo.com/31240369" title="Image description" class="icon-magnifying-glass lightbox" data-lightbox-gallery="gallery1"></a> <!--/ End LightBox Button --> </div> </div> </li> <li class="portfolio-item photo col-sm-6 col-md-4 col-xs-12"> <div class="portfolio-item-img"> <img src="http://placehold.it/400x260" alt="portfolio" /> </div> <div class="portfolio-item-info font-second"> <h3 class="portfolio-item-title">sweet nicky</h3> <div class="portfolio-item-detail"> <p>apiente accusantium fugiat</p> <!-- LightBox Button --> <a href="https://vimeo.com/31240369" title="Image description" class="icon-magnifying-glass lightbox" data-lightbox-gallery="gallery1"></a> <!--/ End LightBox Button --> </div> </div> </li> <li class="portfolio-item photo col-sm-6 col-md-4 col-xs-12"> <div class="portfolio-item-img"> <img src="http://placehold.it/400x260" alt="portfolio" /> </div> <div class="portfolio-item-info font-second"> <h3 class="portfolio-item-title">sweet nicky</h3> <div class="portfolio-item-detail"> <p>apiente accusantium fugiat</p> <!-- LightBox Button --> <a href="https://vimeo.com/31240369" title="Image description" class="icon-magnifying-glass lightbox" data-lightbox-gallery="gallery1"></a> <!--/ End LightBox Button --> </div> </div> </li> </ul> <div class="small-section text-center"> <a href="#" id="loadMore" class="btn btn-animated btn-split btn-dark ripple-alone" data-text="Load more"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Load more&nbsp;..&nbsp;&nbsp;&nbsp;&nbsp;</span></a> </div> </body> </html>

Any help please !

1 answers

solution1
 0  2016-07-22 01:01:00

I am assuming you know the urls to the additional images. If you have them in an array, you could potentially do something conceptually like this: 

 var moreImages = [ "http://lorempixel.com/72/72/", "http://lorempixel.com/72/72/", "http://lorempixel.com/72/72/", "http://lorempixel.com/72/72/", "http://lorempixel.com/72/72/", "http://lorempixel.com/72/72/", "http://lorempixel.com/72/72/" ]; $("#more").on("click", function(){ if (moreImages.length === 0) { return; } var target = $("#imageContainer"); moreImages.splice(0,3).forEach(function(item){ target.append("<li><img src=\\"" + item + "\\" /></li>"); }); }); 
 <ul id="imageContainer"> <li><img src="http://lorempixel.com/72/72/" /></li> <li><img src="http://lorempixel.com/72/72/" /></li> <li><img src="http://lorempixel.com/72/72/" /></li> </ul> <button id="more">more</button> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question jQuery/JavaScript Load div background Images after clicking a button JavaScript: Load Images in a div after clicking a button Ajax Load after clicking on 3 images load an image after clicking a button load filter after clicking submit button Load internal div after clicking button Wordpress Load internal div after clicking button Load data and images from json file by clicking on button and then button disappear jquery load image to div after clicking href jQuery .load() event cancelled after clicking on element
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM