michael-d
9/11/2017 - 12:48 AM

Tumblr Style Gallery - http://www.nickk.com.au/glamour.html

Tumblr Style Gallery - http://www.nickk.com.au/glamour.html

<script>
$(function(){
//CREATE A DIV CONTAINING FOUR COLUMNS
$("<div class='imageColumns'/>").insertAfter('#section1.textSection');
$("<div class='imageColumn imageColumn0'/>").appendTo('.imageColumns');
$("<div class='imageColumn imageColumn1'/>").appendTo('.imageColumns');
$("<div class='imageColumn imageColumn2'/>").appendTo('.imageColumns');
$("<div class='imageColumn imageColumn3'/>").appendTo('.imageColumns');
       

//SPLIT IMAGES INTO 4 COLUMNS
var count = 0;
$(".contentImgRow .item").each(function(){
    
    
    //GET BACKGROUND IMG URL
    var bg = $(this).find(".contentImg").css('background-image');
    bg = bg.replace('url(','').replace(')','');
    bg = bg.replace("\"", '');
    bg = bg.replace("\"", '');
    //CREATE IMAGE
    var img = "<img src='" + bg + "'/>";
    //INSERT IMAGE
    $(this).find(".contentImg").html(img);
    //CLEAR CSS BACKGROUND
    $(this).find(".contentImg").css('background-image','');
    //MOVE IMAGE TO COLUMN
    $(this).appendTo(".imageColumn" + count);
    
    //INCREMENT COUNT
    count++;
    if(count == 4){
        count =0;
    }
    
});
});
</script>
.imageColumn .item{
    width:100%;
    
}
.imageColumn .contentImg {
    width:100%;
    height:auto!important;
    padding:0!important;;
}

.imageColumn img {
    width:100%;
}


.imageColumn  {
    width:25%;
    padding:0 5px;
    box-sizing:border-box;
    display:inline-block;
}

.imageColumns {
    width:100%;
    max-width:1300px;
    margin:auto;
    display:flex;
}