0

I am using metabox's advance file uploader to upload images.

<?php  $images = rwmb_meta( 'tj_file_advanced', 'type=image&size=YOURSIZE');



    foreach ( $images as $image ) { ?>

        <div class="col-md-4">
            <div class="boxe">
                <?php echo "<img src='{$image['full_url']}'/>";     ?>
            </div>
        </div>

<?php } ?> 

<div class="loadmore" onclick="loadMore()"></div>

Currently, I have only uploaded 3 images, so it only shows 3 images. I want to upload more images. It should only show 3 images in the beginning and after i click the load more it should show another 3 images and show on.

1

It can be done just following regular way to use Ajax in WordPress.

https://codex.wordpress.org/AJAX_in_Plugins

First register a script file and also create an AJAX Call.

wp_enqueue_script( 'meta-ajaxscript', get_stylesheet_directory_uri() . '/js/ajax-init.js', array( 'jquery' ), '', true );
wp_localize_script( 'meta-ajaxscript', 'ajaxMeta', array(
    'ajaxurl' => admin_url( 'admin-ajax.php' )
));

Second, Wrap your metadata with a parent element by class or ID

<div id="metaWrapper">

    <?php  
    $images = rwmb_meta( 'tj_file_advanced', 'type=image&size=YOURSIZE'); 
    $ppp = 3;
    foreach (array_slice($images, 0, $ppp) as $image) { ?>
    <div class="col-md-4">
        <div class="boxe">
            <?php echo "<img src='{$image['full_url']}'/>"; ?>
        </div>
    </div>
    <?php } ?>

</div>

<div class="loadmore"></div>

Third write down some ajax call script into ajax-init.js.

$( ".loadmore" ).on( "click", function(e) {
  e.preventDefault();

  var $container = $('#metaWrapper'),
      ppp = 3,
      number = $container.find( '> .col-md-4').length,
      page = number / ppp;

  $.ajax({
    url: ajaxMeta.ajaxurl,
    type: 'post',
    data: {
      'page': page,
      'ppp': ppp,
       action: 'meta_fetch'
    },
    success: function( response ) {
      if(response == "")
          {
            // no content was found
            $('.loadmore').hide();
          }
          else
          {
            console.log(response);
            $container.append( response );
          }
      }
  });

  return false;
});

Now set up a PHP function to handle the AJAX request.

add_action( 'wp_ajax_nopriv_meta_fetch', 'wpex_metadata_fetch' );
add_action( 'wp_ajax_meta_fetch', 'wpex_metadata_fetch' );

function wpex_metadata_fetch() {

  $images = rwmb_meta( 'tj_file_advanced', 'type=image&size=YOURSIZE');

  $page = (int) $_POST['page'];
  $ppp  = (int) $_POST['ppp'];

  foreach (array_slice($images, $page*$ppp, $ppp) as $image) { ?>
  <div class="col-md-4">
      <div class="boxe">
          <?php echo "<img src='{$image['full_url']}'/>"; ?>
      </div>
  </div>
  <?php
  } 

  die();

}

hope it makes sense and happy Codding!

0

ok. so your loadMore() should do something like these:

function loadMore() {
    var showing = $('#id').find( '> .col-md-4').length;
    $.ajax(
        // making ajax call to get more images passing variable showing
        success: function( data ) {
        $('#id').append( data );
        }
    );
}

and your php (ajax) script should return something like:

$images = rwmb_meta( 'tj_file_advanced', 'type=image&size=YOURSIZE');
$count = count( $images );
$offset = (int) $_POST['showing'];
for( $i = $offset; $i <= $count; $i++ ) {
    echo '<div class="col-md-4">
            <div class="boxe">
                <img src="' . $images[$i]['full_url']. '" />
            </div>
        </div>';
}
die();

Note that you should wrap all your col-md-4 in #id

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.