재단 사진

이전 : 국제 교류 재단 패널

다음 : 재단 드롭 다운 메뉴

재단은 응답 이미지를 제공, 당신은 팝업 음료 썸네일 이미지를 만들 수 있습니다 :

»시도

썸네일

에서 <img> 요소는 외부 추가 <a> 앵커 링크로 요소 사진을.

에서 <a> 태그 추가 .th 축소판과 같은 수준의 사진. 밝은 파란색 프레임이 나타납니다의 상단에 마우스를 이동 :

예

href가 = "paris.jpg" 클래스 = "th">
<IMG SRC = "paris.jpg"고도 = "파리">
</ A>

»시도

	응답 이미지 기본 스타일에 응답하여 이미지 재단. 우리는 예를 들어, 이미지 줌 효과의 페이지 크기를 보려면 브라우저를 재설정 할 수 있습니다.

필렛 사진

우리는 할 수 있습니다 .th 클래스가 추가 .radius 필렛 클래스 축소판을 설정합니다 :

예

href가 = "paris.jpg" 클래스 = "th radius">
<IMG SRC = "paris.jpg"고도 = "파리">
</ A>

»시도

간결한 팝

재단은 쉽게 이미지 팝업을 달성 할 수있다.

에서 쉘 창을 만들려면 <ul> 요소 추가 .clearing-thumbs 클래스와 data-clearing 속성을. 에서 <ul> 사진을 추가 목록입니다.

참고 : 이미지 팝업 자바 스크립트가 필요합니다. 그래서 재단 JS를 사용하기 전에 초기화 될 필요가있다.

예

<UL 클래스 = "지우기 - 엄지 손가락 "데이터 지우기>
<리> <a의 HREF = "rock600x400.jpg" 클래스 = "th"> <IMG SRC ="rock200x100.jpg "> </ A> </ 리>
<리> <a의 HREF = "skies600x400.jpg" 클래스 = "th"> <IMG SRC ="skies200x100.jpg "> </ A> </ 리>
<리> <a의 HREF = "lights600x400.jpg" 클래스 = "th"> <IMG SRC ="lights200x100.jpg "> </ A> </ 리>
</ UL>

<! - 초기화 재단 JS ->
<스크립트>
$ (문서) .ready (함수 () {
$ (문서) .foundation ();
})
</ 스크립트>

»시도

이미지 텍스트 설명

당신은 추가 할 수 있습니다 data-caption 그림의 설명을 설정하는 각 사진에 속성을 :

예

»시도

	팁 : 같은 데이터 자막으로 HTML 요소에 데이터 캡션 속성을 추가 할 수 = "<H2> 강대 락 </ H2> <P> 노르웨이에 위치한 </ P>"