jQuery, Zoom and Slide plugins in Magento 1.9

June 3, 2014 Mishel Soiko Magento
jQuery, Zoom and Slide plugins in Magento 1.9

Not so long ago Mаgentо released a new version – 1.9. And as a tribute to fashion this version also contains a new responsive theme, which itself is great news, however, we will describe this theme in another article. Today, I would like to talk about the 3 new javascript libraries, which we have been waiting for so long:

  • jQuery
  • Beautiful Zoomer
  • Multifunctional slider

jQuery library

This is a long-waited update.  Of course, the main purpose for adding jQuery is for supporting plugins of the responsive theme.  But let’s look at where and which variable has been reserved for such a long-awaited guest.

The folder with the new theme contains a global library js/app.js , which contains the following:

Beautiful Zoomer

Personally I have been pretty excited about this feature, and I can say that I have not been disappointed with it. To my opinion, the developers have chosen and excellent plug-in: jquery.elevateZoom.js (http://www.elevateweb.co.uk/image-zoom/examples)

To work with Zoomer the following global object has been declared:

And this is very good, because now any Magento module can easily initialize this object for its needs. For example, such modules like “Quickview” / “Colorswatch”. You just need to run the following command:

The library also checks the width of your device’s screen to find out whether or not it is necessary to increase the image.

However, there is a small drawback.  Although the plugin provides plenty of opportunities, it still lacks settings, so by default it looks not as impressive as it potentially can. So, let’s fix this!

Multifunctional slider

Quite often I see the situation when plenty of libraries are connected to different modules which perform quite similar tasks.  But instead of using all these libraries why not use a single but good library? And then on the basis of this library you will be able to create a slider both for a home page and for separate products (for example, Up-sells, Cross-sells)

In the new version of Magento we can find that single library to use for multiple sliders.

jquery.cycle2.js (http://jquery.malsup.com/cycle2/demo/) and its add-on jquery.cycle2.swipe.js for supporting touch interactions.

Slider initialization has been added to the library js\slideshow.js.

This code is an example of a slider for home page. But if we need to create a product slider, it is enough just to add the following parameter:

carousel-visible – Number of slides to be displayed in the carousel.

Slider has a lot of settings, but you can check them all on the demo-website, which I mentioned above, in the API section.



12 comments

  1. Hi,

    Do you know how can I add fancybox on the active image on product view page?
    I am trying but obviously I am doing something wrong.

    Thanks

  2. Hello Mishel,

    Do you know how to set up the zoom so that the zoom is inside the image?
    I guess type = inner should work bit to be honest, I do not know how could be modified.

    A sample code of the changed settings (and where to place it on the app.js) would be great.

    Thanks

  3. Jovan,

    Most important, make sure that the library fаnсybоx in head loads after jQuery.

    And then you apply this solution:

    You simply create a click event to open Fancybox.

    The classes were taken from the default theme. But you can use your own theme if necessary.

  4. Hi,
    Interesting to find out that the zoom can do more. The problem i have is that if the product image is small and no point in zooming, how do i switch the zoom off. It always tries to zoom and i only want it to zoom if the image is larger than the product image display box. Any ideas how this can be done?
    Many thanks

  5. Thx for sharing,
    We are using the new theme from buyshop for Magento
    do you have any suggestions on how to enable de flex slider to zoom
    we can’t find it.
    Best regards Erwin,

  6. Erwin,

    Please, contact us at store@belvg.com and we will help you to customize your theme according to your needs. Because right now we do not know what theme you are using and what sliders are installed on it. Magento 1.9 has the above described slider. There you can also read how to output sliders (the html which is used there is described).

  7. Hi,

    Thanks for showing how to add settings to the zoomer. Looking at the Elevate configurations page, there is a parameter for responsive, but it doesn’t seem to have any effect. Did you work with this at all?

    Thanks

  8. Jake,

    We use zoomer as a separate sub-module with this library. So we didnt work with zoomer close so far. In our module all settings are handled out to the admin panel. So we just redesigned improved for ourselves.

  9. Hello Mishel,

    can you help me, How to apply inner product zoom at product view page through rwd theme.

Post a new comment

top