Fotorama margin thumbnail with margin glitch (Magento 2)

Question

Magento 2 Blank 기본 테마에 포함 된 Fotorama Library를 사용하여 약간의 문제가 발생했습니다. 먼저 갤러리에 추가 한 몇 가지 설정을 알려 드리겠습니다.

내 섬네일 응용 프로그램/디자인/frontent/< -vendor에서 찾을 수있는 설정 "navdir"을 사용하여 젠토 2의 수직 위치에 표시되도록 설정되어 ->/<을 -theme-> /etc/view.xml

문제는 주위에 너무 여기에서 찾을 수 있습니다 공식 문서 fotorama 사용하여 미리보기를 논제 나는 여백을 추가하고 싶어한다는 것입니다 : http://fotorama.io/customize/options/ 나는 " thumbmargin"라는 새로운 설정을 추가했습니다. 내 view.xml에이 방법을했던 /등 테마 폴더의

<var name="gallery"> 
    ... 
    <var name=""thumbmargin>20</var> <!-- Size of thumbnail margins. --> 
    ... 
</var> 

다음

내가 응용 프로그램에서 찾을 수 있습니다 내 gallery.phml의 조정을 추가/디자인/프론트 엔드/< -vendor ->/< -theme ->/Magento_Catalog/템플릿/제품 /보기/gallery.phtml

... 
<?php if (($block->getVar("gallery/thumbmargin"))): ?> 
    "thumbmargin": "<?php echo $block->getVar("gallery/thumbmargin"); ?>", 
<?php endif; ?> 
... 

긴 소개 죄송합니다. 즉, 썸네일 설정을 추가하면 탐색 바 아래에서 '활성'이미지가 오버 플로우되어이 스크린 샷이 표시되지 않으며이를 방지 할 수없는 것처럼 보입니다. 'fit'으로 설정했지만 아무 효과가 없었습니다. 이 문제를 어떻게 해결할 수 있습니까?

look at the glitch here

PS : Fotorama JS 내 편집을 무시하고 이상한 행동이 발생하기 때문에 CSS는이 문제를 해결할 수 없습니다. 예에 의한

:

.fotorama__nav--thumbs .fotorama__nav__frame + .fotorama__nav__frame{ 
    margin-top:15px; 
} 

축소판을 전환하는 동안 이상한 결함을 작성했다.

EDIT 2016-10-31 나는 '돋보기'와 같은 CSS 및 비활성화 된 효과 만 사용하여이 문제를 해결했습니다. Fotorama의 문제는 자바 스크립트로 생성 된 대부분의 효과이며 CSS에서 수행 된 편집을 추적하지 않기 때문에 축소판이나 주 이미지에 여백이나 여백을 넣으면 문제가 발생한다는 것입니다. 누군가가 이것을 위해 튼튼한 해결책을 가지고 있다면 제발 말해줘. 내 다음 magento 2.x 프로젝트에서 갤러리를 완전히 대체 할 것입니다.

Answer 1

스 니펫을 사용하여 가로 탐색에 썸네일 추가를 시도했습니다 (현재 선택된 엄지의 선택기에 문제가 있음). 그것은 당신이 문자열로 템플릿에 "thumbmargin"를 추가 첫번째 때문에서 일을 일부러, 그래서 내가 변경 :

"thumbmargin": "<?php echo $block->getVar("gallery/thumbmargin"); ?>", 

에 :

"thumbmargin": <?php echo $block->getVar("gallery/thumbmargin"); ?>, 

그것은 나를 위해 일했습니다.

당신의 쟁점을 너무 다르게 수정할 수 있기 때문에 이것을 공유하기를 원할 것입니다. 자신의 갤러리를 더 큰 여백으로 원하는 유일한 사람은 아닐 것입니다.