Load itemsĀ in js when loaded document, also load more items when scroll to the end of page.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
<?php $images = get_field('portfolio'); if( $images ): ?> <div class="container-fluid"> <div class="row"> <!-- Save images to js variable --> <script>var images = JSON.parse('<?= wp_json_encode( $images ) ?>'); </script> <script> jQuery(function ($) { var win = $(window); var countArray = images.length; var count = 0; <!-- Function of looping images --> function loopImages() { var index = 0; for (count; count <= images.length; count++) { var list = "<a href='" + images[count].url + "' class='hidden-xs-up item portfolio-item " + ( images[count].width > images[count].height ? 'col-md-6 col-12' : "col-md-3 col-12") +"'> <img class='lazy' src='" + images[count].url + "' alt='" + images[count].alt + "' /><span class='cont'>" + images[count].caption + "<br>" + ( images[count].description ? '<span>Photographer: </span>' + images[count].description + "</span>" : "") + "</a> "; $('.content .container-fluid .row').append(list); index++; $('.overlay-s').removeClass('h'); fancybox_init(); setTimeout(function() { $('.overlay-s').addClass('h'); $('.portfolio-item').removeClass('hidden-xs-up'); }, 3000); if (index%9 == 0) { count++; return; } } } loopImages(); $('.overlay-s').addClass('h'); $('.portfolio-item').removeClass('hidden-xs-up'); $('.page-template-page-portfolio .content').addClass('bind'); // Each time the user scrolls win.scroll(function() { // End of the document reached? if ($(document).height() - win.height() == win.scrollTop()) { loopImages(); } }); }); function fancybox_init(){ $("a[href*='.jpg'], a[href*='.png']").attr('rel', 'fancybox').fancybox({ maxWidth : 800, maxHeight : 600, fitToView : true, width : '70%', height : '70%', autoSize : true, closeClick : false, openEffect : 'none', closeEffect : 'none' }); } </script></div> </div> <div class="overlay-s h"></div> <?php endif; ?> |