Question

I got this idea, in a NO CMS site… i have about 50 images,, that cannot be display all at once. SO the idea, is to display the first 15, then click on next, hide those and display the next 15 etc etc

Hot to do that with ajax or wit php and css ?

count, add class hidden, and show ?

---

or another way to do that… in php or jQuery, how to get the first 15 element of a div with class”image” and add class : showimage, then on click NEXT button : remove all the class showimage, and show the image 16 to 30

---

code look like that :

<div id="gallery2"> <!-- Gallery de photos --> 

<a href="ia/new_01.jpg" class="highslide" onclick="return hs.expand(this)">
<img src="timthumb.php?src=ia/new_01.jpg&amp;h=<?php echo $size ?>" title="Cliquer pour agrandir" 
alt="Pont Neuf - Ile de la Cité - Paris - France - Aquarelle <br> Conception personnelle"/></a>

<a href="ia/new_02.jpg" class="highslide" onclick="return hs.expand(this)">
<img src="timthumb.php?src=ia/new_02.jpg&amp;h=<?php echo $size ?>" title="Cliquer pour agrandir" 
alt="Studebaker Hawk - Concept rétro <br> Conception personnelle"/></a>

<a href="ia/new_03.jpg" class="highslide" onclick="return hs.expand(this)">
<img src="timthumb.php?src=ia/new_03.jpg&amp;h=<?php echo $size ?>" title="Cliquer pour agrandir" 
alt="Corvette - Concept rétro <br> Conception personnelle"/></a>

<a href="ia/new_04.jpg" class="highslide" onclick="return hs.expand(this)">
<img src="timthumb.php?src=ia/new_04.jpg&amp;h=<?php echo $size ?>" title="Cliquer pour agrandir" 
alt="Thunderbird - Concept rétro <br> Conception personnelle"/></a>

<a href="ia/new_05.jpg" class="highslide" onclick="return hs.expand(this)">
<img src="timthumb.php?src=ia/new_05.jpg&amp;h=<?php echo $size ?>" title="Cliquer pour agrandir" 
alt="Les autos de mon père <br> Conception personnelle"/></a>

and on and on and on…. for 50 images

Answer 1

You dont neex ajax for this. You can put all the image urls in an JS array and when a then next button is clicked you just hide the current 15 images and add new 15 images from the array. You render them on the fly. So images will be rendered by browser on the fly.

var images=[]; // it'll contain images.
var ptr=0;
var length = 15;
function show(offset, count){
    for(var i=offset;i<offset+count;i++){
        // add image images[i] in the image container.
    }
}
function next(){
    // empty the image container
    ptr+=length
    show(ptr, length);
}

show(0, length); // initial call to display first chunk of images

Now for the next button you just add next function as click handler.