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
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?
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
It is throwing JavaScript errors. Try with JCE Mediabox disabled.
Turned off JCE Media box - No change. Still the same thing.
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.
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
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.
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?
Either you are not loading jQuery or you are loading more than one version. http://forum.virtuemart.net/index.php?topic=119638.0
...I thought jQuery was included in the Joomla/VM installations -? Is it really possible that I don't have jQuery installed?
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.
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 (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?
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.
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>
You should only load one version - and load it before the other VM js files. Looks like you should use jQuery Easy. http://forum.virtuemart.net/index.php?topic=119638.0
Super solution: I installed jqueryeasy, activated jquery via the plugin, it removed the extra reference to jquery.js caused by the module - and the multiple photos do appear when the thumbnails are clicked!
Thanks!!!
Hi there,
I have the same issue, where I have several images added, but the thumbnails don't respond.
Could someone post the correct settings for JQuery Easy?
I also tried looking with Firebug and Firefox Debug, but I don't see the problem, perhaps someone else does?
See: https://www.edsclassic.com/index.php?option=com_virtuemart&view=productdetails&virtuemart_product_id=2894&virtuemart_category_id=208&Itemid=174
As always, thanks in advance!
Treodude
J2.5.20
VM 2.6.6
jqueryeasy - only needs load jquery - I normally use v1.1.8
and the chosen fix
http://forum.virtuemart.net/index.php?topic=123564.msg421778#msg421778
Hi,
I followed your instructions over in the other thread, published, as last one to load, with the line of code to paste in the plugin, but no result.
However, I turned the plugin off and changed some settings in VM Config, and now it's working!
See attachements for my config in both VM as well as the plugin, maybe there is a better solution?
[attachment cleanup by admin]
If switching on fancybox works then your template uses fancybox