Category: Javascript

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.

MetaMod Position Display Management

When using Joomla! sometimes one requires to hide some information, like a specific menu, or an entire position.

MetaMod let’s you do this in a quite easy way. One can follow their documented technique of moving stuff from an non-existing position into the real position, or one can use a simpler strategy that does not imply having virtual positions and nor moving stuff between these virtual positions and the real position.

Imagine you wish to hide all position placeholders on a marketing landing page. It’s quite easy:

  • Download and install MetMod. Don’t forget to read the documentation to know how MetaMod works.
  • The first step is to define the MetaMod position in the last one to be interpreted by Joomla!, usually the footer or the debug.
  • This guarantees that our code will be executed only when all positions are already loaded.
  • The second step is to define the MetaMod execution rules, as stated in the documentation.
  • Next, in the PHP window, include the execution code that will hide or display the position through the injection of a Javascript conde snippet.

Here’s an example: let’s say that one wishes to hide the stuff on the left of the page (usually the menu, login, etc.) when the user is located in the Virtuemart Cart plugin.
Here’s what one has to do:

  1. Identify the location through the $option and $view parameter values.
  2. Inject a Javascript script that finds the left position element and hides it.
  3. If required, adjust the size of the remaining position in order to claim the extra space.
  4. Return the current position.
Here’s an example that hides the “column_left” position. Please note that this MetaMod example is located in the “debug” position, change it if necessary.
if ($option == 'com_virtuemart' and ($view == 'cart' or $view == 'pluginresponse'))
{
echo "
 <script>
   elem = document.getElementById('column_left');
   elem.style['display']='none';
   elem = document.getElementById('content_wrap');
   elem.style['width']='960px';
 </script>";
}

return 'debug';

Obviously this must be adapted to the template in use and it may required some adjustments, like the new size of the position that should claim the extra space.

One can use Firebug to help finding the HTML div elements identifiers involved.