Javascript Magento站点：点击缩略图照片不'；不要在手机上更改大照片

我在一个Magento网站工作，我是Magento的新手，所以请容忍我。我本来是这么想的，但他们告诉我这是离题的。我希望StackOverflow能帮上忙

查看某些产品时，单击/点击缩略图不会重新加载大图像。相反，当我单击/点击图像时，浏览器会跳回页面顶部，并在URL中附加一个哈希（#）。当然，这让我相信某个地方存在JS问题，但我在控制台中看不到任何与此相关的内容

Chrome控制台错误：

The key "target-densitydpi" is not supported.
cg-ball-cap-adjustable.html:114 

GET http://[my url]/skin/frontend/gpmd/default/js/vendor/lightbox.min.map 404 (Not Found)
cg-ball-cap-adjustable.html:1

[Error] Viewport argument key "target-densitydpi" not recognized and ignored.
(result, line 106)

[Error] Failed to load resource: the server responded with a status of 404 (Not Found)
(lightbox.min.map, line 0)

<div id="product-media" class="product-media">
    <div id="product-main" class="product-media-large">
        <a class="product-image" data-lightbox="product-image-1" title="" href="[my url]/placeholder/default/thumbnail-large.jpg">
            <img id="product-zoom" class="image" src="[my url]/placeholder/default/thumbnail-large.jpg" width="476" height="610" alt="" data-zoom-image="[my url]/placeholder/default/thumbnail-large.jpg">
        </a>
        <div class="view-full-link">
            <a data-lightbox="product-image-2" href="[my url]/placeholder/default/thumbnail-large.jpg">View Full Size</a>
        </div>
    </div>
    <div id="product-thumbs-gallery">
        <div id="product-thumbs" class="flexslider">
            <ul class="slides carousel">
                <li>
                    <a href="#" class="carousel-link active" data-image="[my url]/thumbnail-1.jpg" data-zoom-image="[my url]/thumbnail-1.jpg" title="">
                        <img class="carousel-image" src="[my url]/thumbnail-1.jpg" width="115" height="115" alt="">
                    </a>
                </li>
                <li>
                    <a href="#" class="carousel-link " data-image="[my url]/thumbnail-1_5th_copy_.jpg" data-zoom-image="[my url]/thumbnail-1_5th_copy_.jpg" title="">
                        <img class="carousel-image" src="[my url]/thumbnail-1_5th_copy_.jpg" width="115" height="115" alt="">
                    </a>
                </li>
                <li>
                    <a href="#" class="carousel-link " data-image="[my url]/thumbnail-1_copy_.jpg" data-zoom-image="[my url]/thumbnail-1_copy_.jpg" title="">
                        <img class="carousel-image" src="[my url]/thumbnail-1_copy_.jpg" width="115" height="115" alt="">
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>

Safari控制台错误：

The key "target-densitydpi" is not supported.
cg-ball-cap-adjustable.html:114 

GET http://[my url]/skin/frontend/gpmd/default/js/vendor/lightbox.min.map 404 (Not Found)
cg-ball-cap-adjustable.html:1

[Error] Viewport argument key "target-densitydpi" not recognized and ignored.
(result, line 106)

[Error] Failed to load resource: the server responded with a status of 404 (Not Found)
(lightbox.min.map, line 0)

<div id="product-media" class="product-media">
    <div id="product-main" class="product-media-large">
        <a class="product-image" data-lightbox="product-image-1" title="" href="[my url]/placeholder/default/thumbnail-large.jpg">
            <img id="product-zoom" class="image" src="[my url]/placeholder/default/thumbnail-large.jpg" width="476" height="610" alt="" data-zoom-image="[my url]/placeholder/default/thumbnail-large.jpg">
        </a>
        <div class="view-full-link">
            <a data-lightbox="product-image-2" href="[my url]/placeholder/default/thumbnail-large.jpg">View Full Size</a>
        </div>
    </div>
    <div id="product-thumbs-gallery">
        <div id="product-thumbs" class="flexslider">
            <ul class="slides carousel">
                <li>
                    <a href="#" class="carousel-link active" data-image="[my url]/thumbnail-1.jpg" data-zoom-image="[my url]/thumbnail-1.jpg" title="">
                        <img class="carousel-image" src="[my url]/thumbnail-1.jpg" width="115" height="115" alt="">
                    </a>
                </li>
                <li>
                    <a href="#" class="carousel-link " data-image="[my url]/thumbnail-1_5th_copy_.jpg" data-zoom-image="[my url]/thumbnail-1_5th_copy_.jpg" title="">
                        <img class="carousel-image" src="[my url]/thumbnail-1_5th_copy_.jpg" width="115" height="115" alt="">
                    </a>
                </li>
                <li>
                    <a href="#" class="carousel-link " data-image="[my url]/thumbnail-1_copy_.jpg" data-zoom-image="[my url]/thumbnail-1_copy_.jpg" title="">
                        <img class="carousel-image" src="[my url]/thumbnail-1_copy_.jpg" width="115" height="115" alt="">
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>

这些错误看起来不可能导致我的问题，但我想我不是100%确定

其他奇怪之处：

The key "target-densitydpi" is not supported.
cg-ball-cap-adjustable.html:114 

GET http://[my url]/skin/frontend/gpmd/default/js/vendor/lightbox.min.map 404 (Not Found)
cg-ball-cap-adjustable.html:1

[Error] Viewport argument key "target-densitydpi" not recognized and ignored.
(result, line 106)

[Error] Failed to load resource: the server responded with a status of 404 (Not Found)
(lightbox.min.map, line 0)

<div id="product-media" class="product-media">
    <div id="product-main" class="product-media-large">
        <a class="product-image" data-lightbox="product-image-1" title="" href="[my url]/placeholder/default/thumbnail-large.jpg">
            <img id="product-zoom" class="image" src="[my url]/placeholder/default/thumbnail-large.jpg" width="476" height="610" alt="" data-zoom-image="[my url]/placeholder/default/thumbnail-large.jpg">
        </a>
        <div class="view-full-link">
            <a data-lightbox="product-image-2" href="[my url]/placeholder/default/thumbnail-large.jpg">View Full Size</a>
        </div>
    </div>
    <div id="product-thumbs-gallery">
        <div id="product-thumbs" class="flexslider">
            <ul class="slides carousel">
                <li>
                    <a href="#" class="carousel-link active" data-image="[my url]/thumbnail-1.jpg" data-zoom-image="[my url]/thumbnail-1.jpg" title="">
                        <img class="carousel-image" src="[my url]/thumbnail-1.jpg" width="115" height="115" alt="">
                    </a>
                </li>
                <li>
                    <a href="#" class="carousel-link " data-image="[my url]/thumbnail-1_5th_copy_.jpg" data-zoom-image="[my url]/thumbnail-1_5th_copy_.jpg" title="">
                        <img class="carousel-image" src="[my url]/thumbnail-1_5th_copy_.jpg" width="115" height="115" alt="">
                    </a>
                </li>
                <li>
                    <a href="#" class="carousel-link " data-image="[my url]/thumbnail-1_copy_.jpg" data-zoom-image="[my url]/thumbnail-1_copy_.jpg" title="">
                        <img class="carousel-image" src="[my url]/thumbnail-1_copy_.jpg" width="115" height="115" alt="">
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>

有时——不一致但通常在重新加载页面后——我会出现以下JS错误：

Uncaught TypeError: Cannot read property 'config' of undefined
prototype.js:828

Chrome将我指向prototype的错误捕捉线。当我在Firefox中查看时，Firebug向我提供了有关此错误的更多信息：

TypeError: prevConfig.config is undefined
if(prevConfig.config.allowedProducts
configurable.js (line 184)

我的HTML:

The key "target-densitydpi" is not supported.
cg-ball-cap-adjustable.html:114 

GET http://[my url]/skin/frontend/gpmd/default/js/vendor/lightbox.min.map 404 (Not Found)
cg-ball-cap-adjustable.html:1

[Error] Viewport argument key "target-densitydpi" not recognized and ignored.
(result, line 106)

[Error] Failed to load resource: the server responded with a status of 404 (Not Found)
(lightbox.min.map, line 0)

<div id="product-media" class="product-media">
    <div id="product-main" class="product-media-large">
        <a class="product-image" data-lightbox="product-image-1" title="" href="[my url]/placeholder/default/thumbnail-large.jpg">
            <img id="product-zoom" class="image" src="[my url]/placeholder/default/thumbnail-large.jpg" width="476" height="610" alt="" data-zoom-image="[my url]/placeholder/default/thumbnail-large.jpg">
        </a>
        <div class="view-full-link">
            <a data-lightbox="product-image-2" href="[my url]/placeholder/default/thumbnail-large.jpg">View Full Size</a>
        </div>
    </div>
    <div id="product-thumbs-gallery">
        <div id="product-thumbs" class="flexslider">
            <ul class="slides carousel">
                <li>
                    <a href="#" class="carousel-link active" data-image="[my url]/thumbnail-1.jpg" data-zoom-image="[my url]/thumbnail-1.jpg" title="">
                        <img class="carousel-image" src="[my url]/thumbnail-1.jpg" width="115" height="115" alt="">
                    </a>
                </li>
                <li>
                    <a href="#" class="carousel-link " data-image="[my url]/thumbnail-1_5th_copy_.jpg" data-zoom-image="[my url]/thumbnail-1_5th_copy_.jpg" title="">
                        <img class="carousel-image" src="[my url]/thumbnail-1_5th_copy_.jpg" width="115" height="115" alt="">
                    </a>
                </li>
                <li>
                    <a href="#" class="carousel-link " data-image="[my url]/thumbnail-1_copy_.jpg" data-zoom-image="[my url]/thumbnail-1_copy_.jpg" title="">
                        <img class="carousel-image" src="[my url]/thumbnail-1_copy_.jpg" width="115" height="115" alt="">
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>

背景信息：

The key "target-densitydpi" is not supported.
cg-ball-cap-adjustable.html:114 

GET http://[my url]/skin/frontend/gpmd/default/js/vendor/lightbox.min.map 404 (Not Found)
cg-ball-cap-adjustable.html:1

[Error] Viewport argument key "target-densitydpi" not recognized and ignored.
(result, line 106)

[Error] Failed to load resource: the server responded with a status of 404 (Not Found)
(lightbox.min.map, line 0)

<div id="product-media" class="product-media">
    <div id="product-main" class="product-media-large">
        <a class="product-image" data-lightbox="product-image-1" title="" href="[my url]/placeholder/default/thumbnail-large.jpg">
            <img id="product-zoom" class="image" src="[my url]/placeholder/default/thumbnail-large.jpg" width="476" height="610" alt="" data-zoom-image="[my url]/placeholder/default/thumbnail-large.jpg">
        </a>
        <div class="view-full-link">
            <a data-lightbox="product-image-2" href="[my url]/placeholder/default/thumbnail-large.jpg">View Full Size</a>
        </div>
    </div>
    <div id="product-thumbs-gallery">
        <div id="product-thumbs" class="flexslider">
            <ul class="slides carousel">
                <li>
                    <a href="#" class="carousel-link active" data-image="[my url]/thumbnail-1.jpg" data-zoom-image="[my url]/thumbnail-1.jpg" title="">
                        <img class="carousel-image" src="[my url]/thumbnail-1.jpg" width="115" height="115" alt="">
                    </a>
                </li>
                <li>
                    <a href="#" class="carousel-link " data-image="[my url]/thumbnail-1_5th_copy_.jpg" data-zoom-image="[my url]/thumbnail-1_5th_copy_.jpg" title="">
                        <img class="carousel-image" src="[my url]/thumbnail-1_5th_copy_.jpg" width="115" height="115" alt="">
                    </a>
                </li>
                <li>
                    <a href="#" class="carousel-link " data-image="[my url]/thumbnail-1_copy_.jpg" data-zoom-image="[my url]/thumbnail-1_copy_.jpg" title="">
                        <img class="carousel-image" src="[my url]/thumbnail-1_copy_.jpg" width="115" height="115" alt="">
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>

我没有建立这个网站。我继承了它，并试图找到我的方式通过事情。因此，我不确定我是否提供了足够的信息供大家帮助我。我可以编辑此与任何其他信息，可能是有益的

---

知道出了什么问题吗？

似乎有javascript冲突，请尝试在flexslider脚本中添加jquery.conflict（）。您可以在[root]/skin/frontend/[yourpackage或default]/theme/中找到脚本

---

您还可以尝试在页脚中添加flexslider脚本。您需要检查添加此库的布局文件（[root]/app/design/frontend/[yourpackage或default]/theme/layout/page.xml或catalog.xml等）

这是正确的答案。我也遇到了同样的问题，我通过消除两个不同版本之间的jQuery冲突解决了这个问题。如何实现这一点在这里得到了回答