Multiple product images not showing when clicked

[stradweb]

Hello,

In my shop, I have several products which have multiple images associated with them. When you click on the thumbnail though, it doesn't change the bigger image on the product page. How do I make this work?

Thanks

[jenkinhill]

Works OK for me using fancybox in VM2.0.24.  Have you changed the template at all or have some other image script loading such as mediabox?

[stradweb]

I have Fancybox turned on but this is still not working.

Here is the URL to one of the products with multiple images: http://108.167.179.250/~etchalot/index.php/wooden-toys/space-shuttle-puzzle-toy-detail

[jenkinhill]

It is throwing JavaScript errors. Try with JCE Mediabox disabled.

[stradweb]

Turned off JCE Media box - No change. Still the same thing.

[jenkinhill]

I can't even open the page in IE10 without it stopping for 3 JavaScript errors, one after the other (I always use IE with Script debugging enabled as I only use it for site testing).

SCRIPT5009: 'Hash' is undefined
modal.js, line 7 character 1
SCRIPT438: Object doesn't support property or method 'on'
bootstrap.min.js, line 7 character 1131
SCRIPT438: Object doesn't support property or method 'addEvent'
space-shuttle-puzzle-toy-detail, line 36 character 3

So looks like some issue with your Joomla template.

[stradweb]

Thanks for your help.

Normally, I don't use I.E. as Microsoft seems to think they can use their own interpretation of how coding should be done instead of how the W3C actually wrote the specification. Chrome, Firefox and Opera are all far more compliant to the W3C specification than E.I. is.

That having been said, I do agree that there is something wonky probably going on in Javascript. So, I emailed the developers with the errors to see what can be done.

Thanks again,
Ron

[jenkinhill]

IE10's debugger is just about the best for showing up issues. As a browser it is not bad, but I would never routinely use it.

[guybr]

I'm having the same problem: I took the advice above and checked with explorer's debugger, and the message I got is "object doesn't support property or method  'fancybox' ".

It flagged up the error on line 77 of the product details page, and this is the segment it highlighted:

   jQuery(document).ready(function() {
      jQuery("a[rel=vm-additional-images]").fancybox({
         "titlePosition"    : "inside",
         "transitionIn"   :   "elastic",
         "transitionOut"   :   "elastic"
      });

I'm using the default 'Atomic' template. I don't have any extensions or plugins installed as regards the photo displays, so to the best of my knowledge all this is the default material from the VM package itself. I'm using the latest version VM with Joomla 2.5.

Is there something I can fix?

[jenkinhill]

Either you are not loading jQuery or you are loading more than one version. http://forum.virtuemart.net/index.php?topic=119638.0

[guybr]

...I thought jQuery was included in the Joomla/VM installations -? Is it really possible that I don't have jQuery installed?

[jenkinhill]

Look at you page header code. Then you can see what you are loading. Nobody else can look as you have not revealed the URL.

[guybr]

looks like jQuery is loaded... I may have found a solution, which is to use a "patch" for the fancybox .js (ref: http://stackoverflow.com/questions/14344289/fancybox-doesnt-work-with-jquery-v1-9-0-f-browser-is-undefined-cannot-read) - I assume I'm supposed to replace the existing code in the .js file with the patch code. But do I do that in the directory where the original .js file is located, or do I do this as if it's an override?

[jenkinhill]

You should not need to do that if you are using the jQuery version included with VirtueMart 2.6.x - jQ1.6.1 or if you use the VM option to d/l jQuery from the Google libray then the version should be jQ1.8.1

You maybe have a jQ version mismatch.

[guybr]

further to what you wrote on the linked post above, the other possibility is that I'm calling jQuery more than once and it's causing a problem: I am using the swMenuPro module on that page (for the menus) - and that does call jQuery too:

This is what I call up on the top of the product details page:
  <script src="/~~~~/components/com_virtuemart/assets/js/jquery.min.js" type="text/javascript"></script>
  <script src="/~~~~/components/com_virtuemart/assets/js/jquery.noconflict.js" type="text/javascript"></script>
  <script src="/~~~~/components/com_virtuemart/assets/js/vmsite.js" type="text/javascript"></script>
  <script src="/~~~~/components/com_virtuemart/assets/js/fancybox/jquery.fancybox-1.3.4.pack.js" type="text/javascript"></script>
  <script src="/~~~~/components/com_virtuemart/assets/js/vmprices.js" type="text/javascript"></script>
  <script src="/~~~~/media/system/js/mootools-core.js" type="text/javascript"></script>
  <script src="/~~~~/media/system/js/core.js" type="text/javascript"></script>
  <script src="/~~~~/media/system/js/modal.js" type="text/javascript"></script>
  <script src="/~~~~/media/system/js/mootools-more.js" type="text/javascript"></script>
  <script src="/~~~~/components/com_virtuemart/assets/js/chosen.jquery.min.js" type="text/javascript"></script>
  <script type="text/javascript">

And this is what the swMenuPro module calls up:
  <script type="text/javascript" src="http://~~~~/modules/mod_swmenufree/jquery-1.6.min.js"></script>
  <script type="text/javascript" src="http://~~~~/modules/mod_swmenufree/curvycorners.src.js"></script>
  <script type="text/javascript" src="http://~~~~/modules/mod_swmenufree/jquery.corner.js"></script>
  <script type="text/javascript" src="http://~~~~/modules/mod_swmenufree/DropDownMenuX.js"></script>