I'm working with a Magento site and I'm new to Magento so please bear with me. I originally asked this question in the Magento community, but they told me it was off-topic. I'm hoping StackOverflow can help.
When viewing certain products, clicking/tapping on a thumbnail image does not reload the large image. Instead, when I click/tap on the images, the browser jumps back to the top of the page and a hash (#) gets appended to the URL. This, of course, leads me to believe there's a JS problem somewhere, but I don't see anything in my console about it.
Chrome Console errors:
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
Safari Console errors:
[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)
These errors don't look like they could be causing my problem, but I guess I'm not 100% sure on that.
Other weirdness:
Sometimes--inconsistently but usually after reloading the page--I get this JS error:
Uncaught TypeError: Cannot read property 'config' of undefined
prototype.js:828
Chrome points me to prototype's error catch line. When I look in Firefox, Firebug gives me a little more info on this error:
TypeError: prevConfig.config is undefined
if(prevConfig.config.allowedProducts
configurable.js (line 184)
My HTML:
<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>
Background info:
I didn't build this site. I inherited it and am trying to find my way through things. Therefore, I'm not sure if I've provided enough information for you all to help me. I can edit this with any additional info that may be helpful.
Any idea what's going wrong?
