jQuery图像切换器未加载图像

Question

我想在jQuery中创建一个图像切换器。我希望切换器在按下向右或向左箭头时关闭当前div，然后让它单击另一个将打开新div的链接。 我遇到了问题，因为当点击事件发生时，图片无法加载。加载动画将永远存在。

以下是列表的HTML代码，其中有一个a.zoom元素，在关闭第一个div后应单击该元素。通过单击关闭按钮关闭div：a.pp_close：

<ul class="products product-grid clearfix">




<li class="post-9 product type-product status-publish first  product taxable shipping-taxable purchasable product-type-simple product-cat-globusy-male-11-5 instock"> 
    <div>        <figure> 

            <a href="http://www.globusy.eu/sklep/produkt/globus-1/">

                <img width="252" height="160" src="http://www.globusy.eu/sklep/wp-content/uploads/2014/03/eff4f0268af2bf49ffc913b6e5c78dca1-252x160.jpg" class="attachment-shop_catalog wp-post-image" alt="Globus 1">              
            </a>
            <div class="overlay" style="display: none;">
                <a href="http://www.globusy.eu/sklep/wp-content/uploads/2014/03/eff4f0268af2bf49ffc913b6e5c78dca1.jpg" class="zoom"></a>
                <a href="http://www.globusy.eu/sklep/produkt/globus-1/" class="link"></a>
            </div>
        </figure>
        <div class="detail">         
            <h4><a href="http://www.globusy.eu/sklep/produkt/globus-1/">Globus 1</a></h4>



<div class="excerpt_styling">Globus z mapą przedstawiającą zdjęcie satelitarne ziemi.</div>




            <span><span class="amount">650,00zł</span></span>

            <div class="icon">
                <a href="/sklep/kategoria-produktu/globusy-male-11-5/?add-to-cart=9" rel="nofollow" data-product_id="9" data-product_sku="10" class="button add_to_cart_button product_type_simple tooltip"></a>            </div>
        </div>
    </div></li>



<li class="post-16 product type-product status-publish  product taxable shipping-taxable purchasable product-type-simple product-cat-globusy-male-11-5 instock"> 
    <div>        <figure> 

            <a href="http://www.globusy.eu/sklep/produkt/globus-2/">

                <img width="252" height="160" src="http://www.globusy.eu/sklep/wp-content/uploads/2014/03/ac137512137aba2e02d45af4a1d525bb11-252x160.jpg" class="attachment-shop_catalog wp-post-image" alt="globus_2">             
            </a>
            <div class="overlay" style="display: none;">
                <a href="http://www.globusy.eu/sklep/wp-content/uploads/2014/03/ac137512137aba2e02d45af4a1d525bb11.jpg" class="zoom"></a>
                <a href="http://www.globusy.eu/sklep/produkt/globus-2/" class="link"></a>
            </div>
        </figure>
        <div class="detail">         
            <h4><a href="http://www.globusy.eu/sklep/produkt/globus-2/">Globus 2</a></h4>



<div class="excerpt_styling">Wyjątkowy model przedstawiający gwiazdozbiory opisane po łacinie.</div>




            <span><span class="amount">650,00zł</span></span>

            <div class="icon">
                <a href="/sklep/kategoria-produktu/globusy-male-11-5/?add-to-cart=16" rel="nofollow" data-product_id="16" data-product_sku="10" class="button add_to_cart_button product_type_simple tooltip"></a>          </div>
        </div>
    </div></li>



<li class="post-20 product type-product status-publish last  product taxable shipping-taxable purchasable product-type-simple product-cat-globusy-male-11-5 instock"> 
    <div>        <figure> 

            <a href="http://www.globusy.eu/sklep/produkt/globus-3/">

                <img width="252" height="160" src="http://www.globusy.eu/sklep/wp-content/uploads/2014/03/41879e5271410602be3970f18dd7d49911-252x160.jpg" class="attachment-shop_catalog wp-post-image" alt="globus_3">             
            </a>
            <div class="overlay" style="display: none;">
                <a href="http://www.globusy.eu/sklep/wp-content/uploads/2014/03/41879e5271410602be3970f18dd7d49911.jpg" class="zoom"></a>
                <a href="http://www.globusy.eu/sklep/produkt/globus-3/" class="link"></a>
            </div>
        </figure>
        <div class="detail">         
            <h4><a href="http://www.globusy.eu/sklep/produkt/globus-3/">Globus 3</a></h4>



<div class="excerpt_styling">Model w kolorze piaskowym przedstawiający mapę polityczną.</div>




            <span><span class="amount">635,00zł</span></span>

            <div class="icon">
                <a href="/sklep/kategoria-produktu/globusy-male-11-5/?add-to-cart=20" rel="nofollow" data-product_id="20" data-product_sku="10" class="button add_to_cart_button product_type_simple tooltip"></a>          </div>
        </div>
    </div></li>



<li class="post-23 product type-product status-publish first  product taxable shipping-taxable purchasable product-type-simple product-cat-globusy-male-11-5 instock"> 
    <div>        <figure> 

            <a href="http://www.globusy.eu/sklep/produkt/globus-4/">

                <img width="252" height="160" src="http://www.globusy.eu/sklep/wp-content/uploads/2014/03/dd2db71261e9862748fbfc66fbcfccdf1-252x160.jpg" class="attachment-shop_catalog wp-post-image" alt="globus_4">              
            </a>
            <div class="overlay" style="display: none;">
                <a href="http://www.globusy.eu/sklep/wp-content/uploads/2014/03/dd2db71261e9862748fbfc66fbcfccdf1.jpg" class="zoom"></a>
                <a href="http://www.globusy.eu/sklep/produkt/globus-4/" class="link"></a>
            </div>
        </figure>
        <div class="detail">         
            <h4><a href="http://www.globusy.eu/sklep/produkt/globus-4/">Globus 4</a></h4>



<div class="excerpt_styling">Globus w kolorze czarno-srebrnym obrazujący mapę polityczną świata.</div>




            <span><span class="amount">635,00zł</span></span>

            <div class="icon">
                <a href="/sklep/kategoria-produktu/globusy-male-11-5/?add-to-cart=23" rel="nofollow" data-product_id="23" data-product_sku="10" class="button add_to_cart_button product_type_simple tooltip"></a>          </div>
        </div>
    </div></li>



<li class="post-26 product type-product status-publish  product taxable shipping-taxable purchasable product-type-simple product-cat-globusy-male-11-5 instock"> 
    <div>        <figure> 

            <a href="http://www.globusy.eu/sklep/produkt/globus-5/">

                <img width="252" height="160" src="http://www.globusy.eu/sklep/wp-content/uploads/2014/03/f5db3e9cb77d18f52f558f96a0a4836f3-252x160.jpg" class="attachment-shop_catalog wp-post-image" alt="globus_5">              
            </a>
            <div class="overlay" style="display: none;">
                <a href="http://www.globusy.eu/sklep/wp-content/uploads/2014/03/f5db3e9cb77d18f52f558f96a0a4836f3.jpg" class="zoom"></a>
                <a href="http://www.globusy.eu/sklep/produkt/globus-5/" class="link"></a>
            </div>
        </figure>
        <div class="detail">         
            <h4><a href="http://www.globusy.eu/sklep/produkt/globus-5/">Globus 5</a></h4>



<div class="excerpt_styling">Model przedstawia mapę geograficzną świata na błękitnym tle oceanów.</div>




            <span><span class="amount">635,00zł</span></span>

            <div class="icon">
                <a href="/sklep/kategoria-produktu/globusy-male-11-5/?add-to-cart=26" rel="nofollow" data-product_id="26" data-product_sku="10" class="button add_to_cart_button product_type_simple tooltip"></a>          </div>
        </div>
    </div></li>



<li class="post-28 product type-product status-publish last  product taxable shipping-taxable purchasable product-type-simple product-cat-globusy-male-11-5 instock"> 
    <div>        <figure> 

            <a href="http://www.globusy.eu/sklep/produkt/globus-6/">

                <img width="252" height="160" src="http://www.globusy.eu/sklep/wp-content/uploads/2014/03/185dcd4ee1abc9aed84c9de4a60ca40d3-252x160.jpg" class="attachment-shop_catalog wp-post-image" alt="globus_6">              
            </a>
            <div class="overlay" style="display: none;">
                <a href="http://www.globusy.eu/sklep/wp-content/uploads/2014/03/185dcd4ee1abc9aed84c9de4a60ca40d3.jpg" class="zoom"></a>
                <a href="http://www.globusy.eu/sklep/produkt/globus-6/" class="link"></a>
            </div>
        </figure>
        <div class="detail">         
            <h4><a href="http://www.globusy.eu/sklep/produkt/globus-6/">Globus 6</a></h4>



<div class="excerpt_styling">Pięknie wykonany globus ukazujący aktualną mapę polityczną świata.</div>




            <span><span class="amount">635,00zł</span></span>

            <div class="icon">
                <a href="/sklep/kategoria-produktu/globusy-male-11-5/?add-to-cart=28" rel="nofollow" data-product_id="28" data-product_sku="10" class="button add_to_cart_button product_type_simple tooltip"></a>          </div>
        </div>
    </div></li>


                </ul>

这是jQuery代码：

jQuery( document ).ready(function($) {

    $(document).keydown(function(event) {
        if(event.keyCode == 37 || event.keyCode == 39)
            if( $('#fullResImage').length > 0 ) {
                $('a.pp_close').click();
                $('body > div.product_wrap > div > div > div.span9.woocommerce > ul > li.post-16 > div > figure > div > a.zoom').click();
            }
    });
});