Check image extension jQuery to Insert JPG or GIF

Question

I was trying to get a flip-book to accept not only JPG files but also (animated) GIF files.
This is a simple question I guess, I'm sure that for some of it you will be very easy to figure out.
The main idea is to get the string of the file to check if it is a JPG or a GIF and then do:

img.attr('src', 'pages/' + page + '.jpg');

or

img.attr ('src', 'pages/' + page + '.gif');

Code (.js) coming from: http://www.turnjs.com/

function loadPage(page, pageElement) {

// Create an image element

var img = $('<img />');

img.mousedown(function(e) {
    e.preventDefault();
});

img.load(function() {

    // Set the size
    $(this).css({width: '100%', height: '100%'});

    // Add the image to the page after loaded

    $(this).appendTo(pageElement);

    // Remove the loader indicator

    pageElement.find('.loader').remove();
});

// Load the page

img.attr('src', 'pages/' +  page + '.jpg');

loadRegions(page, pageElement);

When I replace '.jpg' with '.gif' I'm than able to put GIF file into the flipbook but no JPG anymore.

I tried check the extension of the file with something like:

// Get file extension
function getExtension(filename) {
return filename.split('.').pop().toLowerCase();
}

function openFile(file) { 
switch(getExtension(file)) {
    //if gif
    case 'gif':
    alert('was gif');  
        /* handle */
        break;
    //if jpg
    case 'jpg':
    alert('was gif'); 
        break;
}

But It seems that I can't find a way to get the filename there. It should be placed there: openFile("somestring.gif") or openFile("somestring.jpg")

Maybe something like that:

//img.attr('src', 'pages/' +  page + '.jpg');
img.attr('src', 'pages/' +  page + '.' + extension );