Frique supports this item


180 comments found.

hi, I recently bought this zoom script from your store and integrated it with my magento store. It is working well but I am facing a problem hope that you can help me to solve it. When hover and zoom image, the etalage_magnifier box can not be moved to bottom, can you tell me how to do it please? Here is my example on my website:

Thank you so much and hope to receive your feedback soon. Best Regards, Kevin

Hi Kevin,
I see you have set height:auto !important in etalage.css for .etalage_thumb_image and maybe done other similar edits. This forces the thumb image to become deformed in this case because it prevents the Etalage script from managing the width/height of all its own images.

Try starting with the default CSS file and/or example files and customize with caution.


thank you, Frique. I changed some costumed css and it is working now.

Can I resize the picture and thumbnails?

By setting the option “smallthumb_hide_single” to false.

there appears a blank extra space at the bottom of the page (you can see it if you scroll down),which disappears if you hover mouse over the picture or switch pictures or they switch automatically.How do I eliminate that blank space?

I see it happens only in Opera, and i can’t seem to find any relation to Etalage. I’m afraid it’s a general page layout issue.

Great software. Just purchased for our website! I do have a need that may be available but just didn’t find it. I need to have a paragraph of information presented when a thumbnail is enlarged, ie. as Etalage autoplays or a user clicks on a thumbnail, a large image is presented AND a paragraph of information is presented. Any words of wisdom?

Thanks for the kind words.
To achieve this you can use the callbacks. These are functions that are triggered at certain events. One of Etalage’s callback functions is “change_callback” which triggers whenever the active frame changes. Inside the callback you can find out which frame is active and activate the appropriate paragraph. See “example_callback.html” for usage.


I’m using this plugin into Sobipro (Joomla Component)

Sobipro uses xsl instead of html.

How can I applied the sample html code to xsl?

here is my applied one, could you please check it out if it is correct. <ul id="example2"> <li> <img class="etalage_thumb_image" /> <xsl:attribute name="src"> <xsl:value-of select="entry/fields/field_gallery/data/@thumbnail" /> </xsl:attribute> <img class="etalage_source_image" /> <xsl:attribute name="src"> <xsl:value-of select="entry/fields/field_gallery/data/@image" /> </xsl:attribute> </li> <li> <img class="etalage_thumb_image" /> <xsl:attribute name="src"> <xsl:value-of select="entry/fields/field_gallery_2/data/@thumbnail" /> </xsl:attribute> <img class="etalage_source_image" /> <xsl:attribute name="src"> <xsl:value-of select="entry/fields/field_gallery_2/data/@image" /> </xsl:attribute> </li> <li> <img class="etalage_thumb_image" /> <xsl:attribute name="src"> <xsl:value-of select="entry/fields/field_gallery_3/data/@thumbnail" /> </xsl:attribute> <img class="etalage_source_image" /> <xsl:attribute name="src"> <xsl:value-of select="entry/fields/field_gallery_3/data/@image" /> </xsl:attribute> </li> </ul>

Regards, Aodto

Could you help me how to implement in SobPro. thank you !!

Hi Aodto,

I have no knowledge of XSL whatsoever, so I can’t help you there. I’d suggest to experiment with the code and see what works.

Hi. Thank you for great script. But I have some problem. Is there an option that stops the autoplay with some event?

I try this:

    autoplay: false

but it does’t work.


Works fine as far as i can see. You fixed it in the meantime? Probably a CSS z-index issue.

Yes, script works fine. But menu collapses when etalage-autoplay begins work. Z-index is not issue solution.

I see what you mean. Please send me an email via my profile page, so I can reply and send you a version that should fix the specific problem.

Hello, Firstly, excellent work on this script! Secondly, I had a couple questions… questions about the possibility and procedure to accomplish a few modifications: Question 1: Is there an easy way to get the image change to occur with a mouse over of the insets instead of a click (a la amazon)? I added this: jQuery("#etalage li").mouseenter(function() { if(!(jQuery(this).hasClass("etalage_smallthumb_active"))) { jQuery(this).click(); } }); but doesn’t seem like its a good means to accomplish said goal…

Question 2: This is much more far stretched.. but… I’d like to have the inset images scroll sooner (when you have more then the containing li.etalage_small_thumbs holds, the scrolling action that occurs when you click the last displayed inset), so that I can position a different inset (video) inline with the rest of the insets… is that possible?!? Thanks! Dom


1. I think what you mean can be done with the plugin option “smallthumb_select_on_hover”. Add the option when you initiate Etalage like so:

    smallthumb_select_on_hover: true

2. You could force the width of the small-thumbnails row with css like so:

    width: 200px !important;

Hope this helps!

1.) Perfectamundo! (espanol for “perfect!”) 2.) It works! It only scrolls upward when the original inset is selected, but that’s good enough for me. Thanks a bunch frique!


Etalage came integrated with a theme we purchased. However it came without etalage usage instructions or documentation. Could you advise where we can find this.


Sorry forgot to ask do you also have API manual as we are looking at having a swatch extension installed on our Magento theme and and the swatch developer requires the actual API and manual.


In the case of a theme author using Etalage in their theme, they remain the holder of the license. When they integrate it into their theme they are then in charge of supporting their customers regarding their custom implementation of Etalage and their theme as a whole. You can ask for support from the theme author or get a personal copy of Etalage that comes with the documentation, unminified code and usage examples.


I tried to test if it’s possible to grab the image height and width before initialize etalage, this won’t works and what code actually works if the images are of different size?

$(document).ready(function(){ $("#imgSizeS").load(function(){ var imgWidth=100; var imgHeight=100; var imgWidth = $("#imgSizeS").width(); var imgHeight = $("#imgSizeS").height(); alert(imgWidth) alert(imgHeight) //imgSizeL $('#etalage').etalage({ thumb_image_width: imgWidth, thumb_image_height: imgHeight, source_image_width: imgWidth*4, source_image_height: imgHeight*4 }); }); });

I just found out it works perfectly without applying any parameters and I could just use PHP to adjust the width will be fine. Great coding you have and works beautifully!

Hi Frique,

I’m creating some kind of selling project item for CodeCanyon that requires a slider.

Your slider seems to be perfect for showing the products, but I’m not sure if I purchase the Extended license I will be able to include that in the package.

I will give you fill credit for the slider (that is not the main feature of the item), but it will show the products that I want to show.

Can I use your slider for that? if not, I will appreciate if you tell me, but if you are agree, I will send the users to this page to acquire etalage if they want to use it in other project.

Thank you and GLWS

Hi Klerith,
The extended license should suffice for that purpose. It allows you to incorporate Etalage in your own project however you want, as long as you don’t sell Etalage by itself :)

Regards, Frique

As author, I understand what you are saying, but I prefer to ask and know if you are ok, I will give you full credit.

Thank you.

as I do to be enabled responsive design?

Hi. Etalage doesn’t have responsive features. I would advise to use CSS media queries to provide a simpler solution to smaller screens.

ok, thanks you !

Hi, can this display the zoom on the ‘inside’ rather than to the right?

Hi. Sorry, that’s not possible with Etalage at the moment.

Hi Frique,

thanks for this great script. I implemented it into my wordpress installation and it works fine in firefox, chrome and safari. :) In IE I have problems even viewing the pictures. :( What can I do here? Please have a look here:

Thanks in advance. Cheers Micha

Hi Micha,

You seem to start the script tag’s content with a ”—>” which doesn’t belong there. That might be why IE decides to abort everything after that.

Hi Frique,

thx for your answer. I deleted the ”—>” but unfortunately it does not work yet. Any further ideas what to do?

Thanks. :)

It’s hard to debug, and it seems the demo page is now using another solution. My suggestion would be to start at the beginning where Etalage still works in IE, then apply customizations gradually to see when it breaks.

hello, i just bought the plugin, the problem is that when the image is zoomed, it is resided into some fixed dimensions, please check this screen:

is possible to fix this? how can we get autoHight for the images, please help. we cant use the plugin if we cant fix this. thank you

Hi. Please look at the plugin options “zoom_width” and “zoom_height”, which determine the zoomed photo’s dimensions.

I keep receiving this error in my error-log for my website

File does not exist: /home/kkclient/

I checked the location of this file reference, and it is…

etalage.css, for the following…

background: url(../images/hint.gif) no-repeat;

I have not been able to find this file in my system, and I am not able to locate this in other locations. Was this accidentally not packaged?

Hi. You most likely copied the initialization code from the demo pages and have the “show_hint” option set to “true”. Remove that line or set it to false to make Etalage stop looking for it. If you do want to use it, you can find it in the download package’s images folder.

With Etalogue when you open a product page all large images load at once. With others, only the main image loads + thumbnails. All other large images load only AFTER you click the thumbnail. This makes mobile site run much much faster,

Is there any solution for this?


That is correct and it is a design decision. When loading the images after interaction, the user will always have to wait a bit. When they are all preloaded the user can see the zoomed images right away when interacting.

On a sidenote, Etalage was created in a time when the mobile web was less important so it is not optimal for mobile use.

Hi, just wanted know if it will work on ebay listing? Regards Grazyna

Hi. I have no experience setting up ebay listing pages so I can’t tell.

You’d have to be able to do the following:
  • Include jquery (unless already included)
  • Include a custom script (1 for Etalage, 1 for the initialization snippet)
  • Include a custom CSS file
  • Add your custom HTML with image URLs

Hello, I am using Etalage with the duplicate example, is there a way to have two Etalages on one page one with zoom functionality and one without?

Then instead of duplicates (which share the same settings), you can add multiple instances with each their own settings. Give each instance its own ID attribute, and initiate them individually like so:

$('#etalage1').etalage({ options1 });
$('#etalage2').etalage({ options2 });


is it possible to get a tax invoice for the purchase?

Purchase Code: aaba7d0f-a689-4aec-814c-b267c0600951

The address reads: Elmar Lohmüller Idingerstr. 5 79110 Freiburg Germany

Thank you, best regards


Hello Elmar. Please contact CodeCanyon/Envato about this, as they handle the financial aspect of the marketplace.

Thanks, I found it:-) Another question: I have 4 pictures, and I want them to be available in Fanybox after the user clicked on the large image…so that the user can move to the next image. Is that possible? Thanks Elmar

Hi. This is an incomplete example, but should work:

Hi, Ive inherrited a website that contains your script for image zooming and whilst all appears to work correctly for single images, as soon as the product contains multiple images the zoomed image is out of sequence.

Ive tried all sorts of things from triggering a click onload to trying to change the order via JS. but nothing seems to sort out the item arrangement.

If the client has to purchase a new license for support, that shouldnt be a problem, but I am finding it to be rather stange.

is the link to the site, any assistance greatly appreciated


When I view the generated source code in Chrome’s dev tools I see there is a script tag inside the ul id="etalage" that shouldn’t be there. This is probably in the way when the script is processing the markup.


datlark Purchased

I lost the download after I purchased your tool too zoom images. I need the zip file again to customize it. Please let me know if I need to provide any information regarding this

Hi. The download should be listed and always available on your downloads page at