2013-04-18 3 views
0

Я использую FlexSlider2 на узле с фиксированной шириной, но пытаюсь сделать кнопку для просмотра «полного экрана». В принципе, вся кнопка делает изменение div контейнера основного сайта на 100% ширину и скрыть другие элементы сайта.Обновление ширины FlexSlider2, когда ширина контейнера установлена ​​на 100% при нажатии кнопки

Вот мой код для функции баттона:

$('.fullscreen-toggle').click(function() { 
     $('#container').toggleClass('full-width', 0); 
     $('#header').toggleClass('hide', 0); 
     $('#menu').toggleClass('hide', 0); 
     $('#lower-content').toggleClass('hide', 0); 
     $('.fullscreen-toggle span').toggle(); 
    }); 

Проблемы я имею FlexSlider только регулирует ширину изображения/слайд, когда окно изменяет размер или когда он принес и не в фокусе (путем изменения вкладок браузера). Я не смог найти способ «перезагрузить» FlexSlider при нажатии кнопки, чтобы изображения были полной ширины. Сейчас, когда кнопка нажата несколько слайдов показаны в то время, как это: http://img202.imageshack.us/img202/5308/flexsliderresizeissue.jpg

Вещи, которые я пробовал:

  • Этот плагин: benalman (ком)/проекты/JQuery-плагин изменения размера-/(ссылка удалена для удовлетворения мин требования к компоновке)
  • Использование .load(), чтобы попытаться обновить скрипт (не думаю, что предполагаемая функция .load, но я пытался так или иначе: S)
  • Включая $('#slider').flexslider(); снова вызовите функцию .click()
  • Другое вариации вещей выше, а может быть, некоторые я даже не могу вспомнить! Я был здесь некоторое время

Прошу прощения Я не могу ссылаться непосредственно на сайт, но если вам нужна дополнительная информация, пожалуйста, дайте мне знать.

Update Добавление $('ul.slides li').css("width", $('#container').width() + "px"); к моей функции .click получает изображения, чтобы быть правильный размер, однако, две горки по-прежнему показываются сразу. На этот раз они раскололись пополам.

Update 2 FlexSlider CSS: http://pastebin.com/zVk82NkK

ответ

0

На flexslider.css файле у вас есть эта строка?

.flexslider .slides img {width: 100%; display: block;} 

Я думаю, что сохранение width: 100% достаточно иметь только 1 изображение скользящего каждый раз.

+0

У меня есть это в моем CSS, я добавил свой CSS-файл к исходному вопросу. Если теги li имеют ту же ширину, что и контейнер, который решил проблему с моим размером, теперь он просто возвращает слайды. – Preston

 Смежные вопросы

  • Нет связанных вопросов^_^