установить минимальную и максимальную высоту лайтбокса, который переопределяет CSS при использовании кнопок «следующий / предыдущий»

Question

я сделал лайтбокс с комментариями.Контейнер изображения лайтбокса регулируется по ширине в соответствии с изображением.изображение меньше, чем 400 пикселей, тогда ширина лайтбокса равна 720, а если изображение больше 720 пикселей, то ширина лайтбокса равна 960. Но теперь проблема в том.Я использовал код Jquery для изменения размера контейнера изображения лайтбокса в соответствии с шириной изображения, но предположил, что первое изображение 400 пикселей, тогда размер лайтбокса составляет 720 пикселей, а если второе изображение больше 720 пикселей, то размер лайтбокса составляет 960 пикселей при переходе от первого изображения кСледующее / предыдущее изображение, нажав кнопку «Следующая / предыдущая», лайтбокс принимает ширину в соответствии с предыдущим изображением, а не шириной текущего размера изображения.

мой код jquery

  var tpWidth = 720;
  var tpWidthnew = 960; 
  if ( $('.tp-mainimage').width() > tpWidth ) $('#tp-lightboxactitem').width(tpWidthnew);

imageразмер (1024px) больше 720px, а затем размер лайтбокса составляет 960px

следующее изображение (ширина 180px) меньше 720px, а затем размер лайтбокса составляет 960px из-запредыдущее изображение размером с лайтбокс 960px

Answer 1

Это условие также должно присутствовать.

if ( $('.tp-mainimage').width() <= tpWidth ) $('#tp-lightboxactitem').width(tpWidth);

Также, если это не поможет, вам нужно будет дождаться загрузки .tp-mainimage (при условии, что оно загружается с помощью ajax).Поэтому вам нужно будет внести изменения в jquery после загрузки изображения.