Support Forum
I want add paging for my images .kindly help me.Below is my code.
function bee_quick_gallery_front_view()
{
$bee_quick_gallery_images = rwmb_meta( 'bee_qucik_gallery_images', 'size=full' ,867 );
?>
<div id="bee-quick-grid-gallery" class="bee-quick-grid-gallery">
<section class="beegrid-wrap">
<ul class="beegrid">
<li class='beegrid-sizer'></li><!-- for Masonry column width -->
<?php
if ( !empty( $bee_quick_gallery_images ) ) {
foreach ( $bee_quick_gallery_images as $bee_quick_gallery_image ) {
echo "
<li>
<figure>
<img src='{$bee_quick_gallery_image['url']}' alt='{$bee_quick_gallery_image['alt']}' />
</figure>
</li>
";
}
}
?>
</ul>
</section><!-- // bee_quick_slideshow -->
<section class="bee_quick_slideshow">
<ul>
<?php
if ( !empty( $bee_quick_gallery_images ) ) {
foreach ( $bee_quick_gallery_images as $bee_quick_gallery_image ) {
echo "
<li>
<figure>
<img src='{$bee_quick_gallery_image['url']}' alt='{$bee_quick_gallery_image['alt']}' />
<figcaption><h3>Letterpress asymmetrical</h3><p>Chillwave hoodie ea gentrify aute sriracha consequat.</p></figcaption>
</figure>
</li>";
}
}
?>
</ul>
<nav>
<span class="icon nav-prev"></span>
<span class="icon nav-next"></span>
<span class="icon nav-close"></span>
</nav>
<div class="info-keys icon">Navigate with arrow keys</div>
</div><!-- // bee-quick-grid-gallery -->
</div>
<?php
}
add_shortcode('bee-gallery','bee_quick_gallery_front_view');
How to you want your pagination to be?
hi thanks for your response. i added some code and it works fine now.
function add_paging_for_gallery( $bee_quick_paging ){
$bee_quick_paging[] = "bee_gallery_page";
return $bee_quick_paging;
}
add_filter( 'query_vars', 'add_paging_for_gallery' );
function bee_quick_gallery_front_view($bee_gal_id)
{
extract(shortcode_atts(array(
'id' => ''
), $bee_gal_id));
$bee_quick_gallery_images = rwmb_meta( 'bee_qucik_gallery_images', 'size=full' ,$id);
$bee_gal_limit = 9;
$bee_gal_total = count($bee_quick_gallery_images);
$bee_gal_pages = ceil($bee_gal_total / $bee_gal_limit);
$bee_gal_result = ceil($bee_gal_total / $bee_gal_limit);
$bee_gal_current = isset($_GET['bee_gallery_page']) ? $_GET['bee_gallery_page'] : 1;
$bee_gal_next = $bee_gal_current < $bee_gal_pages ? $bee_gal_current + 1 : null;
$bee_gal_previous = $bee_gal_current > 1 ? $bee_gal_current - 1 : null;
$bee_gal_offset = ($bee_gal_current - 1) * $bee_gal_limit;
$bee_gal_items = array_slice($bee_quick_gallery_images, $bee_gal_offset, $bee_gal_limit);
?>
<div id="bee-quick-grid-gallery" class="bee-quick-grid-gallery">
<section class="beegrid-wrap">
<ul class="beegrid">
<li class='beegrid-sizer'></li><!-- for Masonry column width -->
<?php
if ( !empty( $bee_gal_items ) ) {
foreach ( $bee_gal_items as $bee_quick_gallery_image ) {
echo "
<li>
<figure>
<img src='{$bee_quick_gallery_image['url']}' alt='{$bee_quick_gallery_image['alt']}' />
</figure>
</li>
";
}
}
?>
</ul>
</section><!-- // bee_quick_slideshow -->
<section class="bee_quick_slideshow">
<ul>
<?php
if ( !empty( $bee_gal_items ) ) {
foreach ( $bee_gal_items as $bee_quick_gallery_image ) {
echo "
<li>
<figure>
<img src='{$bee_quick_gallery_image['url']}' alt='{$bee_quick_gallery_image['alt']}' />
<figcaption><h3>Letterpress asymmetrical</h3><p>Chillwave hoodie ea gentrify aute sriracha consequat.</p></figcaption>
</figure>
</li>";
}
}
?>
</ul>
<nav>
<span class="icon nav-prev"></span>
<span class="icon nav-next"></span>
<span class="icon nav-close"></span>
</nav>
<div class="info-keys icon">Navigate with arrow keys</div>
</div><!-- // bee-quick-grid-gallery -->
</div>
<?php echo "<p>(Page: ". $bee_gal_current . " of " . $bee_gal_result .")</p>"; ?>
<? if($bee_gal_previous): ?>
<a href="<?php echo get_permalink(); ?>?bee_gallery_page=<?= $bee_gal_previous ?>">Previous</a>
<? endif ?>
<? if($bee_gal_next) : ?>
<a href="<?php echo get_permalink(); ?>?bee_gallery_page=<?= $bee_gal_next ?>">Next</a>
<? endif ?>
<?php
}
add_shortcode('beequick','bee_quick_gallery_front_view');