pressfoto search

by matmuchrapna

HTML

<script src="http://tympanus.net/Development/AutomaticImageMontage/js/jquery.montage.min.js"></script>
var pressfoto = [
    '//storage.pressfoto.ru/2010.05/15275717585969493c793dd85e5fa6e1a082b0f791_b.jpg',
    '//storage.pressfoto.ru/2011.12/9383118806e2c593d054cee3c02ae04e958f28234f_b.jpg',
    '//storage2.pressfoto.ru/2012.07/1402543880631795c277b513ddf65f6afac6c4e63e4_b.jpg',
    '//storage.pressfoto.ru/2010.04/1389851341baf76e68ddec82b84493ea6eb59b3515_b.jpg',
    '//storage.pressfoto.ru/2010.01/44462163195cde34e1302b5396a910fc553c488b6_b.jpg',
    '//storage2.pressfoto.ru/2012.08/141693181864e186f363da1a9163a8d9dd05431c99d_b.jpg',
    '//storage.pressfoto.ru/2011.04/605104228886f8e1fd54bf67da40a510d9f44bc4ff_b.jpg',
    '//storage.pressfoto.ru/2011.05/6418828230b4b92178c04edf8f90cf74245d002733_b.jpg',
    '//storage2.pressfoto.ru/2012.07/13997008806a3c7de1ad6d9912252eb21825c6499e1_b.jpg',
    '//storage.pressfoto.ru/2011.01/455818206798a6afa481eac1a30536adec82f89655_b.jpg',
    '//storage.pressfoto.ru/2011.03/5431292156a01e0a9695ad33ba8e19ac43295290d0_b.jpg',
    '//storage2.pressfoto.ru/2012.09/146964788061ac15d11eca22bbdafd7da16378709f3_b.jpg',
    '//storage.pressfoto.ru/2010.05/1663692272df67c1eca692374d655451791467b254_b.jpg',
    '//storage.pressfoto.ru/2011.02/49935920673f6962dee1de2a82243a2e282cba6df0_b.jpg',
    '//storage2.pressfoto.ru/2012.09/14744281142001c5005253f3a215ff5292e54d39672c_b.jpg',
    '//storage.pressfoto.ru/2011.05/657227823003648c7ef5fa4c58c914b6887004130f_b.jpg',
    '//storage.pressfoto.ru/2011.04/6283842067ba1e4246faa9db5f257723850a4de6d9_b.jpg',
    '//storage2.pressfoto.ru/2012.09/149381588060b4e6fd094ad878638ba41788f383e65_b.jpg',
    '//storage.pressfoto.ru/2010.11/3628523420a90534af465827533f2b8676c1d03c22_b.jpg',
    '//storage.pressfoto.ru/2011.10/8552298661ec7bd519f7c65214b82e8c59dd57b41e_b.jpg',
    '//storage2.pressfoto.ru/2012.08/14442558806021005339e9d2021cd3ced84b1231594_b.jpg',
   ...

CSS

.am-wrapper{
    float:left;
    position:relative;
    overflow:hidden;
}
.am-wrapper img{
    position:absolute;
    outline:none;
}

JavaScript

var $container   = $('#am-container'),
    $imgs        = $container.find('img').hide(),
    totalImgs    = $imgs.length,
    cnt          = 0;

$imgs.each(function(i) {
    var $img = $(this);
    $('<img/>').load(function() {
        ++cnt;
        if( cnt === totalImgs ) {
            $imgs.show();
            $container.montage({
                fillLastRow                : true,
                alternateHeight            : true,
                alternateHeightRange    : {
                    min    : 350,
                    max    : 500
                }
            });

            /*
             * just for this demo:
             */
            $('#overlay').fadeIn(500);
        }
    }).attr('src',$img.attr('src'));
});