Skip to content

Instantly share code, notes, and snippets.

@igorveremsky
Last active April 11, 2018 06:10
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save igorveremsky/359c9fcf88c16b358f8d2874f8ddb899 to your computer and use it in GitHub Desktop.
Save igorveremsky/359c9fcf88c16b358f8d2874f8ddb899 to your computer and use it in GitHub Desktop.
Post Gallery AJAX Loading Wordpress
<?php
/**
* Custom AJAX Action
*/
function load_more_post_gallery_image_callback() {
$url = wp_get_referer();
$post_id = url_to_postid( $url );
$imageInitialCount = intval( $_POST['imageInitialCount'] );
$imageLoadingCount = intval( $_POST['imageLoadingCount'] );
$postGalleryImageIdsString = get_post_meta($post_id, 'post_gallery', true);
$postGalleryImageIds = explode(',', $postGalleryImageIdsString);
$postGalleryImageLoadingIds = array_slice($postGalleryImageIds, $imageInitialCount, $imageLoadingCount);
//print_r($postGalleryImageLoadingIds);
foreach ($postGalleryImageLoadingIds as $postGalleryImageLoadingId) : ?>
<img src="<?= wp_get_attachment_image_url($postGalleryImageLoadingId, 'full')?>">
<?php endforeach;
// exit for not return 0 in response
wp_die();
}
add_action('wp_ajax_load_more_post_gallery_image', 'load_more_post_gallery_image_callback');
add_action('wp_ajax_nopriv_load_more_post_gallery_image', 'load_more_post_gallery_image_callback');
(function( $ ) {
"use strict";
var SITE = {};
/*---------------------------------------------*/
/* Load more post Gallery
/*---------------------------------------------*/
SITE.postGalleryLoadMoreBtnDom = $('.post-gallery-load-more-btn');
SITE.loadMorePostGallery = function() {
var imageTotalCount = SITE.postGalleryLoadMoreBtnDom.data('total-count'),
imageLoadingCount = SITE.postGalleryLoadMoreBtnDom.data('loading-count');
SITE.postGalleryLoadMoreBtnDom.click( function(e) {
e.preventDefault();
if (!$(this).hasClass('post-gallery-loading')) {
var imageInitialCount = parseInt($(this).attr('data-initial-count')),
imageLoadedCount = imageInitialCount + imageLoadingCount,
data = {
action: 'load_more_post_gallery_image',
imageInitialCount: imageInitialCount,
imageLoadingCount: imageLoadingCount
};
$.ajax({
type: "POST",
url: ajaxurl,
data: data,
beforeSend: function() {
SITE.postGalleryLoadMoreBtnDom.addClass('post-gallery-loading');
},
complete: function() {
SITE.postGalleryLoadMoreBtnDom.removeClass('post-gallery-loading');
},
success: function(postGalleryLoadedImagesHtml) {
$('.post-gallery').append(postGalleryLoadedImagesHtml);
//console.log(imageInitialCount, imageLoadingCount,imageLoadedCount);
if (imageTotalCount <= imageLoadedCount) {
SITE.postGalleryLoadMoreBtnDom.hide();
} else {
SITE.postGalleryLoadMoreBtnDom.attr('data-initial-count', imageLoadedCount);
}
}
});
}
});
};
/*---------------------------------------------*/
/* Init Functions
/*---------------------------------------------*/
$( document ).ready( function() {
if ( SITE.postGalleryLoadMoreBtnDom.length !== 0 ) {
SITE.loadMorePostGallery();
}
});
})( jQuery );
<div class="post-gallery">
<?php
$postGalleryImageIdsString = get_post_meta(get_the_ID(), 'post_gallery', true);
$postGalleryImageIds = explode(',', $postGalleryImageIdsString);
$postGalleryImageInitialCount = 2;
$postGalleryImageLoadingCount = 3;
$postGalleryImageTotalCount = count($postGalleryImageIds);
$postGalleryImageIndex = 0;
foreach ($postGalleryImageIds as $postGalleryImageId) : if ($postGalleryImageIndex == $postGalleryImageInitialCount) break; ?>
<img src="<?= wp_get_attachment_image_url($postGalleryImageId, 'full')?>">
<?php $postGalleryImageIndex++; endforeach; ?>
</div>
<?php if ($postGalleryImageTotalCount > $postGalleryImageInitialCount) : ?>
<div class="post-gallery-load-more-wrap">
<a class="post-gallery-load-more-btn" href="#"
data-initial-count="<?= $postGalleryImageInitialCount; ?>"
data-loading-count="<?= $postGalleryImageLoadingCount; ?>"
data-total-count="<?= $postGalleryImageTotalCount; ?>"></a>
</div>
<?php endif; ?>
/*
-----Post Gallery----
*/
.post-gallery img {
display: block;
width: 100%;
height: auto;
margin-top: 10px;
border: solid 1px #e6e6e6;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.post-gallery img:first-of-type {
margin-top: 0;
}
.post-gallery img:first-of-type {
margin-top: 0;
}
.post-gallery-load-more-btn {
display: block;
width: 88px;
height: 100px;
margin: 155px auto;
background: url("images/post-gallery-loading.png") no-repeat center;
background-size: contain;
}
.post-gallery-load-more-btn:not(.post-gallery-loading):hover {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.post-gallery-loading {
-webkit-animation: rotation 2s infinite linear;
}
@-webkit-keyframes rotation {
from {
-webkit-transform: rotate(-90deg);
}
to {
-webkit-transform: rotate(-449deg);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment