jQuery - изменить размер нескольких объектов, масштабировать ширину и высоту - PullRequest
Новая
       27

jQuery - изменить размер нескольких объектов, масштабировать ширину и высоту

1 голос
/ 13 сентября 2010

Эй, ребята, я должен извиниться за свою неопытность здесь, я работаю над этим около часа, но я настолько новичок в jQuery, что даже не знаю что искать для ...

У меня есть страница (http://milliondollarextreme.tv/), на которой размещено несколько видео YouTube. Я пытаюсь изменить размер видео, чтобы динамически заполнить разделы, в которые они помещены, в соответствии с шириной этого раздела (чтобы у меня была возможность изменить его позже.) Просто введите - width: 100%; - будет работать для ширины, но видео не сохраняют свое соотношение сторон. Поэтому я использовал следующий скрипт: 

#container {width:30%;} 
<script>
var $vidPlayer = $("embed");
var aspect = $vidPlayer.attr("height") / $vidPlayer.attr("width");
    $(window).resize(function() {
          var playerWidth = $("#container").width();
          $vidPlayer
            .width(playerWidth)
            .height(playerWidth * aspect);
    }).trigger("resize");
</script>

В настоящее время это не реализовано на моей странице, но работает для отдельных сообщений. Для «постоянной ссылки», однократной записи, это работает отлично. Тем не менее, в индексе видео, где будет размещаться 5-10 видео одновременно, он будет работать только в том случае, если все видео имеют одинаковое соотношение сторон. Если первое видео 4: 3 (ширина: высота), то все последующие видеопроигрыватели изменяют размер 4: 3, даже если предполагается, что видео 16: 9 или что-то еще.

Я предполагаю, что причина этого в том, что скрипт ищет «embed», и как только он находит его, он прекращает поиск. Он имеет переменные и применяет их ко всем последующим видеопроигрывателям независимо от размеров.

Допустим, у меня есть десять видео на странице. Пять из них являются вашими стандартными изображениями формата 4: 3, с размерами около 640x480 пикселей. Остальные пять имеют соотношение сторон 16: 9; 1280x720 пикселей. Мне нужно, чтобы этот скрипт проверял каждый из них, а затем изменял размер в индивидуальном порядке, верно?

Мне нужно использовать сценарий, потому что я могу изменить макет дизайна (ширину деления) в будущем, и у меня будет около сорока или более видео для публикации.

Я даже не знаю как или какие функции использовать здесь. Похоже, что .each или .Live могут быть хорошими ставками, и я попытался бросить их туда безрезультатно. Любая помощь будет принята с благодарностью.

1 Ответ

1 голос
/ 13 сентября 2010

Если вы хотите, чтобы значения ширины рассчитывались независимо для каждого из элементов embed, вы можете использовать функцию .each() для их итерации.

var $vidPlayer = $("embed");
var playerWidth = $("#container").width();

$vidPlayer.each(function(){
    var $this = $(this);
    var aspect = $this.attr("height") / $this.attr("width");

    $(window).resize(function() {
          $this.width(playerWidth).height(playerWidth * aspect);
    }).trigger("resize");
});
...