Слайд-шоу Flexslider 2 горизонтальное и вертикальное окно просмотра/масштабирование в браузере

Я только что интегрировал Flexslider 2 в чрезвычайно простую веб-страницу портфолио.

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

Вот пример страницы, которую я разместил в Интернете:

http://www.thisisneil.com/rg-e/index.html

В настоящее время слайд-шоу идеально масштабируется браузером по горизонтали, но из-за размера страницы и расположения слайд-шоу нижняя часть изображения имеет тенденцию обрезаться. Чтобы решить эту проблему, я бы хотел, чтобы слайд-шоу также масштабировалось по вертикали вместе с окном, но я просто не могу заставить его это сделать!

вот пример того, как я в конечном итоге хотел бы, чтобы мой Flexslider вел себя: (независимо от размера окна слайд-шоу всегда будет переформатироваться для отображения полного изображения).

http://eastphotographic.com/artist.php?region=uk&div=Photography&artist=Linda%20Brownlee

До сих пор я пытался настроить значения CSS Flexslider, а также содержать весь ползунок в отдельном наборе div для изменения размера окна. Я явно что-то не так делаю!

Мы будем очень признательны за любые мысли.


scale css slideshow viewport flexslider
person Neil W    schedule 10.07.2013    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Просто добавьте smoothHeight: true при вызове flexslider.

<script type="text/javascript">
$(window).load(function(){
    $('.flexslider').flexslider({
        animation: "slide", // set animation to slide
        smoothHeight: true // auto-adjust to fit the height of images
    });
});

person Mihai Alex    schedule 10.07.2013
comment
Михай, спасибо за ответ. SmoothHeight уже должен быть вызван как в голове (как показано ниже), так и включен в исходном скрипте Flexslider… Все еще не радостно — я не уверен, что smoothHeight действительно имеет какое-то отношение к масштабированию области просмотра? Спасибо еще раз. - person Neil W; 10.07.2013
comment
‹script type=text/javascript charset=utf-8› $(window).load(function() { $('.flexslider').flexslider({ анимация: слайд, smoothHeight: true, controlContainer: .flex-container, start: function(slider) { $('.total-slides').text(slider.count);}, after: function(slider) { $('.current-slide').text(slider.currentSlide); } }); }); ‹/скрипт› - person Neil W; 10.07.2013
comment
Нил, ваш слайдер загружается неправильно. Я только что нашел ошибку в вашем вызове: TypeError: $(...).flexslider не является функцией - после: function(slider). Я буду искать исправление. - person Mihai Alex; 10.07.2013
comment
Нил, я скопировал/вставил ваш код/ресурсы в скрипку (кроме jquery.js) jsfiddle.net/VKG4y и это работает! Поэтому я думаю, что проблема в загрузке jquery. На первый взгляд я заметил, что вы дважды загружаете jquery (с вашего сервера и с googleapis). Кроме этого, ваш таргетинг на controlContainer: .flex-container, но в вашем html классом является flexcontainer. - person Mihai Alex; 10.07.2013
comment
Привет, Михали, спасибо за вашу помощь сегодня, я только что проверил ссылку на скрипку, изображение все еще не масштабируется (чтобы поместиться в окне без обрезки), как я пытаюсь это сделать. Я посмотрю, смогу ли я решить это сегодня вечером ... вам, возможно, придется терпеть меня, как вы, возможно, догадались, я новичок в javascript! еще раз спасибо. Нил. - person Neil W; 10.07.2013
comment
Только что снова проверил скрипку, используя адаптивный дизайн Firefox. Результаты здесь htmldoc.net/examples/pics/fiddle.jpg Как вы можете видите, это работает на моем конце. - person Mihai Alex; 10.07.2013