패널의 GalleryView FilmStrip 사진

StackOverflow https://stackoverflow.com/questions/2266275

문제

나는 사진 갤러리에 필름 스트립을 추가하려고합니다. 갤러리 뷰 플러그인, 버전 2.0. FilmStrip (썸네일 사진)의 지정된 사진이 패널에 표시되는 문제가 있습니다. 지정된 그림 대신 div (class = "Panel")에서.

예제 및 문서에서 알 수 있듯이 사용자 정의 필름 스트립은 다음과 같은 방식으로 추가 할 수 있습니다.

<ul class="filmstrip">
<li><img src="img/gallery/frame-01.jpg" alt="Effet du soleil" title="Effet du soleil" /></li>
<li><img src="img/gallery/frame-02.jpg" alt="Eden" title="Eden" /></li>
</ul>

내 갤러리는 다음과 같습니다.

<div id="gallery_wrap">
    <div id="photos" class="galleryview">
        <div class="panel">
            <img src="/upload/pic/IMG_02740_orig.jpg" />
        </div>
        <div class="panel">
            <img src="/upload/pic/IMG_02740_orig.jpg" />
        </div>
        <ul class="filmstrip">
            <li>
                <img src="/upload/pic/IMG_02739_thumb.jpg" alt="Effet du soleil" title="Effet du soleil" /></li>
            <li>
                <img src="/upload/pic/IMG_02739_thumb.jpg" alt="Eden" title="Eden" /></li>
        </ul>
    </div>
</div>

내가 뭘 잘못하고있는거야? 기본적으로 예제에서 총 사본-붙여 넣기를 가지고 있으며 작동하지 않습니다. 갤러리 뷰 에서이 필름 스트립 섹션을 성공적으로 구현하는 사람이 있습니까?

어떻게 보이는지 :

대체 텍스트 http://img692.imageshack.us/img692/852/galleryviewfilmstripima.jpg

패널에서 원본 대신 썸네일 사진 (썸네일과는 완전히 다른 그림)이라는 것을 분명히 알 수 있습니다.

다음 설정 객체를 사용하고 있습니다.

<script type="text/javascript">
        $(function() {
            $('#photos').galleryView({
                panel_width: 800,
                panel_height: 300,
                frame_width: 100,
                frame_height: 38,
                transition_speed: 1200,
                background_color: '#222',
                border: 'none',
                easing: 'easeInOutBack',
                pause_on_hover: true,
                nav_theme: 'custom',
                overlay_height: 52,
                filmstrip_position: 'top',
                overlay_position: 'top'
            });
        });
    </script>
도움이 되었습니까?

해결책

문제가 관련된 경우에만 GalleryView 2.0, 샘플을 참조하십시오. 이미지 목록 준비에 변경 사항이 있습니다. 더 이상 썸네일을 사용할 필요가 없습니다 ... 갤러리 설명은 다음과 같습니다.

<div id="gallery_wrap">
   <ul id="gallery">
      <li>
         <span class="panel-overlay">Effet du soleil</span>
         <img src="/upload/pic/IMG_02740_orig.jpg" />
      </li>
      <li>
         <span class="panel-overlay">Eden</span>
         <img src="/upload/pic/IMG_02740_orig.jpg" />
      </li>
   </ul>
</div>

어쨌든, 참조 GalleryView 2.0 샘플

다른 팁

사용자 정의 썸네일을 가질 수 있습니다.

<ul id="gallery">
   <li><img class="panel-content" src="path/to/image" /><img src="path/to/thumbnail" /></li>
</ul>

그러나 패널 오버레이는 더 이상 작동하지 않습니다. 5 초의 코드 읽기가 저를 데려 왔습니다 :)

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top