2013-08-22 1 views
1

Wordpress에서 Nivo Slider를 사용하고 있습니다. jQuery를 사용하여 축소판을 오버레이하려면 div 또는 img가 필요하다는 것 외에는 완벽하게 작동합니다.Nivo Slider 축소판에 대한 롤오버/활성 상태 만들기 시도

이 내 첫 번째 게시물이지만, 여기에 갤러리의 이미지이기 때문에 내가 파일을 업로드 할 수 없습니다 : http://i.imgur.com/p27zA1B.png

나는 호버 상태는 썸네일 이상과 함께 클래스 DIV를 사용하여 내 사이트에 다른 곳에서 작업이 자동으로 썸네일을 생성하는 것 때문에이 코드

$(document).ready(function() { 
    jQuery('.bottomRowLook li a').hover(
      function(){ 
       jQuery(this).children('.lookbook-lower-overlay').show(); 
      }, //hover in 
      function(){ 
       jQuery(this).children('.lookbook-lower-overlay').hide(); 
      } //hover out 
    ); 
}); 

이것은 NIVO 슬라이더 작동하지 않습니다 내 코드가 간다 어디 정확히 파악할 수 없습니다. 나는 appendTo를 사용하여 시도하지만 jQuery를에 주로 아주 좋은 아니에요 인터넷에서 찾은 자습서로 이동하십시오.

<div class="slider-wrapper"> 
        <div id="slider" class="nivoSlider default-theme"> 
         <?php $args = array('post_type' => 'attachment', 'posts_per_page' => 15, 'post_status' =>'any', 'post_parent' => $post->ID); ?> 
         <?php $attachments = get_posts($args); ?> 
         <?php if ($attachments): ?> 
          <?php foreach ($attachments as $attachment): ?> 
           <div class="look-upper-overlay"></div> 
           <?php $full = wp_get_attachment_image_src($attachment->ID, true); ?> 
           <?php $rel = wp_get_attachment_image_src ($attachment->ID, 'thumbnail', true); ?> 
           <?php $title = $attachment->post_title; ?> 
           <img src="<?php echo $full[0]; ?>" data-thumb="<?php echo $rel[0]; ?>" title="<?php echo $title ?>" />'; 
          <?php endforeach; ?> 
         <?php endif; ?> 

        </div> 
       </div> 

모든 아이디어 : 축소판 + 메인 이미지를 생성

루프는 다음과 같습니다?

+0

생성 된 축소판의 마크 업을 게시 할 수 있습니까? –

+0

게시 한 PHP에서 출력하는 HTML을 게시하는 것은 어떻습니까? – sulfureous

답변

0

이 jQuery 코드 블록을 시도해보고 특정 시나리오에서 차이가 있는지 알려주십시오.

$(document).ready(function() { 
    $('.bottomRowLook li a').on('hover', function(){ 
     $(this).children('.lookbook-lower-overlay').show(); 
    }, 
    function(){ 
     $(this).children('.lookbook-lower-overlay').hide(); 
    } 
); 
}); 

이것은 Nivo가 미리보기 이미지를 만드는 방식과 관련이 있습니다. DOM에서는 아직 액세스 할 수 없습니다. .on 이벤트는 이러한 상황에서 도움이됩니다.

실제 예제가 없으면 판단하기가 어렵지 만 잘 작동하기를 바랍니다.