jquery - Show 2 Additional Rows After Each Button Click -
i fan of google images, , attempting similar search results page. using bootstrap 3, trying show first 2 rows of image gallery. below gallery, have "additional images" button should show next 2 rows after each click. i've gotten close, it's not exact , can't seem find clear solution anywhere. here code have gallery.
<!-- gallery carousel --> <section id="sc_gallerycarousel"> <div> <div> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> <h1>image gallery</h1> <p class="lead">description of gallery</p> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. sed eaque perspiciatis est quod labore minima quia delectus dolorem voluptas vero magni laudantium, praesentium error harum impedit quae, illum laborum cupiditate!</p> </div> </div> <!-- first row of images --> <div class="row imagerow"> <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"> <div class="image-wrapper"> <a href="http://dummyimage.com/800x600/f2f2f2/606060&text=galleryimage1" data-title="image 1" data-lightbox="rocket launch"> <img src="http://dummyimage.com/320/f2f2f2/606060&text=galleryimage" alt="" class="img-responsive"> <div class="image-overlay-content"> <div class="content-box"> <div class="inside-content-box"> <i class="fa fa-search-plus fa-3x"></i> </div> </div> </div> </a> </div> </div> <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"> <div class="image-wrapper"> <a href="http://dummyimage.com/800x600/f2f2f2/606060&text=galleryimage2" data-title="image 2" data-lightbox="rocket launch"> <img src="http://dummyimage.com/320/f2f2f2/606060&text=galleryimage" alt="" class="img-responsive"> <div class="image-overlay-content"> <div class="content-box"> <div class="inside-content-box"> <i class="fa fa-search-plus fa-3x"></i> </div> </div> </div> </a> </div> </div> <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"> <div class="image-wrapper"> <a href="http://dummyimage.com/800x600/f2f2f2/606060&text=galleryimage3" data-title="image 3" data-lightbox="rocket launch"> <img src="http://dummyimage.com/320/f2f2f2/606060&text=galleryimage" alt="" class="img-responsive"> <div class="image-overlay-content"> <div class="content-box"> <div class="inside-content-box"> <i class="fa fa-search-plus fa-3x"></i> </div> </div> </div> </a> </div> </div> <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"> <div class="image-wrapper"> <a href="http://dummyimage.com/800x600/f2f2f2/606060&text=galleryimage4" data-title="image 4" data-lightbox="rocket launch"> <img src="http://dummyimage.com/320/f2f2f2/606060&text=galleryimage" alt="" class="img-responsive"> <div class="image-overlay-content"> <div class="content-box"> <div class="inside-content-box"> <i class="fa fa-search-plus fa-3x"></i> </div> </div> </div> </a> </div> </div> </div> <!-- second row of images --> <div class="row imagerow"> <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"> <div class="image-wrapper"> <a href="http://dummyimage.com/800x600/f2f2f2/606060&text=galleryimage5" data-title="image 5" data-lightbox="rocket launch"> <img src="http://dummyimage.com/320/f2f2f2/606060&text=galleryimage" alt="" class="img-responsive"> <div class="image-overlay-content"> <div class="content-box"> <div class="inside-content-box"> <i class="fa fa-search-plus fa-3x"></i> </div> </div> </div> </a> </div> </div> <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"> <div class="image-wrapper"> <a href="http://dummyimage.com/800x600/f2f2f2/606060&text=galleryimage6" data-title="image 6" data-lightbox="rocket launch"> <img src="http://dummyimage.com/320/f2f2f2/606060&text=galleryimage" alt="" class="img-responsive"> <div class="image-overlay-content"> <div class="content-box"> <div class="inside-content-box"> <i class="fa fa-search-plus fa-3x"></i> </div> </div> </div> </a> </div> </div> <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"> <div class="image-wrapper"> <a href="http://dummyimage.com/800x600/f2f2f2/606060&text=galleryimage7" data-title="image 7" data-lightbox="rocket launch"> <img src="http://dummyimage.com/320/f2f2f2/606060&text=galleryimage" alt="" class="img-responsive"> <div class="image-overlay-content"> <div class="content-box"> <div class="inside-content-box"> <i class="fa fa-search-plus fa-3x"></i> </div> </div> </div> </a> </div> </div> <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"> <div class="image-wrapper"> <a href="http://dummyimage.com/800x600/f2f2f2/606060&text=galleryimage8" data-title="image 8" data-lightbox="rocket launch"> <img src="http://dummyimage.com/320/f2f2f2/606060&text=galleryimage" alt="" class="img-responsive"> <div class="image-overlay-content"> <div class="content-box"> <div class="inside-content-box"> <i class="fa fa-search-plus fa-3x"></i> </div> </div> </div> </a> </div> </div> </div> <!-- third row of images --> <div class="row imagerow"> <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"> <div class="image-wrapper"> <a href="http://dummyimage.com/800x600/f2f2f2/606060&text=galleryimage9" data-title="image 9" data-lightbox="rocket launch"> <img src="http://dummyimage.com/320/f2f2f2/606060&text=galleryimage" alt="" class="img-responsive"> <div class="image-overlay-content"> <div class="content-box"> <div class="inside-content-box"> <i class="fa fa-search-plus fa-3x"></i> </div> </div> </div> </a> </div> </div> <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"> <div class="image-wrapper"> <a href="http://dummyimage.com/800x600/f2f2f2/606060&text=galleryimage10" data-title="image 10" data-lightbox="rocket launch"> <img src="http://dummyimage.com/320/f2f2f2/606060&text=galleryimage" alt="" class="img-responsive"> <div class="image-overlay-content"> <div class="content-box"> <div class="inside-content-box"> <i class="fa fa-search-plus fa-3x"></i> </div> </div> </div> </a> </div> </div> <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"> <div class="image-wrapper"> <a href="http://dummyimage.com/800x600/f2f2f2/606060&text=galleryimage11" data-title="image 11" data-lightbox="rocket launch"> <img src="http://dummyimage.com/320/f2f2f2/606060&text=galleryimage" alt="" class="img-responsive"> <div class="image-overlay-content"> <div class="content-box"> <div class="inside-content-box"> <i class="fa fa-search-plus fa-3x"></i> </div> </div> </div> </a> </div> </div> <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"> <div class="image-wrapper"> <a href="http://dummyimage.com/800x600/f2f2f2/606060&text=galleryimage12" data-title="image 12" data-lightbox="rocket launch"> <img src="http://dummyimage.com/320/f2f2f2/606060&text=galleryimage" alt="" class="img-responsive"> <div class="image-overlay-content"> <div class="content-box"> <div class="inside-content-box"> <i class="fa fa-search-plus fa-3x"></i> </div> </div> </div> </a> </div> </div> </div> <!-- fourth row of images --> <div class="row imagerow"> <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"> <div class="image-wrapper"> <a href="http://dummyimage.com/800x600/f2f2f2/606060&text=galleryimage9" data-title="image 9" data-lightbox="rocket launch"> <img src="http://dummyimage.com/320/f2f2f2/606060&text=galleryimage" alt="" class="img-responsive"> <div class="image-overlay-content"> <div class="content-box"> <div class="inside-content-box"> <i class="fa fa-search-plus fa-3x"></i> </div> </div> </div> </a> </div> </div> <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"> <div class="image-wrapper"> <a href="http://dummyimage.com/800x600/f2f2f2/606060&text=galleryimage10" data-title="image 10" data-lightbox="rocket launch"> <img src="http://dummyimage.com/320/f2f2f2/606060&text=galleryimage" alt="" class="img-responsive"> <div class="image-overlay-content"> <div class="content-box"> <div class="inside-content-box"> <i class="fa fa-search-plus fa-3x"></i> </div> </div> </div> </a> </div> </div> <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"> <div class="image-wrapper"> <a href="http://dummyimage.com/800x600/f2f2f2/606060&text=galleryimage11" data-title="image 11" data-lightbox="rocket launch"> <img src="http://dummyimage.com/320/f2f2f2/606060&text=galleryimage" alt="" class="img-responsive"> <div class="image-overlay-content"> <div class="content-box"> <div class="inside-content-box"> <i class="fa fa-search-plus fa-3x"></i> </div> </div> </div> </a> </div> </div> <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"> <div class="image-wrapper"> <a href="http://dummyimage.com/800x600/f2f2f2/606060&text=galleryimage12" data-title="image 12" data-lightbox="rocket launch"> <img src="http://dummyimage.com/320/f2f2f2/606060&text=galleryimage" alt="" class="img-responsive"> <div class="image-overlay-content"> <div class="content-box"> <div class="inside-content-box"> <i class="fa fa-search-plus fa-3x"></i> </div> </div> </div> </a> </div> </div> </div> <!-- fifth row of images --> <div class="row imagerow"> <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"> <div class="image-wrapper"> <a href="http://dummyimage.com/800x600/f2f2f2/606060&text=galleryimage9" data-title="image 9" data-lightbox="rocket launch"> <img src="http://dummyimage.com/320/f2f2f2/606060&text=galleryimage" alt="" class="img-responsive"> <div class="image-overlay-content"> <div class="content-box"> <div class="inside-content-box"> <i class="fa fa-search-plus fa-3x"></i> </div> </div> </div> </a> </div> </div> <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"> <div class="image-wrapper"> <a href="http://dummyimage.com/800x600/f2f2f2/606060&text=galleryimage10" data-title="image 10" data-lightbox="rocket launch"> <img src="http://dummyimage.com/320/f2f2f2/606060&text=galleryimage" alt="" class="img-responsive"> <div class="image-overlay-content"> <div class="content-box"> <div class="inside-content-box"> <i class="fa fa-search-plus fa-3x"></i> </div> </div> </div> </a> </div> </div> <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"> <div class="image-wrapper"> <a href="http://dummyimage.com/800x600/f2f2f2/606060&text=galleryimage11" data-title="image 11" data-lightbox="rocket launch"> <img src="http://dummyimage.com/320/f2f2f2/606060&text=galleryimage" alt="" class="img-responsive"> <div class="image-overlay-content"> <div class="content-box"> <div class="inside-content-box"> <i class="fa fa-search-plus fa-3x"></i> </div> </div> </div> </a> </div> </div> <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"> <div class="image-wrapper"> <a href="http://dummyimage.com/800x600/f2f2f2/606060&text=galleryimage12" data-title="image 12" data-lightbox="rocket launch"> <img src="http://dummyimage.com/320/f2f2f2/606060&text=galleryimage" alt="" class="img-responsive"> <div class="image-overlay-content"> <div class="content-box"> <div class="inside-content-box"> <i class="fa fa-search-plus fa-3x"></i> </div> </div> </div> </a> </div> </div> </div> <!-- additional rows button --> <div class="row additionalrows"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> <a href="#" class="btn button-primary" id="moreimagesbtn"><i class="fa fa-chevron-circle-down"></i>additional images</a> </div> </div> </div> </div> </div> </section> here jquery utilizing far after calling jquery:
$(function(){ var imagerowcount = $('.imagerow').length; if (imagerowcount >= 3){ $('.container').children('.imagerow:nth-child(n+4)').hide(); $('#moreimagesbtn').on('click', function(e){ e.preventdefault(); $('.imagerow:nth-child(n+4)').nextall(':lt(2)').slidedown().fadein().show(); }); } }); any appreciated!
//hid first 2 rows $('.imagerow:gt(1)').hide() //on click show first 2 hidden rows $('#moreimagesbtn').click(function(){ $('.imagerow').not(':visible').slice(0,2 ).show(); })
Comments
Post a Comment