1 Reply Latest reply on Feb 7, 2009 9:50 PM by Tihomir Surdilovic

    I need a zooming tool

    Ahmet temiz Novice

      hello

      I need a zooming tool for a map displayed with a4j:mediaoutput.

      how can I do that ?

      regards

        • 1. Re: I need a zooming tool
          Tihomir Surdilovic Master

          I was doing something similar and this is how it was implemented:

          1. JavaScript code for "enlarge", "decrease" copied from samples/richfaces-demo/src/main/webapp/scripts/picturesUtils.js

          <script type="text/javascript">
          //<![CDATA[
          function resize(id, coeff) {
           var pic = document.getElementById(id);
          
           var w = Math.round(pic.width * coeff);
           var h = Math.round(pic.height * coeff);
          
           if (w > 1 && h > 1) {
           pic.width = w;
           pic.heigth = h;
           }
          }
          
          function enlarge(id){
           resize(id, 1.1);
          }
          
          function decrease(id){
           resize(id, 0.9);
          }
          //]]>
          </script>
          


          2. a4j:mediaOutput and rich:contextMenu
          <a4j:mediaOutput id="pic" element="img" cacheable="false"
           createContent="#{mediaBean.paint}" value="myimage.png"
           mimeType="image/jpeg" >
          </a4j:mediaOutput>
          
          <rich:contextMenu event="oncontextmenu" attachTo="pic" submitMode="none">
           <rich:menuItem value="Zoom In" onclick="enlarge('pic');" id="zin"></rich:menuItem>
           <rich:menuItem value="Zoom Out" onclick="decrease('pic');" id="zout"></rich:menuItem>
          </rich:contextMenu>
          
          

          (see http://livedemo.exadel.com/richfaces-demo/richfaces/contextMenu.jsf)