horizontal div images scroll dynamic width

Question

i have a problem with my horizontal image scroll. There are many threats with some solutions but there is no solution that worked for me :(

Here is the link with my image gallery: http://lichtspielfotografie.com/portrait/

The css that i use:

.photos {
         width:10000px;
         height:100%;   
         position:absolute;
         left:0;
         margin-left:0; 
         margin-top: 0; 
}
#scroll{ 
        position:absolute;  
        width:100%;   
        height:100%;  
        overflow-x:scroll; 
        overflow-y:hidden; 
        margin-left:0; 
        left:0;
        margin-top: -8,25%; }

And the html/php:

         <div id="scroll">
            <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
            <script src="http://lichtspielfotografie.com/wp-content/themes/lichtspiel/js/jquery.mousewheel.js?ver=3.8.1"></script>
            <script type="text/javascript">
                    $(document).ready(function() {
                    $('html, body, *').mousewheel(function(e, delta) {
                    this.scrollLeft -= (delta * 20);
                    e.preventDefault();
                    });
                });
            </script>

            <div class="photos">
                <?php global $post; 
                $src = '';
                $breite='0px';
                $args = array( 
                'post_type' => 'attachment', 
                'numberposts' => -1, 
                'post_mime_type' => 'image', 
                'post_status' => null, 
                'post_parent' => $post->ID );
                $attachments = get_posts($args); ?>

                <?php
                if ($attachments) {
                    foreach ( $attachments as $attachment ) {
                        $src = wp_get_attachment_image_src( $attachment->ID, "attached-image");
                        if ($src) {
                            echo '<img src='.$src[0];'';
                            } 
                        echo ' height="100%"/img> &nbsp;';                          
                    }}
                ?>    
           </div> 
        </div>
    </main><!-- #main -->
</div><!-- #primary -->

I hope you can help me to geht the width of the photos dynamic. I'm very frustrated with this problem.

Answer 1

You could try selecting all the images and the iterate through all of them, getting their width and then adding it to the container. Also please note if you have some margin between elements(images) you should add that as well.

// get all images in an html collection
var imgs = document.getElementsByTagName('img');
// initialize sum variable for holding all the images width sum
var sum = 0;
// iterate the html collection
for(var i = 0; i < imgs.length; i++) {
   // wait for images to load
   imgs[i].onload(function() {
      sum += imgs[i].width;
   });
}
// add the width to the parent element
document.getElementsByClassName('photos')[0].style.width = sum;

Answer 2

First of all practice more your css styling and html. Remove the &nbsp from between your photos and put a margin between them. You can do something like:

.photos img {
    margin: 0 2px;
}

in your css for example. Then to calculate the total width of your images you will need javascript.

You need to loop through your images and get the width of each of them. If we assume that you took my advice and you have replaced the &nbsp with css styling (margin), we will use .outerWidth . This will get the image width with it's paddings and border width. If we put true like so: .outerWidth(true) it will get the margins too. That's what we need. For looping through the images we will use .each() .

Here we go:

var totalWidth = 0;

$('.photos > img').each(function() {
    totalWidth += $(this).outerWidth(true);
});

Now we just need to set the new width to the images container:

$('.photos').css('width', totalWidth + 'px');

If you have some other questions feel free to ask. Good luck :)

EDIT:

You have to do this when your html loads. You have the functionality already in your code. It's the $(document).ready(function() {}); . Here you put all the javascript code that you want to be executed after the html loads.

So in this case you will do:

$(document).ready(function() {

    // ... other js code here ...

    var totalWidth = 0;

    $('.photos > img').each(function() {
        totalWidth += $(this).outerWidth(true);
    });

    // ... other js code here ...

});

You can also put your code into another js file and load it in your head below your js libraries like jQuery.