goit js hw 07

우크라이나어, 영어와 같은 다른 언어로 읽으십시오.

수락 기준

• goit-js-hw-07 저장소가 작성되었습니다.
• 숙제에는 출력 파일의 두 가지 링크와 GitHub Pages 의 작업 페이지가 포함되어 있습니다.
• 콘솔에는 작업의 살아있는 페이지를 열 때 오류와 경고가 없습니다.
• 변수와 함수의 이름은 명확하고 설명 적입니다.
• 코드는 Prettier 사용하여 공식화됩니다.

파일 시작

• SRC 폴더에는베이스 마크 업 및 준비된 스타일로 파일을 시작할 수 있습니다. 프로젝트에 복사하십시오. 이렇게하려면이 저장소를 아카이브로 다운로드하거나 다운천 서비스를 사용하여 리포지토리에서 별도의 폴더를 다운로드하십시오.
• gallery-items.js 파일에는 이미지 정보가 포함 된 객체가 포함 된 galleryItems 배열이 포함되어 있습니다 : Small (미리보기), 원본 (대형) 및 설명. 우리는 이미 각 JS 프로젝트 파일에 연결했습니다.

작업 1- 이미지 갤러리

요소를 클릭 할 가능성이있는 갤러리를 만들고 모달 창에서 전체 크기의 이미지를보십시오. 갤러리의 데모 비디오를 참조하십시오.

Gallery-dmo.mp4

이 작업을 01-gallery.html 및 01-gallery.js 에서 완료하십시오. 몇 개의 하위 말로 분해하십시오.

1. galleryItems 데이터 배열 및 갤러리 요소를 기반으로 마크 업 생성 및 렌더링.
2. div.gallery 에서 대표단 구현 및 큰 이미지 url 수신합니다.
3. Basiclightbox 모달 창의 스크립트와 스타일을 연결합니다. JSDELIVR CDN을 사용하고 프로젝트에 라이브러리 파일 ( .min )을 추가하십시오.
4. 갤러리 요소를 클릭하여 모달 창을 열었습니다. 이렇게하려면 문서와 예제에 대해 알게됩니다.
5. 열기 전에 모달 창에서 src 요소 <img> 의 속성 값을 대체합니다. Basiclightbox 라이브러리의 예제와 함께 준비된 모달 창 표시를 사용하십시오.

갤러리 요소의 표시

원본 이미지 참조는 <img> 항목의 source 데이터 속성에 저장되고 href 링크에 표시되어야합니다. 이 템플릿에 포함 된 것들을 제외하고 다른 HTML 태그 또는 CSS 클래스를 추가하지 마십시오.

 < div class =" gallery__item " >
  < a class =" gallery__link " href =" large-image.jpg " >
    < img
      class =" gallery__image "
      src =" small-image.jpg "
      data-source =" large-image.jpg "
      alt =" Image description "
    />
  </ a >
</ div >

이미지가 링크에 랩핑되므로 기본적으로 사용자를 다른 페이지로 리디렉션합니다. 이 기본 동작 금지.

키보드에서 닫습니다

켈 작업에는 다음 기능이 필요하지 않지만 추가적인 연습이 될 것입니다.

Escape 키를 누른 후 모달 창의 폐쇄를 추가하십시오. 모달 창이 열려있는 한 키보드를 듣습니다. BasiclightBox 라이브러리에는 모달 창의 소프트웨어 폐쇄 방법이 포함되어 있습니다.

작업 2 SimpleLightbox 라이브러리

첫 번째 작업에서와 동일한 갤러리를 만들지 만 Simplelightbox 라이브러리를 사용하여 이미지를 클릭하고 모달 창을 발견 및 닫고 키보드로 이미지를 흔들게됩니다.

Simplelightbox- Demo.mp4

갤러리 카드를 약간 변경 하고이 템플릿을 사용해야합니다.

 < a class =" gallery__item " href =" large-image.jpg " >
  < img class =" gallery__image " src =" small-image.jpg " alt =" Image description " />
</ a >

이 작업을 02-lightbox.html 및 02-lightbox.js 에서 완료하십시오. 몇 개의 하위 말로 분해하십시오.

1. galleryItems 데이터 배열 및 갤러리 요소를 기반으로 마크 업 생성 및 렌더링. 첫 번째 작업에서 준비된 코드를 사용하십시오.
2. CDN CDNJ를 사용하여 스크립트 및 라이브러리 스타일을 연결합니다. simple-lightbox.min.js 및 simple-lightbox.min.css 의 두 파일에 링크를 추가해야합니다.
3. div.gallery 에서 갤러리의 요소를 작성하고 추가 한 후 라이브러리 초기화. 이렇게하려면 Simplelightbox 문서를 알게됩니다. 우선 사용 및 마크 업 섹션.
4. 문서화 섹션 "옵션"을보고 Alt alt 의 이미지에 서명 표시를 추가하십시오. 서명을 아래에서 나와 이미지가 열린 후 250 밀리 초 안에 나타납니다.