Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

Make image appear as main image in lightbox when clicked
 
avfeathers
Jr. Member
 
Total Posts:  4
Joined:  2013-03-27
 

Hello, I have a lightbox on my magento install, and it works great.

I have added small square swatches above the \\\\\\\"Add to cart\\\\\\\” button:
http://ec2-54-244-175-155.us-west-2.compute.amazonaws.com/magento/index.php/op12-selected-dyed-drabs-9-12-inches.html#

When I click the yellow square swatch, I got it to open a yellow feather in its own light box.
When I would like to do, is when that yellow square swatch is clicked, is to make it show up as the main image on the left and replace the blue feather.

Here is media.phtml which contains the lightbox stuff on the left:
http://pastebin.com/mS2svyRk

I took part of the code that makes the small thumbnails that allows you to click and change the main picture, and made it static code for testing with:

<div class=\\\"slide \\\">
                    <
class=\\\"zoom-thumbnail\\\" href=\\\"http://ec2-54-244-175-155.us-west-2.compute.amazonaws.com/magento/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/o/p/op12_dkt.jpg\\\" data-easyzoom-source=\\\"http://ec2-54-244-175-155.us-west-2.compute.amazonaws.com/magento/media/catalog/product/cache/1/thumbnail/350x350/9df78eab33525d08d6e5fb8d27136e95/o/p/op12_dkt.jpg\\\" title=\\\"OP12 Dark Turquoise\\\"><img class=\\\"fade-image\\\" src=\\\"http://ec2-54-244-175-155.us-west-2.compute.amazonaws.com/magento/media/catalog/product/cache/1/thumbnail/68x68/9df78eab33525d08d6e5fb8d27136e95/o/p/op12_dkt.jpg\\\" width=\\\"68\\\" height=\\\"68\\\" alt=\\\"OP12 Dark Turquoise\\\" style=\\\"opacity: 1;\\\"></a>
                </
div>

Id like to paste this code on the bottom of the page and make it work like it is with the other thumbnails…
I think I need to use javascript or jquery to accomplish this…

 
Magento Community Magento Community
Magento Community
Magento Community
 
avfeathers
Jr. Member
 
Total Posts:  4
Joined:  2013-03-27
 

<!DOCTYPE html>
<
html>
<
head>
<
script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script type="text/javascript">
$(
document).ready(
        function()
{
                
$("img.change-image").hover(
                        function()
{
                                
$('.new-image').attr('src''http://www.site.com/new.jpg');
                        
}
                  
);
        
}
);
</script>
</head>
<
body>

<
img class="new-image" src="http://www.site.com/original.jpg">
<
a href="#"><img class="change-image" src="http://www.site.com/clickme.png"></a>

</
body>
</
html>

I can hover over the CLICKME.png, and it will change the original.jpg to new.jpg ...

Now trying to implement that to magento is a different story....

I put the javascript code in /magento/htdocs/app/design/frontend/default/metroshop/template/page/html/head.phtml in the head section, and it shows up if I view source of webpage....

<script type="text/javascript">
$(
document).ready(
        function()
{
                
$("img.change-image").hover(
                        function()
{
                                
$('.zoom-image').attr('src''http://www.site.com/new_image.jpg');
                        
}
                  
);
        
}
);
</script>

Than in /magento/htdocs/app/design/frontend/default/metroshop/template/catalog/product/view.phtml I put the html code in

<a href="#"><img class="change-image" src="http:///www.site.com/clickme.png"></a>

zoom-image is the image class of the image I want to change, it is in in magento/htdocs/app/design/frontend/default/metroshop/template/catalog/product/view/media.phtml

<img class="zoom-image" src="http://www.site.com/original.jpg" width="350" height="350" alt="OP12 Dark Turquoise" title="OP12 Dark Turquoise">
 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top