1

I need to make a popup window come up when user clicks on a html link.

Basically I'm trying to make users see a bigger picture of a wrapping paper for products.

I'm not very familiar with Javascript so any help on how to solve this step by step is welcome.

2

You can use Fancybox for this http://fancyapps.com/fancybox/

First you need to load jQuery and fancybox to your page:

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.pack.js"></script>

After add link to the large image around your small image

<a href="http://www.yoursite.com/large-image-name.jpg" class="various"><img src="http://www.yoursite.com/small-image-name.jpg" /><a>

now you need to run fancybox

jQuery(document).ready(function() {
    jQuery(".various").fancybox({
        maxWidth    : 450,
        maxHeight   : 350,
        fitToView   : false,
        width       : '70%',
        height      : '70%',
        autoSize    : false,
        openEffect  : 'none',
        closeEffect : 'none'
    });
});
  • you can use the xml to load the js files but Magento doesn't like external files (from CDN), so you have 2 options. 1- is to add this script to your cart.phtml and it will work. 2- download jquery and fancybox, load it to your js folder and add it to the site via xml. I'll go for the first option as you will load those files from CDN not your server. ---- to make the fancybox run on your link you need to add between <script> tag in your phtml file. – Ahmed Elawadi Oct 14 '14 at 16:09
  • You can use this in your xml <action method="addItem"><type>skin_js</type><name>js/jquery.fancybox.pack.js</name></action> – Ahmed Elawadi Oct 14 '14 at 16:12
  • Method #1 works and the popup window with the larger image is now displayed. However, popup window does not show any "close" option and I cannot return to the source page. How could I solve this? – Frank Oct 14 '14 at 16:36
  • Sorry Frank totally forgot, you need to load the fancbox images and css here is it github.com/fancyapps/fancyBox/tree/master/source – Ahmed Elawadi Oct 14 '14 at 16:45
  • Ok, thanks. Shoud I upload fancybox into magento/js folder? – Frank Oct 14 '14 at 16:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.