2013-04-18 1 views
0

고정 너비 사이트에서 FlexSlider2를 사용하고 있지만 "전체 화면"보기를위한 버튼을 만들려고합니다. 기본적으로 모든 버튼은 기본 사이트의 컨테이너 div를 100 % 너비로 변경하고 다른 사이트 요소를 숨기는 것입니다. 여기 버튼 클릭시 컨테이너 너비가 100 %로 설정된 경우 FlexSlider2 너비 업데이트

버튼의 기능에 대한 내 코드입니다 :

$('.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 "다시로드"방법을 찾을 수 없었습니다. 지금 버튼을 여러 슬라이드는 다음과 같이 한 번에 표시됩니다 클릭 할 때 :

  • 이 플러그인 : benalman (COM)/프로젝트/JQuery와 크기 조정 - 플러그인을 내가 해봤

    http://img202.imageshack.us/img202/5308/flexsliderresizeissue.jpg/스크립트를 다시 시도 할 .load()를 사용

  • (링크는 분 링크 요구 사항을 충족하기 위해 제거) (즉 .load의 의도 된 기능이라고 생각하지 않지만, 어쨌든 시도 : S)
  • $('#slider').flexslider();을 포함 .click() 함수를 다시 호출하십시오.
  • 기타 위의 것들의 변형, 그리고 어쩌면 내가 기억조차 수없는 일부! 나는 잠시 동안 여기에 머물렀다.

나는 사과한다. 사이트에 직접 링크시킬 수는 없지만, 더 이상 필요한 정보가 있으면 알려주세요.

업데이트 내 .click 기능에 $('ul.slides li').css("width", $('#container').width() + "px");를 추가하면 이미지가 있지만,이 개 슬라이드는 여전히 한 번에 표시되는 적당한 크기,로 가져옵니다. 이번에는 반으로 완벽하게 나뉩니다.

업데이트 2 Flexslider의 CSS : flexslider.css 파일에 http://pastebin.com/zVk82NkK

답변

0

당신이이 줄을해야합니까?

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

width: 100%을 유지하면 매번 1 개의 이미지 만 슬라이드하는 것으로 충분하다고 생각합니다.

+0

내 CSS에는 원본 CSS 파일도 추가했습니다. li 태그를 컨테이너가 내 크기 문제를 해결하는 것과 동일한 너비로 만들면 이제 슬라이드가 올바르게 다시 정렬됩니다. – Preston

관련 문제