Jcrop

Példa

X1: Y1:

X2: Y2:

Magasság: Szélesség:

Deklaráció

        $(document).ready(function(){
          var api = $.Jcrop('#cropbox', {
            onSelect: showCoords,
            onChange: showCoords
          });

          $('#enable, #active').hide();

          // paraméterek kijelzése
          function showCoords (c){
            $('#x1').val(c.x);
            $('#y1').val(c.y);
            $('#x2').val(c.x2);
            $('#y2').val(c.y2);
            $('#width').val(c.w);
            $('#height').val(c.h);
          }

          // kezdeti kijelölés
          $('#setSelect').click(
            function(e){
              api.setSelect([250, 133, 450, 333]);
            }
          )

          // animáció 1
          $('#anim1').click(
            function(e){
              api.animateTo([0, 0, 200, 200]);
            }
          )

          // animáció 2
          $('#anim2').click(
            function(e){
              api.animateTo([500, 266, 700, 466]);
            }
          )

          // kijelölés megszüntetése
          $('#release').click(
            function(){
              api.release()
            }
          )

          // Jcrop letiltása
          $('#disable').click(
            function(){
              api.disable();
              $(this).hide();
              $('#enable').show();
            }
          )

          // Jcrop engedélyezése
          $('#enable').click(
            function(){
              api.enable();
              $(this).hide();
              $('#disable').show();
            }
          )

          // Jcrop megszüntetése
          $('#destroy').click(
            function(){
              api.destroy();
              $('#disable, #enable, #setSelect, #anim1, #anim2, #release').hide();          
              $(this).hide();
              $('#active').show();
            }
          )

          // Jcrop aktiválása
          $('#active').click(
            function(){
              $('#disable, #setSelect, #anim1, #anim2, #release, #destroy').show();          
              $(this).hide();
              api = $.Jcrop('#cropbox');
            }
          )
        });
      

HTML kód

        <p><img src="images/img1.jpg" id="cropbox" width="700" height="466" alt=""/></p>

        <form action="#" onsubmit="return false;">
          <label for="x1">X1:</label><input type="text" id="x1" name="x1" value="" />
          <label for="x1">Y1:</label><input type="text" id="y1" name="y1" value="" />
          <label for="x2">X2:</label><input type="text" id="x2" name="x2" value="" />
          <label for="y2">Y2:</label><input type="text" id="y2" name="y2" value="" />
          <label for="height">Magasság:</label><input type="text" id="height" name="height" value="" />
          <label for="width">Szélesség:</label><input type="text" id="width" name="width" value="" />

          <input type="button" id="setSelect" name="setSelect" value="setSelect()" />
          <input type="button" id="anim1" name="setSelect" value="Animáció 1" />
          <input type="button" id="anim2" name="setSelect" value="Animáció 2" />
          <input type="button" id="release" name="release" value="release()" />
          <input type="button" id="disable" name="disable" value="disable" />
          <input type="button" id="enable" name="enable" value="enable" />
          <input type="button" id="destroy" name="destroy" value="destroy" />
          <input type="button" id="active" name="active" value="Aktivál" />
        </form>
      

« bezár