Wordpress - Featherlight.js를 사용하여 모달 상자에서 고급 사용자 정의 필드 이미지 열기

Question

가능한 한 간단하게 WordPress 테마를 코딩하려고했지만 실제로 고급 사용자 정의 필드의 이미지를 표시 할 수없는 이유를 이해하지 못합니다. Featherlight.js를 사용하여 모달 상자 (http://noelboss.github.io/featherlight/)

다음

이 단순히 이미지 사용자 정의 필드

<?php if (have_posts()) : ?> 
    <?php while (have_posts()) : the_post(); ?> 

<?php 

$image = get_field('image'); 

if(!empty($image)): ?> 

    <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" /> 

<?php endif; ?> 

    <?php endwhile; ?> 
    <?php endif; ?> 

을 표시 내 single.php 코드, 내 온라인 페이지 http://www.skuar.com

이며, 이것은이다 wp 루프 c ontent

<div id="post"> 
    <a href ="<?php the_permalink(); ?>"> 

    <div class="img" href="<?php 

$image = get_field('image'); 

if(!empty($image)): ?> 

    <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" /> 

<?php endif; ?>" data-featherlight="image"> 
<?php 

$image = get_field('image'); 

if(!empty($image)): ?> 

    <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" /> 

<?php endif; ?> 
    </div> 

    </a> 

</div> 

난 그냥 라이트 박스에 이미지를 열 싶습니다

... 는 메이크업 감각인가?

감사합니다.

Answer 1

코드에 잘못된 큰 따옴표가 있습니다. 다음 코드를 사용해보십시오.

<div id="post"> 
     <a href ="<?php the_permalink(); ?>"> 
      <div class="img" href="<?php $image = get_field('image'); 
       if(!empty($image)): ?> 
       <?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?> 
       <?php endif; ?>" data-featherlight="image"> 
      </div> 
     </a> 
    </div>