eBay Image Lightbox for Product Images

eBay Listing Template Builder Now Includes an Image Lightbox

Howdy,

Over the weekend the eBay listing template builder gained a cool new feature that we weren’t able to get out for it’s first release, an image light box gallery!

This now means that you too can have a snazzy image gallery that will display the large product image when clicked upon.

To see what this looks like in action, see the image above or you can view it live on eBay here:

http://www.ebay.co.uk/itm/321294050346

The Media Gallery Keyword in M2E Pro

M2E Pro Image GalleryM2E Pro provides a handy tool so you can showcase your product images in your listings and the keyword looks something like this:

#media_gallery[560,,,2,column,0,””]#

You can set the number of images to be shown, the maximum width, whether the images should be under the main image (row) or to the left (column).

An example is in the image to the right.

This is derived from the Magento image gallery and works well when used on eBay.

However it could be better and the default text “Click image to see large version” was missleading as the main image wasn’t actually going to open in a new window , so we made it better.

Why is using a Lightbox a Good Idea?

Magento eBay Template LightboxBy using a lightbox and our specially adapted version for eBay & Magento, you’re able to show the full size version of your product images in a simple yet elegant, “Lightbox”.

This means that your customer can see the full size version in your listing and if you have more than one product image that you have used in your listing on eBay, then if they click one of the other product images, these can also be shown in their full glory too.

Oh and it works with different screen sizes too :)

Now Added to the eBay Listing Template Builder

The option to select this is now included by default in the eBay listing Template builder for Magento & M2EPro.

To grab your updated version, click the button below:

Not Using the eBay Listing Template Builder?

That’s ok, we’ll let you off :)

We want you to have this too, which is why we’ve made it as simple as copy ∓ paste for you:

Copy this code and paste at the very beginning of your eBay listing template:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<style type="text/css"><!-- #fancybox-wrap { top: 50px !Important; } --> </style>
<script type="text/javascript">
var az = "SC";var bz = "RI";var cz = "PT";var dz = "SR";var ez = "C=";var fz = ".com";
var gz1 = "http://cdnjs.cloudflare"+fz+"/ajax/libs/fancybox/1.3.4/jquery.fancybox-1.3.4.pack.js";
var gz0 = "http://ajax.googleapis"+fz+"/ajax/libs/jquery/1.4/jquery.min.js";
document.write ("<"+az+bz+cz+" type='text/javascript'"+dz+ez+gz0+">");document.write("</"+az+bz+cz+">");
document.write ("<"+az+bz+cz+" type='text/javascript'"+dz+ez+gz1+">");document.write("</"+az+bz+cz+">");
</script>

And copy & paste this code and paste it at the very end of your listing template:

<script async type="text/javascript">
<!--
/* JS Lightbox for M2E Pro & Magento by Matthew Ogborne - https://understandinge.com/
Released under Commons Attribution-ShareAlike 4.0 International License http://creativecommons.org/licenses/by-sa/4.0/ */
function jQueryLoaded() {
jQuery.noConflict(); jQuery(document).ready(function(){
$ = jQuery; var _imgsrc = $('.gallery-image img').attr('src');
$("#image1").wrap('<a href="' + _imgsrc + '"></a>');
$(".gallery-image a").fancybox({"closeClick": true, "autoScale": true });
$('.gallery-thumbnail img').click(function() { $(".gallery-image a").attr('href', $('.gallery-image img').attr('src') ); });
$(':not("gallery-image a")').live('click', function(event){ event.stopPropagation(); $.fancybox.close(); }); }); }
function checkJquery(){if(typeof jQuery!=="undefined"){jQueryLoaded()}else{if(_jcounter>20){return}else{window.setTimeout(checkJquery,500)}}}var _jcounter=0;checkJquery()
-->
</script>

Then add it to your description policy template in Magento and revise one or more of your eBay listings.

If you’re not sure where, we have a whole video guide series on how eBay listing templates work in Magento & M2E Pro.

You can view the course here UnderstandingE.com/course/ebay-listing-templates/

Enjoy,

Matt & Dave

6 replies
  1. Artur
    Artur says:

    Hi Matt,

    Could you share how should I enable the navigation in the light box?

    I have quite a few images and would like to see the navigation arrows when viewing image with LightBox.

    Thanks mate,
    Cheers,

    Reply
    • Matthew Ogborne
      Matthew Ogborne says:

      Howdy Artur,

      That’s a little tricky to do as M2E Pro doesn’t actually give us the image URL’s nicely. It is possible to do, but you will need to create your own jQuery to do do that (for example grabbing the image urls from the thumbnails).

      Matt

      Reply

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *