Zoom images on VirtueMart products

Having a good zoom efect on Virtuemart products page details can be easy.
This solution is based on Dynamic Drive Image Power Zoomer v1.1, based on jQuery, and was tested on VirtualMart 2.

The first step is to download the ddpowerzoomer.js file from the Image Power Zoomer v1.1.
Place this file on your VirtueMart template Javascript folder, usually /templates/VM_TEMPLATE/js, where VM_TEMPLATE is your current VirtueMart template.
Open the file and find the init:function. Inside it, find the first div, it should be the first line, and add z-index:100000 to its style, so that it looks like this:

  init:function($){
    var $magnifier=$('<div style="position:absolute;width:100px;height:100px;display:none;overflow:hidden;border:1px solid black;z-index:100000;" />')
      .append('<div style="position:relative;left:0;top:0;" />')
      .appendTo(document.body) //create magnifier container and add to doc
    [...]
  }

This will force the zoomed image div container to be above the Joomla! Modal SqueezeBox, that you can find in then /media/system/js/modal.js file. That is the file loaded by Joomla!, which is non readable by humans, at it’s side there is modal-uncompressed.js, the human readable version.
The SqueezeBox is responsible for making the screen dark and showing the large picture. Since the SqueezeBox sets its z-index to a high value, 65000+, we need to force the zoomed image to be above it, that’s why we’ve set the z-index to 100000.

Next open the VirtueMart template index.php file, located on /templates/VM_TEMPLATE/index.php, and right before closing the head tag, place the following code:

<!-- Zoom Component -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
/***********************************************
* Image Power Zoomer- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

if (null != SqueezeBox) {
  SqueezeBox.presets.onUpdate=
    function applyZoomEffect() {
      jQuery(document).ready(function($){ //initialize power zoomer on DOM load
        $.getScript("<?php echo $template_path ?>/js/ddpowerzoomer.js", function(data, textStatus, jqxhr) {
          var $imgref=$('#sbox-content > img');      
          options = {powerrange:[2,5], magnifiersize:[150,150]};
        options.largeimagesrc = $imgref.attr('src');
          ddpowerzoomer.setupimage($, $imgref, options)
        });
      });
    }
}
</script>
<!-- End Zoom Component -->

Note that the jQuery loaded is the current stable, 1.7.2. Your template may already load a previous version of jQuery, they should not get in conflict.

Now run your online store and click on an image product, it should have a zoom option

Here’s some explanation on how all this works.
The product large image is dynamically created when the user clicks on the product thumbnail, though a CSS event.
That’s why we have to override the update event of the SqueezeBox, which is responsible for showing the large image.
When the SqueezeBox shows the large image, it will call the applyZoomEffect function that we have defined.
This function will load the ddpowerzoomer.js script file and after it loaded, it will find the large image div container, set the zoom options (check the Image Power Zoomer options) and finally it will set up the zoom for the large image.

jQuery Calendar Date Picker in Django Forms

One of Django missing features that all developers miss is the lack of a calendar component that allows a user to select a date from a visual component instead of writing the date in a text field using a predefined format.

The common solution that seems to use the calendar from the administrator graphical interface.
Unfortunately this is a hack that takes too much work for a possible failure, since a Django update may break it all.

While Django does not provide such component, the best option is to use a solid solution, such as using the independent jQuery Calendar Date Picker.
This can be set up in ten minutes and does not depend on Django version.

The first step is to download the jQuery Datepicker component.

Uncompress it and put it in your media directory, so that it looks something like “media/jquery”, or something else that is fits best with your structure. For the current example “media/jquery” will be used.

In your HTML file, include the following scripts:

<link type="text/css" href="/media/jquery/css/smoothness/jquery-ui-1.8.18.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="/media/jquery/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/media/jquery/js/jquery-ui-1.8.18.custom.min.js"></script>

Please note that the file names will vary according to the jQuery version and the CSS will vary according with the selected template. Don’t forget to confirm the location and file names.

Next, you must bind your form objects with the jQuery Datepicker with the following script. Also include this on your HTML file

<script>
$(function() {
  $( "#id_form_date_field" ).datepicker();
});
</script>

Where “form_date_field” should be your form date field, keep the “#id_” because Django precedes the ids with “id_”

If you require internationalization, load the correspondent i18n file after the “jquery…min.js” file:

<script type="text/javascript" src="/media/jquery/development-bundle/ui/i18n/jquery.ui.datepicker-{{request.LANGUAGE_CODE}}.js"></script>

This will load the appropriate i18n file.

If you try it and it’s not working, check the files location and the name of the object you’re binding to, these are the two most common problems.