jQuery on click count files in folder

Question

I'm trying to find a way to do a count of images within a specific folder. I have several gallery buttons which all have a unique id. I need to use that id to find how many images are in the folder relating to that ID. Here's the code I'm using:

HTML:

<div class="popup resizeHeight"><a href="#" style="color:#FFFFFF;" class="closeMiniGallery"><img src="close.jpg" /></a><img src="" /></div>
<div class="overlay"></div>

<a href="#" class="menuGallery"><span class="locId">T1</span>GALLERY</a><br />
<a href="#" class="menuGallery"><span class="locId">T2</span>GALLERY</a>

CSS:

.popup{
    position:fixed;
    top: 35px;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
    width:95%;
    max-width:600px;
    height:300px;
    background:#ffffff;
    border:1px solid #cccccc;
    z-index:1000;
    display:none;
    max-height:400px;
}
.overlay{
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:#3e86b5;
    display:none;
    z-index:999;
    opacity:0.9;
    filter:alpha(opacity=90);
}
.closeMiniGallery{
    position:absolute;
    top: -26px;
    right:-1px;
    text-align:center;
    background:#000000;
}
.resizeHeight{
    bottom:5%;
    height:auto !important;
}
.locId{
    display:none;
}

jQuery:

$(document).ready(function(){
    $('.menuGallery').each(function(){
        var locationId = $(this).children('span').text();
        $(this).attr('id','gallery'+locationId);
    });
    $('.menuGallery').click(function(){    
        var miniGallery = $(this).attr('id');
        miniGallery = miniGallery.replace("gallery", "");
        console.log(miniGallery);

        $('.popup').fadeIn('fast');
        $('.popup > img').attr('src', '/images/properties/'+miniGallery+'/large/1.jpg');
        $('.overlay').fadeIn();
        return false;
    });

    $('.closeMiniGallery').click(function(){
        $('.popup').fadeOut('fast');
        $('.overlay').fadeOut();
        return false;
    });

    $('.overlay').click(function(){
        $('.popup').fadeOut('fast');
        $('.overlay').fadeOut();
        return false;
    });
});

Any help with this would be great, I'm trying to make this as self maintainable as possible. My next stage is going to be something like:

jQuery:

$('.menuGallery').click(function(){ var imageCount = // Number of files in /images/'+$(this).children('span').text()+'/thumbs/

// Then render out images

..... });

I'm just looking for a way to count files like the pseudo example above.

Answer 1

I managed to get this working using a bit of jQuery and PHP.

PHP:

$imageGallery = $_GET['LocId'];

$directory = 'images/'.$imageGallery.'/thumb/';
$files = glob($directory . '*.jpg');

if ( $files !== false ){
    $filecount = count( $files );
    echo $filecount;
}else{
    echo 0;
}

jQuery:

$('.menuGallery').each(function(){ var locationId = $(this).children('span').text(); $(this).attr('id','gallery'+locationId); }); $('.menuGallery').on('click',function(){
var miniGallery = $(this).attr('id'); console.log(miniGallery) miniGallery = miniGallery.replace("gallery", "");
console.log(miniGallery)

    $('.imageCount').load("mini-gallery.php?LocId="+miniGallery);

    var counter = 0;
    setInterval(function(){


        if(counter < 1){
            var imageCount = parseInt($('.imageCount').text());     
            console.log(imageCount);

            for ( var i = 1; i < (imageCount+1); i++ ) {
                $('.galleryImages').append('<img src="images/'+miniGallery+'/thumb/'+i+'.jpg" />');
            }
            counter = 1;
        }else{

        }           
    },500);

    $('.popup').fadeIn('fast');
        $('.overlay').fadeIn();

    return false;
});


$('.closeMiniGallery').click(function(){
    $('.popup').fadeOut('fast');
    $('.overlay').fadeOut();
    $('.galleryImages').empty();
    return false;
});

$('.overlay').click(function(){
    $('.popup').fadeOut('fast');
    $('.overlay').fadeOut();
    $('.galleryImages').empty();
    return false;
});

Answer 2

You could write a simple PHP script to count the images

echo iterator_count(new DirectoryIterator('/path/to/images'));

And call it from your jquery script

$.get('count_images.php', function(data) {
  alert(data);
});