[Solved] Force divs/website to Horizontally scroll without fixed width

[rudifer]

Brilliant! You’re a life saver!!

[rudifer]

one more question, how or where would i go about adding image border to the total width of page? the number of images is unknown, but 1px left and right of each image.

[Mottie]

In the demo, adjust the value of this line

total = 10, // include extra width padding here

to the number of images x 2 to add some extra width so the images don’t wrap. The 10 there is pretty much arbitrary. To add the 1 px border, just add it to the css:

#container img {

float: left;

border: 1px solid #000; /* or whatever color you want */

}

[rudifer]

oh awesome! didn’t see that comment on total=… perfect!

[emilyflannery]

A year later….
This is great. Instead of the images resizing based on full width/height of browser window, how could you set a height of the image container as a percentage of page height, and have the images resize within that container?

[robecki]

hi this is great.
I’ve been looking this for some time. I’ve got one question! I want to load new content with images into div, how can I this implement with click() event. I tried something like this, but it doesn’t work properly. The images are resized correctly, but size of the body doesn’t resize.

$(document).ready(function () {

        $(document).on('click', "a.link", function () {

            var url = $(this).attr('href');                 

            $('#container') 
            .load(url + '#cnt', function () {


                ratios = $('#container img').map(function () {
                    return $(this).width() / $(this).height();

                });

        adjustSize();

            }).resize(
        adjustSize)
        .hide().fadeIn('slow');
            return false;
        });
    });

Can someone please help me!

Thanks

[robecki]

Thanks for the quick reply. I think we didn’t understand each other, probably because of my poor English.
I would like this:
when I click on the link, for example “portfolio”, the entire content of images are replaced by images of portfolio.

I have an example of what I mean:

http://www.juliatrotti.com/editorial

In my example, script loads new content, but it doesn’t resize “body” to the right size (it stays the same size, no matter of number of images or size of the images)

The fading efect is great.

Thank you very much for the answer,

Robert

[robecki]

wow, it’s works. Thank you very very much.
I am really grateful
Have a nice day.
Robert

[robecki]

Hi, script works like a charm, but I have another question for you if you are willing to answer. I’m having a lot of pictures in content and all images are loading at the same time, what takes quite a long time. How can I fix the code, that the images would loaded individually, like plugin “lazy load”, which is loading images simultaneously when they come on the screen. I tried everything, but it doesn’t work because I need to set out first the width and height of the image which I don’t know until is loaded in order to work properly.

Thanks

Robert

[Author]

Posts