단일 노드에서 슬라이드 쇼보기

단일 노드의 이미지에서 슬라이드 쇼 작업을 수행하려고합니다. 이미지 필드에서 이미지가 업로드됩니다. drupal 7입니다. 새로운 컨텐츠 유형을 만들었습니다. 이제 모든 노드에서 하나의 이미지가있는 여러 노드의 슬라이드 쇼 만 있습니다. 이것은 잘 작동하지만 모든 단일 이미지에 새 노드를 추가하기에는 너무 문제가 있습니다.

뷰 이미지 필드 설정의 다중 필드 설정 아래 에서 "동일한 행에 모든 값 표시" 확인란 이 기본적으로 선택되어 있습니다. 이 확인란의 선택을 취소하면 각 이미지가 새 행에 배치되고 필요에 따라 작동합니다. 뷰는 최소한 버전 2 이후 로이 기능을 가지고 있지만 이전 버전에서는 약간 다른 것으로 보일 수 있습니다.

간단한 슬라이드 쇼를 위해이 방법을 좋아합니다. 모든 이미지를 하나의 노드 / 편집 페이지에서 다시 정렬 할 수 있습니다. 그러나 각 이미지가 어딘가에 링크되거나 대체 텍스트가있는 경우와 같이보다 복잡한 슬라이드 쇼의 경우 행당 하나의 노드를 사용하는 것이 가장 좋습니다.

필드 슬라이드 쇼 모듈은 다음 것을 적극 추천. 모든 이미지는 노드 내에 포함되며 (노드 부풀림 없음) jquery주기 (슬라이드 쇼와 동일)를 사용하여 동적 갤러리 및 슬라이드 쇼를 생성합니다.

최근에 간단한 갤러리로 사이트를 구축했으며 추가 슬라이드 쇼 모듈을 전혀 사용하지 않았습니다. 필요한 것은 jQuery Cycle 과 약간의 자바 스크립트로 사용자 정의 테마에 추가되었습니다. 이 사이트에는 사진을 다른 앨범에 할당하기위한 '사진'콘텐츠 유형과 '앨범'어휘가 있습니다. 보기는 앨범별로 필터링 된 사진 목록을 만듭니다. 내 테마에는 다음과 같은 js 파일이 있습니다.

(function($){

Drupal.behaviors.myAlbumSlideshow = {
  attach: function(){
    var slideshowContent = $('.view-fotoalbum.view-display-id-page_1>.view-content');

    slideshowContent.before('<div id="slideshow-prev">&lt;</div><div id="slideshow-next">&gt;</div>');

    slideshowContent.cycle({
      fx:       'scrollHorz',
      next:     '#slideshow-next',
      prev:     '#slideshow-prev',
      timeout:  0
    });

    var slideshowHeight = slideshowContent.height() + 'px';
    $('#slideshow-prev, #slideshow-next').css('lineHeight', slideshowHeight);
  }
}

})(jQuery)

CSS를 터치하면 완성됩니다.

.view-fotoalbum {
  width: 710px;
  margin-right: 10px;
}

.view-fotoalbum #slideshow-prev {
  color: #808080;
  border-right: 1px solid #808080;
  cursor: pointer;
  float: left;
  line-height: 300px;
  margin-left: -40px;
  text-align: center;
  width: 30px;  
}

.view-fotoalbum #slideshow-next {
  color: #808080;
  border-left: 1px solid #808080;
  cursor: pointer;
  float: right;
  line-height: 300px;
  margin-right: -40px;
  text-align: center;
  width: 30px;
}

추신. IMHO, 이미지 당 하나의 노드를 갖는 것이 항상 낫지는 않습니다. 이 접근 방식은 더 큰 유연성을 제공하지만 (예 : 하나의 이미지를 여러 슬라이드 쇼에 추가) 일부 최종 사용자에게 불필요한 유연성은 무의미한 복잡성입니다.

갤러리아 모듈 사용을 고려할 수 있습니다 . 단일 노드를 사용하고 그 이미지를 슬라이드 쇼로 표시합니다.

하나의 단일 노드에서 이미지 당 여러 개의 이미지와 여러 개의 링크를 갖는 좋은 방법을 발견했습니다.

컨텐츠 유형에서 이미지 및 링크 필드가 모두 무제한으로 설정되어 있는지 확인하십시오. 보기를 작성할 때 "같은 행에 모든 값 표시"가 선택되어 있지 않은지 확인하십시오. 이미지와 링크에 델타 필드를 추가하십시오. 전역 : PHP 필터를 추가하고 필터 코드를 다음과 같이 설정하십시오. return (! $ row-> delta == $ row-> delta_1);

그렇게해야합니다. PHP를 필터로 사용하려면 Views PHP 모듈이 설치되어 있어야합니다.

슬라이더에 단일 노드의 여러 이미지를 표시하려면 동적 표시 블록 모듈을 사용 하고 구성 설정을 읽으십시오. 슬라이더 블록을 표시하기위한보기를 생성 할 때 "여러 필드 설정 표시"를 사용하여 이미지를 추가 할 때 확인란을 선택하지 말고 이미 체크 한 경우 선택을 취소하십시오.

Colorbox 모듈을 추천합니다

또한 다음 비디오 자습서를 살펴보십시오. Drupal 7 용 Colorbox 7, 1 부 : 설치 및 이미지 필드 통합

Drupal의 거의 모든 것과 마찬가지로 이것에 대한 여러 가지 솔루션이 있지만 아직 어디서도 보지 못한 간단한 솔루션을 공유하고 싶습니다.

기본적으로 저는 슬라이드 쇼에서 단일 노드에 연결된 여러 필드를 표시하는 방법을 찾고있었습니다. 이 필드에는 이미지 및 텍스트 필드가 모두 포함되었습니다. 따라서 슬라이드 쇼에서 단일 노드에 연결된 모든 필드를 표시하려면 다음을 수행하십시오.

1. 슬라이드 쇼를위한보기를 만듭니다. "형식화되지 않은 목록"형식을 사용하십시오.
2. 단일 노드 만 처리하도록 (또는 상황 별 필터 : NID를 사용하도록) 하나의 항목 만 표시하도록보기를 설정하십시오.
3. 슬라이드 쇼에 표시 할 모든 필드를 추가하십시오. 모든 필드를 표시에서 제외하십시오.
4. 사용자 정의 필드를 추가하십시오 ( 표시에서 제외 된 모든 필드 후에이 필드가 렌더링되는지 확인하십시오 ). 여기에서 슬라이드 쇼의 기본 마크 업을 작성합니다. 사용 가능한 교체 패턴을 사용하여 다음 li과 같이 항목 내에서 사용 가능한 각 필드를 설정 하십시오.

   
   <ul id="slider">
   <li>[text_field_1]</li>
   <li>[image_field_1]</li>
   <li>[text_field_2]</li>
   <li>[image_field_2]</li>
   </ul>
   
   

5. 그런 다음 원하는 jQuery 슬라이더를 실행할 수 있습니다. jQuery Cycle Plugin 에 이미 설치 한 경우 슬라이더에서이를 매우 쉽게 실행할 수 있습니다. 플러그인이 페이지에 플러그인이로드되어 있는지 확인한 다음 새로 만든 플러그인에서 실행하십시오 ul.

   
   (function ($, Drupal, window, document, undefined) {
   
       $(document).ready(function() {
           $('#slider').cycle({
           // choose your options
       });
       });
   
   })(jQuery, Drupal, this, this.document);
   
   

그리고 당신은 잘 가야합니다.

단일 노드에서 슬라이드 쇼를 만들기 위해 제작 된 moduel https://www.drupal.org/project/field_slideshow 가 있습니다 .

개인적으로 이것은 노드 유형 템플릿을 많이 사용하는 것으로 생각되며 해당 유형의 각 노드는 그에 대한 나머지 필드를 표시 할 위치와 같이 높은 수준의 제어가 가능한 슬라이드 쇼 형식으로 지정됩니다. 마디...