상황은 다음과 같습니다. 컨텐츠 유형 슬라이드가 있고 세 개의 최신 슬라이드를 슬라이드 쇼에 표시하려고합니다. 슬라이드를 순환하고 페이저로 슬라이드를 제어 할 수 있어야합니다. 호출기는 슬라이드 쇼에서 특정 슬라이드로 이동할 수 있도록 총알 / 링크 / 이미지가 3 개 있어야합니다. 또한 호출기에는 슬라이드 쇼에서 슬라이드를 증가 및 감소시키기 위해 왼쪽 및 오른쪽 화살표가 있어야합니다.
이 기술은 웹에서 어디에서나 사용되지만 뷰 및 뷰 슬라이드 쇼를 사용하여 올바르게 설정하는 방법을 알 수 없습니다. Drupalites를 경험 한 모든 사람들의 조언은 환영합니다.
건배, 레
답변:
(1) 필수 모듈 (버전 : Drupal7.0)
Views
Views Slideshow
Chaos tool suite
Libraries
Link Field
Token
(2) 모듈 설치
Drupal7에서는 관리자 섹션에서 모듈을 설치할 수 있지만 Druapl 사이트에서 모듈 링크를 검색 한 다음 관리자 모듈 설치 영역에 붙여 넣기를 복사해야하기 때문에이 새로운 기능에는 아무런 의미가 없습니다. 미친. 그들이 작은 검색 기능을 워드 프레스와 같은 것으로 만들면 너무 좋았을 것입니다. 어쨌든 나는 그것을 오래된 방식으로 다운로드하고 istall 할 것입니다 (나는 여전히이 오래된 방법을 권장합니다).
Drupal 사이트에서 모든 모듈을 다운로드하고 yoursitename / sites / all / modules 디렉토리에 설치하십시오. http://www.yoursitename.com/node#overlay=admin/modules로 이동하여 다음과 같이 이러한 모듈을 활성화 하십시오 .
(1)보기 (2)보기 UI (3)보기 슬라이드 쇼 (4)보기 슬라이드 쇼 :주기 (5) 카오스 도구 (6) 링크 (7) 라이브러리 (8) 토큰 (선택 사항) (3) 이미지 캐시 생성
Drupal7에서 imagecache는 핵심 모듈의 일부이며 이미지 스타일로 이름이 지정됩니다. 여기에서 전체 크기 슬라이더 이미지 용 이미지와 썸네일 이미지 용 이미지 캐시를 만들어 보겠습니다. 이 자습서에서는 전체 크기 슬라이더 이미지에 935x293 (픽셀) 크기를, 축소판 이미지에 210x100 (픽셀) 크기를 사용합니다. 참고 : 이러한 구성은 지연 될 수 있습니다.
http://www.yoursitename.com/node#overlay=admin/config/media/image-styles로 이동하여 새 스타일 추가 링크를 클릭하십시오. (1) 이미지 스타일 이름을 지정하고 새 스타일 만들기 버튼을 클릭하십시오 (2). ) 다음 구성 화면에서 원하는 새 스타일을 선택한 다음 추가 버튼을 클릭합니다 (이 자습서에서는 크기 조정 스타일을 선택합니다). (3) 다음 화면에서 너비와 높이를 설정하고 효과 추가 버튼을 클릭합니다. 설정은 선택한 스타일에 따라 달라질 수 있습니다. 너비를 935로, 높이를 293 픽셀로 설정했습니다.
썸네일 이미지에 대해서도 동일한 과정을 수행하십시오. (축소판 이미지 크기의 경우 너비를 210으로, 높이를 100 픽셀로 설정합니다.) (4) 새 컨텐츠 유형 작성
새 컨텐츠 유형을 작성하십시오. 대시 보드 메뉴 표시 줄에서 구조를 클릭 한 다음 컨텐츠 유형을 클릭 한 후 새 컨텐츠 유형 추가 링크를 클릭하십시오.
(1) 사람이 읽을 수있는 이름을 지정하고, 이름을 Featured Slider로 지정했습니다 (기계 이름은 사람이 읽을 수있는 이름을 기준으로 자동 생성됨). (2) 간략한 관련 설명을 제공합니다. (3) 제출 양식 설정, 기본 설정 (4) 게시 옵션, 게시 만 확인 함 (다른 모든 설정은 선택하지 않음) (5) 디스플레이 설정, authour 및 날짜 정보를 확인하지 않았습니다. (6) 댓글 설정, 숨겨진 (사용 안함)을 설정합니다. (7) 메뉴 설정, 기본 설정으로 둡니다. (8) 저장 및 필드 추가 버튼을 클릭합니다. (5) 새 필드 만들기
여기이 예에서는 두 개의 파일링 만 생성하며 이미지 필드와 링크 필드입니다. 슬라이더 이미지를 업로드 할 때 이미지 필드를 사용하고 슬라이더를 링크 할 사용자 지정 링크를 만들기 위해 링크 필드를 사용합니다.
이미지 필드 설정
(1) Label: Slider Image
(2) Field: slider_image
(3) Field type: image
(4) Widget (form element): image
(5) Click Save button, and on the field settings page leave default settings and click on Save field settings button.
(6) On the image field configuration settings page you can configure as you wish.
필 요에 따라이 필드를 설정하고 슬라이더 이미지라는 파일 디렉터 이름을 추가하여이 이미지가 다른 이미지와 분리되어 배열되도록했습니다. 여기에서 최대 업로드 크기 및 해상도를 설정할 수 있습니다. altd alt and title 필드가 있으며 마지막으로 설정 저장 버튼을 클릭하십시오.
동일한 방법을 사용하여 링크 필드도 작성하십시오.
링크 필드 설정 (1) 레이블 : 슬라이더 링크 (2) 필드 : slider_link (3) 필드 유형 : 링크 (4) 위젯 (양식 요소) : 링크 (5) 저장 버튼을 클릭하십시오. 링크 필드 구성의 경우 모든 설정을 기본 설정으로 두십시오. . 아래와 같이 필드를 다시 정렬했습니다. 제목 필드 이미지 필드 링크 필드 본문 필드 (필요하지 않은 경우이 필드를 제거 할 수도 있음) 디스플레이 관리 디스플레이 관리 탭에서 필드 출력을 표시하는 방법을 구성 할 수 있습니다. 링크 필드를 숨김으로 설정하고 이미지 레이블을 숨김으로 설정했습니다. Drupal7 : 필드 관리 (6) 피처 슬라이더 내용 만들기
이 튜토리얼을 위해 4 개의 추천 슬라이더 컨텐츠를 작성했습니다.
(1) 컨텐츠 추가 링크를 클릭합니다. (2) 주요 슬라이더 컨텐츠 만들기 (3) 적절한 제목 이름을 지정하십시오. (4) 슬라이더 이미지를 업로드하십시오. (5) 대체 및 제목 필드 이름을 지정하십시오. (6) 원하는 링크 제목과 URL을 지정하십시오. SEO가 연결되는 URL 별칭을 원할 경우 경로 필드를 제외한 모든 인접 설정을 기본값으로 유지하십시오. (8) 내용을 저장하십시오.
같은 방법으로 더 많은 추천 슬라이더 컨텐츠 만들기 (네 가지 컨텐츠를 만들었습니다) (7) 새보기 만들기
이제 새로운 슬라이드 쇼보기를 만들 차례입니다. 대시 보드 메뉴에서 구조를 클릭 한 다음보기를 클릭하십시오.
(1) 새 뷰 추가 링크를 클릭합니다. (2) 뷰 이름 제공, Featured Slider로 이름이 지정되었습니다 (기계 이름이 자동 생성됨). (3) 적절한 뷰 설명 제공 (4) Featured Slider 유형의 컨텐츠 표시를 선택합니다 (콘텐츠 유형 이름). (5) Pge 작성을 선택 취소하고 블록 작성을 선택하십시오. (6) 블록 제목을 입력하고 페이지 당 "필드"항목의 "슬라이드 쇼"로 표시 형식을 선택하십시오 (표시 할 항목 수를 입력 할 수 있음) (7 ) "계속 및 편집"단추를 클릭하십시오.보기 필드 설정 먼저 링크 필드를 추가하십시오 (링크가 모든 것을 올바르게 작동하려면 첫 번째 필드 여야 함). 추가 아이콘을 클릭하고 필터 그룹에서 컨텐츠 컨텐츠 추가 : 링크를 클릭하십시오. 다음 구성 창에서 "추가 및 구성 버튼"에서 "라벨 작성"을 선택 취소하십시오. "검사" 표시에서 제외합니다. "적용 버튼"을 클릭하십시오
다음으로 이미지 필드를 추가하겠습니다. 추가 아이콘을 클릭하고 필터에서 그룹을 선택하십시오. 컨텐츠 선택 컨텐츠 추가 : 이미지 필드 (참고 :이 슬라이더 컨텐츠 유형에 대해서만 생성 한 이미지 필드를 선택하십시오.) "추가 및 구성 다음 구성 창에서 "버튼을 클릭하십시오."레이블 작성 "을 선택 해제하십시오.
포맷터 : 이미지 (컬러 박스 또는 라이트 박스를 설치 한 경우 여기에서 선택할 수 있습니다!) 이미지 스타일 : 전체 크기 (위 단계에서 생성 한 이미지 캐시 선택) 이미지 링크 : 없음 스타일 설정 : 기본 설정 그대로두기 결과 동작 : 떠나기 기본 설정 다시 쓰기 결과 : 확인이 필드를 링크로 출력 링크 경로 : [view_node] (참고 : 약간 스크롤하면 Core Token 모듈에서 생성 된 대체 패턴을 볼 수 있습니다 (링크 필드를 먼저 설정하지 않은 경우) 여기에 링크 필드 옵션이 표시되지 않음) [view_node] 만 복사 한 다음 위로 스크롤하여 링크 경로 필드에 붙여 넣습니다.) "적용 단추"를 클릭하십시오.
마지막으로 썸네일에 하나 이상의 필드가 필요하므로 추가 아이콘을 클릭하고 필터 그룹에서 컨텐츠 추가 컨텐츠 : 이미지 필드를 선택하십시오 (참고 :이 슬라이더 컨텐츠 유형에 대해서만 생성 한 이미지 필드를 선택하십시오). 다음 구성 창에서 "추가 및 구성 버튼"을 클릭하고 "레이블 만들기"를 선택 취소하고 디스플레이에서 예외 확인, 포맷터 : 이미지 (컬러 박스 또는 라이트 박스를 설치 한 경우 여기에서 선택할 수 있습니다!) 이미지 스타일 : 썸네일 (이미지 캐시 선택) 위 단계에서 생성했습니다. 이미지 연결 : 없음 스타일 설정 : 기본 설정 그대로두기 결과 동작 : 기본 설정 그대로두기 결과 다시 쓰기 : 확인이 필드를 링크로 출력 링크 경로 : [view_node] (참고 : 스크롤을 조금씩 스크롤하고 Core Token 모듈에 의해 생성 된 대체 패턴을 볼 수 있습니다.t 링크 필드를 먼저 볼 수 없습니다. 여기에서 링크 필드 옵션을 볼 수 없습니다.) [view_node] 만 복사 한 다음 위로 스크롤하여 링크 경로 필드에 붙여 넣으십시오.) "적용 버튼"을 클릭하십시오.
뷰 필터 설정
views3에서 필터는 처음에 생성되며 콘텐츠 유형 및 기타 설정을 선택합니다! 추가 파일링이 필요한 경우 여기에서 만들 수 있습니다!
뷰 스타일 설정
슬라이드 쇼 형식 | settigs와 다음 설정 창에서 아래와 같이 설정하십시오. (1) 목록 유형 : 순서가없는 목록 (2) 래퍼 클래스 : 기본 설정 그대로두기 (3) 스타일> 스킨 : 청각 장애 (4) 슬라이드> 슬라이드 쇼 유형 :주기 (5)주기 옵션 jQuery주기 플러그인을 다운로드하고 jquery를 복사해야합니다. sites / all / libraries / jquery.cycle에 대한 cycle.all.min.js는 http://malsup.com/jquery/cycle 에서 플러그인을 찾을 수 있습니다 .
간단하게 한국어 / site 디렉토리에 "libraries"라는 폴더를 생성 한 다음 해당 디렉토리에 "jquery.cycle"이라는 다른 폴더를 생성하고 마지막으로 "jquery.cycle.all.min.js"만 복사하여 붙여 넣기 이 디렉토리.
(6) 이동 : 페이드 (7) 동작 : 호버에서 일시 중지 (8) Internet Explorer 조정 : 기본 (9) 위젯 : 위와 아래 중 하나 또는 둘 다를 선택할 수 있습니다 (아래에서 아래와 같이 고급 설정을 선택합니다). (10) Bottom Widgets> Pager> Pager type : Fields (11) Pager field : Content : Image (참고 : 두 필드의 이름이 동일하기 때문에 엄지 손가락에 마지막으로 추가 한 항목은 실수하지 않습니다.) (12) 슬라이드 활성화 호출기 호브에서 일시 중지 : 선택, 컨트롤 및 슬라이더 카운터는 선택하지 않은 상태로 둡니다. (13) 적용 버튼을 클릭하십시오.
형식 표시 필드 설정
Inline fields: Choose the thumbnail field as inline.
Click Apply button. (Note: Well it actually doesn't change much in appearance but it does change in the code. Next step use the firebug and find the class and add some styles to display properly.)
(8) 사용자 정의 지역 만들기 (선택적 단계)
(1) 해당 폴더에서 your_theme_name.info 파일을 열고 아래와 같이 새 지역을 추가하십시오. regions [featured_slider] = 추천 슬라이더. .info 파일을 저장하십시오. (2) 테마 page.tpl.php 파일을 열고 아래 그림과 같이 슬라이드를 표시 할 위치에이 코드를 추가하십시오.
page-front.tpl.php와 같은 사용자 정의 프론트 페이지 템플리트를 작성하여 기본 page.tpl.php 템플리트를 변경할 필요가 없습니다. [9] 블록 활성화 및 구성
이제이 블록은 블록 사용 안함 영역에 표시되므로 대시 보드 메뉴에서 구조> 블록으로 이동하여 테마 기본 영역 또는 작성한 사용자 정의 영역 (featured_slider)으로 블록을 활성화하십시오. (지역은 사용중인 테마에 따라 다릅니다.)
블록 구성 설정 블록을 활성화 한 후 블록을 구성 할 수있는 링크가 표시되므로 구성 링크와 아래 설정 한 설정 섹션을 클릭하십시오.
(1) 블록 제목 (blobk 제목을 표시하지 않으려면) 만 입력하십시오. (2) 다시 활성화 된 테마별 지역 설정을 모두 얻습니다. 가시성 설정 (3) 페이지> 특정 페이지에 블록 표시 :이 페이지가 앞 페이지에만 표시되도록 나열된 페이지 만 선택하고 입력하십시오. THUMBNAILS를 인라인으로 표시하는 CSS 팁
이러한 CSS 코드를 테마 스타일 시트에 추가하여 축소판을 인라인으로 표시하십시오. .views-slideshow-controls-bottom .views-slideshow-pager-field-item {float : left; 여백 : 20px 6px; } 필요한 조정을하십시오.
이 Mustardseed Media 팟 캐스트 : 슬라이드 쇼보기 테마를 살펴보십시오 .
팟 캐스트 동안 Bob은 뷰 슬라이드 쇼의 기본 사항과 출력 테마를 지정하는 방법을 안내합니다. Drupal 6을 기반으로하지만 대부분의 기본 사항과 수업이 동일하다고 생각합니다. 단지 약간의 CSS로, 슬라이드 쇼는 볼 수 톤을 더 나은. 멋진 슬라이드 쇼를 원한다면이 팟 캐스트를 보는 것이 좋습니다.
더 많은보기 슬라이드 쇼 (예 : 축소판 그림)를 알고 싶다면 다음과 같은 유용한 자습서를 참조하십시오. http://www.brightwebsitedesign.com/how-to-install-views-slideshow-module-on-drupal7