Display 5 items of an array on the click of a button

Question

I have an array of items(image urls) in an array, i need it to display 5 at a time on the click of a button. I currently have it displaying the first 5:

edit: Only 5 must be loaded in the DOM on page load, then the next 5 on click etc

$smallSlides = '';
if (isset($backgrounds) && !empty($backgrounds)){
    foreach ($backgrounds as $bg) {
        $smallSlides .= $bg->getVersion()->getRelativePath() .', ';
        }
    }
$smallSlides = explode(',', $smallSlides);

<div class="small-slider">
    <ul id="gallery" class="gallery">
        <?php 
        $numSlidesCount = count($smallSlides);
        $items = 5;
        for ($i = 0; $i < $items; $i++) { ?>

            <?php ?>

            <li><a href="<?php echo $smallSlides[$i]; ?>" rel="external"><img src="<?php echo $smallSlides[$i]; ?>"></a></li>

        <?php } ?>
    </ul>
    <button>Click for more</button>
</div>

So on page load it displays the first 5 images, then when the user clicks the show more button it shows the next 5 underneath untill there are no more images to display.

http://stackoverflow.com/questions/17736786/jquery-load-first-3-elements-click-load-more-to-display-next-5-elements/17737287#17737287 — Tushar Gupta - curioustushar, Oct 15 '13 at 09:19
Tushar's suggestion should work for you, but you have to pay attention to what it does, because it seems that you are trying to mix JS and PHP. — mavrosxristoforos, Oct 15 '13 at 09:21
The idea was to generate the actual list items on click of a button so that only the first 5 load in the DOM, then the next 5 until end of items. The examples show the entire list upon load. — Rob Morris, Oct 15 '13 at 09:51
when you click on **click for more** link, you would like to display 5 records + previous records or just newer 5 records only?? — Chandresh M, Oct 15 '13 at 11:25

Display 5 items of an array on the click of a button

0 Answers0