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:
|
1 |
var $j = jQuery.noConflict(); |
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:
|
1 2 3 |
var ProductMediaManager = { …. } |
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:
|
1 |
ProductMediaManager.init() |
The library also checks the width of your device’s screen to find out whether or not it is necessary to increase the image.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
init: function() { . . . . . enquire.register("screen and (min-width:768px)", { match : function() { ProductMediaManager.zoomEnabled = true; ProductMediaManager.initZoom(); }, unmatch : function() { ProductMediaManager.destroyZoom(); ProductMediaManager.zoomEnabled = false; } }); . . . . . } |
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!
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
var settings = { // set tint background tint:true, tintColour:'#F90', tintOpacity:0.5, // Size zoomWindowHeight: 300, zoomWindowWidth: 400, borderSize: 0, // Position zoomWindowOffetx: 10, zoomWindowOffety: 0, // Additional settings for Zoomer positioning. // zoomWindowPosition: 1, // zoomType: "inner", // Fade-in speed settings zoomWindowFadeIn: 500, zoomWindowFadeOut: 500, lensFadeIn: 500, lensFadeOut: 500, // Ability to zoom by using the mouse scroll. scrollZoom : true, // inertia - my favorite one easing: true } . . . . . createZoom: function(image) { . . . . . image.elevateZoom(settings); }, |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<div class="slideshow-container"> <ul class="slideshow"> <li> <a href="{{config path="web/secure/base_url"}}accessories/eyewear.html"> <img src="{{media url="wysiwyg/slide-1.jpg"}}" alt="An eye for detail - Click to Shop Eye Wear" /> </a> </li> <li> <a href="{{config path="web/secure/base_url"}}women.html"> <img src="{{media url="wysiwyg/slide-2.jpg"}}" alt="Style solutions - covet-worthy styles in travel-friendly fabrics - Click to Shop Woman" /> </a> </li> <li> <a href="{{config path="web/secure/base_url"}}men.html"> <img src="{{media url="wysiwyg/slide-3.jpg"}}" alt="Wing man - hit the runway in stylish separates and casuals - Click to Shop Man" /> </a> </li> </ul> <div class="slideshow-pager"> </div> <span class="slideshow-prev"> </span> <span class="slideshow-next"> </span> </div> |
Slider initialization has been added to the library js\slideshow.js.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$j('.slideshow-container .slideshow') .cycle({ slides: '> li', pager: '.slideshow-pager', pagerTemplate: '<span class="pager-box"></span>', speed: 600, pauseOnHover: true, swipe: true, prev: '.slideshow-prev', next: '.slideshow-next', fx: 'scrollHorz' }); |
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.
Partner With Us
Looking for a partner that will help you to grow your business? We are the right company to develop your webstore. Feel free to get in touch with us. We will be happy to discuss your business opportunities and provide you with a Free Quote.
Talk to Vlad
Hello Mishel,
can you help me, How to apply inner product zoom at product view page through rwd theme.
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.
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
Karthik,
Here is the full description http://jquery.malsup.com/cycle2/demo/carousel.php Please check it.
Hi
I have added slider in my project but i give carousel-visible in js, Its not working…
Erwin,
Please, contact us at [email protected] 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).
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,
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
Raimundo,
Here is the full description of the settings:
http:// elevateweb.co.uk/image-zoom/configuration
The article describes where to add them into app.js
Check this line:
image.elevateZoom();
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.
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
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