Replace img attribute on click

by nickywaites

HTML

<div id="images"> 
    <img id="one" src="http://lh4.ggpht.com/_ocJ2Rp6jZrM/Ta-gb-DRP0I/AAAAAAAAJVA/dJNOAjslqTc/s144-c/B%C3%A9nye%20338.jpg" alt="">
    <img id="two" src="http://lh5.ggpht.com/_puONnqd6-RM/Tan7dC3P_5I/AAAAAAAAOWY/JRvlDzcueyw/s144-c/1.%20006.jpg" alt="" >
    <img id="three" src="http://lh6.ggpht.com/_dEPJ1Aon18Y/TatJ2FpWLtI/AAAAAAAAO9E/pAEXT_RXUm8/s144-c/DSCN8060.jpg" alt="" >
    <img id="four" src="http://lh3.ggpht.com/_7gz05UEECHM/Ta9PxCWbJYI/AAAAAAAALEU/5ie-GuwwHy0/s144-c/IMG_9801.jpg" alt="" >
    <img id="five" src="http://lh4.ggpht.com/_wbt-HBCa0og/TaTZKsbVOLI/AAAAAAAABfc/DjaLdLNIJis/s144-c/wiseowl.jpg" alt="" >
</div>

JavaScript

/*
We have a list of images
    Only 4 can be gifs at one time

OnClick change image from jpg to gif
*/


$(function() {

    var gifs = $('img[src$=gif]').get(); // Get all gifs
    $('#images img').click(function() {
        console.log(gifs);
        var img = $(this);
        var src = img.attr('src');
        img.attr('src', src.replace('jpg', 'gifs'));
        if (gifs.indexOf(this) === -1) {
            gifs.push(this);
        }
        if (gifs.length > 4) {
            var last = gifs.shift();
            src = $(last).attr('src');
            $(last).attr('src', src.replace('gif', 'jpg'));
        }
        console.log(gifs);
    });

});