I am trying to get the main product image to change with click or hoverover the thumbnails, much like Amazon.com. I have tried modifying media.phtml with an ajax script but I am no coder so my attempts have been fruitless.
Here is my media.phtml
/** * Product media data template * * @see Mage_Catalog_Block_Product_View_Media */ ?> <?php $_product = $this->getProduct() ?> <?php if ($_product->getImage() != 'no_selection' && $_product->getImage()): ?>
var request = false; /*@cc_on @*/ /*@if (@_jscript_version >= 5) try { request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e2) { request = false; } } @end @*/ if (!request && typeof XMLHttpRequest != 'undefined') { request = new XMLHttpRequest(); }
function ajaxSwitch(content) {
/*the name of your page with the content goes here */ var url = "media.phtml" + escape(content); request.open("GET", url, true); request.onreadystatechange = go; request.send(null); }
function go() { if (request.readyState == 4) { if (request.status == 200) { var response = request.responseText; /* 'ajaxcontent' is the name of my div that will contain the info */ document.getElementById("ajaxcontent").innerHTML = response; } } }
function showIt() { var aTags=document.getElementById('options').getElementsByTagName('a'); for (i=0; i<aTags.length; i++) { aTags[i].onclick=function() { var show=this.href.split('content=')[1]; ajaxSwitch(show); return false; } } } window.onload=showIt;
Sorry for the bad coding
Can any of you coding gurus help correct/rewrite the code?
@Tashman,
Yes I did, although I have modified the theme extensively so its not easy for me to remember. I changed the app/design/frontend/default/default/template/catalog/product/view/media.phtml to include the javascript “Image Thumbnail Viewer II”, available at: http://www.dynamicdrive.com following their instructions.
My media.phtml wouldn’t be much use, since like I said, I have changed it extensively.
Hope this helps.
Just implemented this.. used the javascript on the above page out of box without modification and everything seems to be working properly. My media.phtml file:
This can be done much simpler with some inline, or external JavaScript. I say inline because Varien took the lazy way out and hardcoded this inline, against best practices. So if you don’t care, you can too. Admittedly, it’s the simplest option.
The following is found in templates/catalog/product/view/media.phtml ...
As you can see above, I actually link to the product image, in case JavaScript is disabled. You can easily change this to work on-hover by replacing onclick with onhover. You can have both onclick and onhover at the same time as well, at which point you may just want to go “external” with the javascript, if you feel so inclined.
To make this external, you could add a rel attribute to the above <a>, and loop through all <a> tags with the conditional: element.getAttribute(’rel’).match(’your-rel-value’) in your external JS file. Obviously this route isn’t as simple, as you’d need to be quite familliar with the inner-workings of JavaScript write a JavaScript class that can handle assigning and handling the click events, so I won’t go into too much detail here, and just take the “Varien” route.
You might want to take a look at tutorial of how to create color changer in Magento. Although the process is a little longer, a PHP developer should find its way
@oakRunk: I’ll assume this is something related to your theme specifically. This implementation worked fine in the default modern theme. But any changes would be made within the same file.
This works great...except that the ‘more views’ pictures are all up in the corner of their little box, leaving a lot of white space. Anyone else see this?
