Изменение размера содержимого в зависимости от размера изображения динамическая загрузка - PullRequest
Новая
       0

Изменение размера содержимого в зависимости от размера изображения динамическая загрузка

0 голосов
/ 16 ноября 2011

У меня есть div, который пуст при загрузке страницы, но список изображений динамически вставляется в него из скрытой функции массива формы. Эти изображения не имеют одинаковую высоту, но я сделал их одинаковой высоты, используя css и jQuery.

Я бы хотел, чтобы контейнерный контейнер был таким же широким, как и список изображений с полем в 1 пиксель справа. Этот код работает, но, по-видимому, он пропускает хотя бы одно изображение, поэтому его ширина неверна. 

$(document).ready(function(){

 $(function () {
  var images = $("#itemDescription").val();
  var imageArray = images.split(',');
  $.each(imageArray, function(index, value) { 
  var imageHtml = "<img class='horizontal' height='584' style='display:none' src='" + value + "" +"' alt />";
  $("#galleria-content").append(imageHtml);
 });

 var accum_width = 0;
 var images = 0;
 var imagesactive = $('#galleria-container #galleria-content').find('img').length;

 $('#galleria-container #galleria-content').find('img').each(function() {
   jQuery(this).height(584);
   jQuery(this).width('auto');

   $(this).load(function(){
     var width = jQuery(this).width();
     var height = jQuery(this).height();
     accum_width += $(this).width();
     $('#galleria-content').width(accum_width);
   });
});

     $('#galleria-container #galleria-content').find('img').fadeIn();

  })
});

Я просто хочу знать, есть ли лучшее решение для загрузки изображений в div, измените размеры изображений до 584px в высоту с переменной шириной и разместите изображения слева с полем 1px вправо; и они должны содержаться внутри div; ширина которого равна сумме всех изображений и полей.

Большое спасибо за любую помощь, которую я получаю. Всего наилучшего

1 Ответ

0 голосов
/ 16 ноября 2011

Вы делаете много ненужных манипуляций с DOM, когда, благодаря звукам, вы можете достичь того, что вы хотите, просто с помощью CSS. Установка изображений на { height: 584px; width: auto; display: block; float: left; margin: 0 0 0 1px; } и предоставление содержащему div overflow: hidden, чтобы разбудить его до всплывающих изображений, должно быть достаточно.

Таким образом, вам просто нужно добавить изображения с помощью JavaScript и не беспокоиться о попытке выяснить ширину;

РЕДАКТИРОВАТЬ: добавлена ​​очищенная версия кода вопроса 

$(function () {

  var images = $("#itemDescription").val().split(',')
    , $container = $("#galleria-content")
    , imgCount = images.length
    , totalWidth = 0;

  $.each(images, function(index, value) {

    var $img = $("<img class='horizontal' height='584' style='display:none' src='" + value + "" +"' alt />");
    $img.load(updateWidth);
    $container.append($img);

  });

  function updateWidth () {

    totalWidth += $(this).outerWidth(true);
    imgCount--;

    if (imgCount === 0) { // all images loaded

      $container
        .width(totalWidth)
        .find('img')
        .fadeIn();

    }

  };

});
...