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.

Improve this question

1 Answer 1

Reset to default
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'
    });
});
Improve this answer
7
  • 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
    Commented Oct 14, 2014 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
    Commented Oct 14, 2014 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
    Commented Oct 14, 2014 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
    Commented Oct 14, 2014 at 16:45
  • Ok, thanks. Shoud I upload fancybox into magento/js folder?
    – Frank
    Commented Oct 14, 2014 at 16:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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