News:

Looking for documentation? Take a look on our wiki

Main Menu

Multiple product images not showing when clicked

Started by stradweb, October 07, 2013, 11:21:32 AM

Previous topic - Next topic

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?
Kelvyn
Lowestoft, Suffolk, UK

Retired from forum life November 2023

Please mention your VirtueMart, Joomla and PHP versions when asking a question in this forum

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.
Kelvyn
Lowestoft, Suffolk, UK

Retired from forum life November 2023

Please mention your VirtueMart, Joomla and PHP versions when asking a question in this forum

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.
Kelvyn
Lowestoft, Suffolk, UK

Retired from forum life November 2023

Please mention your VirtueMart, Joomla and PHP versions when asking a question in this forum

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.
Kelvyn
Lowestoft, Suffolk, UK

Retired from forum life November 2023

Please mention your VirtueMart, Joomla and PHP versions when asking a question in this forum

guybr

#8
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

Kelvyn
Lowestoft, Suffolk, UK

Retired from forum life November 2023

Please mention your VirtueMart, Joomla and PHP versions when asking a question in this forum

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.
Kelvyn
Lowestoft, Suffolk, UK

Retired from forum life November 2023

Please mention your VirtueMart, Joomla and PHP versions when asking a question in this forum

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.
Kelvyn
Lowestoft, Suffolk, UK

Retired from forum life November 2023

Please mention your VirtueMart, Joomla and PHP versions when asking a question in this forum

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>