I produced a horizontal WordPress layout for any photo portfolio site by setting the width on our bodies with the sum width of all of the images. This code only labored basically did a setTimeout before the photos where loaded otherwise the look width wouldn't be calculated and put into your body before the page was rejuvenated. The jQuery I authored is extremely ugly and merely barely works, utilizing an if else statement to create an extended timeout when you will find more images.

It is possible to method to add the width from the photos towards the body tag because the images are loaded, therefore the page just grows while they're loading? As well as give a loader presen as the next photo is loading?

Would this be superior accomplished with php and when just how?

This is actually the code I authored:

jQuery(document).ready(function($) {

// gets all photos in a post
var allpics = $('body.single .long li');

// get descirption field and set width
var descript = $('body.single .description');
$(descript).width(400);

// then get the number of columns and multiply by 300, add this to the description width
var descriptW = $(descript).width();
var postCol = $('.post-column').length;
descriptW = descriptW + ((postCol * 300) - 100);
$(descript).width(descriptW);   


// get video field
var videoFrame = $('body.single .video iframe').css('display', 'block');
var video = $('body.single .video');;

var allstuff = $.merge( allpics, descript, video);
var n = $(allstuff).length;

// gets first photo in list and then hide all content in a post except the first photo
var firstpic = $(allpics).first();
$(allpics).not(firstpic).hide();
$(descript).hide();
$(video).hide();


if (n <= 4) {
// add a huge width on body tag for first 4 items 
$('body.single').css('width', '3500px');

// After 2 seconds get width of all content and add to body tag
setTimeout(function() {
    var w = 0;

    $(allstuff).each(function() {
        w += $(this).outerWidth();
    });

    if ($('.video iframe').length ) {
        w+=1000;
    } else {
    w+=400;
    }

    w+=descriptW;   

    $('body.single').css('width', w + 'px');

    // fades in the rest of the photos and description after body width is added
    $(allstuff).fadeIn('500');
    $(video).fadeIn('500');

}, 2000);

} else if (n > 4 && n <= 9) {
// add a huge width on body tag for first 9 items   
$('body.single').css('width', '4000px');

// After 4 seconds get width of all content and add to body tag
setTimeout(function() {
    var w = 0;

    $(allstuff).each(function() {
        w += $(this).outerWidth();
    });

    if ($('.video iframe').length ) {
        w+=1000;
    } else {
    w+=500;
    }

    w+=descriptW;

    $('body.single').css('width', w + 'px');

    // fades in the rest of the photos and description after body width is added
    $(allstuff).fadeIn('500');

}, 4000);


} else if (n > 9 && n <= 20) {
allstuffx = allstuff.slice(0,15)

// add a huge width on body tag for first 20 items 
$('body.single').css('width', '12500px');

setTimeout(function() {     
    $(allstuffx).fadeIn('500');
    $(video).fadeIn('500');
}, 2000);   

// After 10 seconds get width of all content and add to body tag
setTimeout(function() {
    var w = 0;

    $(allstuff).each(function() {
        w += $(this).outerWidth();
    });

    if ($('.video').length ) {
        w+=1000;
    } else {
    w+=1000;
    }

    w+=descriptW;

    $('body.single').css('width', w + 'px');

    // fades in the rest of the photos and description after body width is added
    $(allstuff).fadeIn('500');

}, 10000);

} else {    
allstuffx = allstuff.slice(0,23)

// add a huge width on body tag for first 23 items
$('body.single').css('width', '16800px');

setTimeout(function() {     
    $(allstuffx).fadeIn('500');
    $(video).fadeIn('500');
}, 2000);   

// After 25 seconds get width of all content and add to body tag
setTimeout(function() {
    var w = 0;

    $(allstuff).each(function() {
        w += $(this).outerWidth();
    });

    if ($('.video').length ) {
        w+=1000;
    } else {
    w+=400;
    }

    w+=(descriptW + 400);

    $('body.single').css('width', w + 'px');

    // fades in the rest of the photos and description after body width is added
    $(allstuff).fadeIn('500');

}, 25000);
};  

});