горизонтальный div изображения прокрутка динамическая ширина

Question

У меня проблема с моим горизонтальным прокруткой изображения. Есть много угроз с некоторыми решениями, но нет никакого решения, которое работало для меня :(

Вот ссылка с моей галереей изображений: http://lichtspielfotografie.com/portrait/

CSS-код, который я использую:

.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%; } 

И 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 --> 

Надеюсь, вы можете помочь мне увеличить ширину динамических фотографий. Я очень расстроен этой проблемой.

Answer 1

Прежде всего, больше всего занимайтесь своим стилем CSS и html. Удалите &nbsp между вашими фотографиями и поставьте промежуток между ними. Вы можете сделать что-то вроде:

.photos img { 
    margin: 0 2px; 
} 

в вашем css например. Затем, чтобы вычислить общую ширину ваших изображений, вам понадобится javascript.

Вам необходимо пройти через ваши изображения и получить ширину каждого из них. Если мы предположим, что вы приняли мой совет, и вы заменили &nbsp на css styling (margin), мы будем использовать .outerWidth. Это позволит получить ширину изображения с его прокладками и шириной границы. Если мы скажем так: .outerWidth(true), он также получит поля. Это то, что нам нужно. Для прокрутки изображений мы будем использовать .each().

Здесь мы идем:

var totalWidth = 0; 

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

Теперь нам нужно установить новую ширину контейнера изображения:

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

Если у вас есть другие вопросы, не стесняйтесь спрашивать. Удачи :)

EDIT:

Вы должны сделать это, когда ваш HTML нагрузки. У вас уже есть функциональность в вашем коде. Это $(document).ready(function() {});. Здесь вы помещаете весь код javascript, который вы хотите выполнить после загрузки html.

Так что в этом случае вы будете делать:

$(document).ready(function() { 

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

    var totalWidth = 0; 

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

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

}); 

Вы также можете поместить свой код в другой файл JS и загрузить его в голову ниже ваших JS библиотек, как JQuery.

Answer 2

Вы можете попробовать выбрать все изображения и перебрать их все, получить их ширину и затем добавить в контейнер. Также обратите внимание, если у вас есть некоторый запас между элементами (изображениями), вы также должны добавить это.

// 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;