wookmark 함수가 인식되지 않습니다.

Question

제품 표시를 위해 페이지의 특정 부분에서 작업을 수행하려고합니다. wook_enqueue_script를 통해 wookmarks 및로드 된 이미지를로드했습니다. 헤더 소스에 포함되어 잘로드 된 것처럼 보입니다. 그러나, 나는 밖으로 분류 할 수 없었다 방화범에 오류가 있어요. 이 코드는 wookmarks의 예제 파일에서 가져온 것입니다.

TypeError: handler.wookmark is not a function 

page.php

<div id="products" class="fp-sec"> 
<h2>Products</h2> 
<ul id="prod-list" > 
    <?php $products = new WP_Query('category_name=products'); ?> 
    <?php if ($products->have_posts()) : while ($products->have_posts()) : $products->the_post(); ?> 
     <li <?php post_class('fp-prod') ?> id="post-<?php the_ID(); ?>"> 
      <?php the_post_thumbnail('full'); ?> 
       <p class="prod-title"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></p> 
     </li> 
    <?php endwhile; endif;?> 
</ul> 
</div> 

<script type="text/javascript"> 
jQuery(document).ready(function ($) { 
var loadedImages = 0, // Counter for loaded images 
handler = $('#prod-list li'); // Get a reference to your grid items. 
// Prepare layout options. 
var options = { 
    autoResize: true, // This will auto-update the layout when the browser window is resized. 
    container: $('#prod-list'), // Optional, used for some extra CSS styling 
    offset: 5, // Optional, the distance between grid items 
    outerOffset: 10, // Optional, the distance to the containers border 
    itemWidth: 210 // Optional, the width of a grid item 
}; 
$('#prod-list').imagesLoaded(function() { 
// Call the layout function. 
handler.wookmark(options); 
// Capture clicks on grid items. 
handler.click(function(){ 
    // Randomize the height of the clicked item. 
    var newHeight = $('img', this).height() + Math.round(Math.random() * 300 + 30); 
    $(this).css('height', newHeight+'px'); 
    // Update the layout. 
    handler.wookmark(); 
}); 
}).progress(function(instance, image) { 
// Update progress bar after each image load 
loadedImages++; 
if (loadedImages == handler.length) 
    $('.progress-bar').hide(); 
else 
    $('.progress-bar').width((loadedImages/handler.length * 100) + '%'); 
}); 
}); 
</script> 

있는 style.css

그것은이 라인과 같은

#prod-list { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    position: relative; 
    width: 100%; 
} 
#prod-list li { 
    width: 200px; 
    border-left: 1px dashed #bfbfbf; 
    border-top: 1px dashed #bfbfbf; 
    -webkit-box-shadow: 2px 3px 3px 0px rgba(105,105,105,1); 
    -moz-box-shadow: 2px 3px 3px 0px rgba(105,105,105,1); 
    box-shadow: 2px 3px 3px 0px rgba(105,105,105,1); 
    cursor: pointer; 
    padding: 4px; 
} 
#prod-list li img { 
    display: block; 
    max-width: 100%; 
    height: auto; 
} 

.prod-title { 
    font-size: 1.2em; 
    width: auto; 
    color: #ffffff; 
    padding: 0px; 
    bottom: 0px ; 
    right: 0px; 
} 

Answer 1

:

이

handler = $('#prod-list li'); // Get a reference to your grid items. 

실제 그리드 (바로 위 부모이어야한다 상품) :

handler = $('#prod-list'); // Get a reference to your grid items. 

그런 다음이 라인 :

container: $('#prod-list'), // Optional, used for some extra CSS styling 

이 (... 다시 그 바로 위 부모) 다음과 같습니다

container: $('#products'), // Optional, used for some extra CSS styling 

그리드 항목을 참조하는 직접 원인이 오류가 발생합니다.