2014-02-22 5 views
1

갤러리 필드 추가 기능 및 팬시 박스와 함께 고급 사용자 정의 필드를 사용하고 있습니다. 시청자가 미리보기 이미지를 클릭하면 Fancybox 슬라이드 쇼가 나타납니다. 문제는 미리보기 이미지가 표시되지 않는다는 것입니다. 요소를 검사 할 때 어떤 이유로 img 크기가 0x0입니다.고급 사용자 정의 필드 갤러리 필드 이미지가 표시되지 않음

여기 내 코드입니다 :

<div id="post-img">  
     <?php 
     $images = get_field('gallery'); 
     $image_1 = $images[0]; 
     ?>  
     <?php foreach($images as $image): ?> 

     <a href="<?php echo $image['url']; ?>" rel="fancybox"> 
      <h5>view images</h5><img src="<?php echo $image_1['url']; ?>"/> 
     </a> 
     <?php endforeach; ?> 
    </div><!-- #post-img --> 

CSS :

#post-img { 
float:left; 
margin-bottom:0; 
padding-top:10px; 
padding-bottom:0; 
} 

#post-img a { 
display:none; 
} 

#post-img img { 
display:none; 
width:200px; 
height:auto; 
} 

#post-img a:first-of-type img{ 
display:block; 
} 

답변

1

첫째 : 당신은 제대로 PHP와 ACF를 사용하고 썸네일 채워 져야합니다.

하지만 당신은 그것을 숨기고 : 이것은 단순히 모든 후 IMG #의 내부를 말하고있다

#post-img a { 
    display:none; 
} 

, 그것은 표시되지 것을. 귀하의 img는 내부에 있기 때문에 따라서 그것은 표시되지 않습니다.

JSFiddle where I changed display:none; to display:block; for illustrative purposes.

이 당신을 도움이되는지 알려주세요.

+1

고맙습니다. 단 하나의 축소판을 표시하고 싶었지만 그 다음에 '# post-img a : first-child {display : block;}'을 추가하는 것을 잊어 버렸기 때문에 코드를 추가했습니다. 이제 작동합니다. –

0

먼저 당신이 img.src가 채워되고 있는지 확인해야합니다?

그렇다면및속성을 img 요소에 추가 해보는 것이 어떻습니까? 모든

<img src="<?php echo $image_1['url']; ?>" width="200" height="200" /> 
관련 문제