previous exampleHome

Crop large images or make thumbnails with AJAX-ZOOM and "jCrop". Generate zoomTo gallery with preview thumbs for 2D/ 360°/ 3D.

Loading, please wait...
    About AJAX-ZOOM crop editor [Last updated: 2014-09-02]

    Ver. 4.1.9+ With this tool you can easily create several crops from 2D images / galleries, 360 spins or 3D multirow which are loaded into AJAX-ZOOM player. Besides other thinkable purposes the goal here is to make a "crop gallery" placed outside of the AJAX-ZOOM player. Clicking on the cropped thumb will zoom and for 360/3D spin & zoom to specified area of the image. This is a really nice looking effect where the user is guided to the highlights of the product by simply clicking on the thumbs in familiar manner.

    In the frontend where you will show this product tour to your customers AJAX-ZOOM can be integrated into responsive layout, shown in a lightbox, fullscreen etc. Also the cropped thumbs do not necessarily need to be loaded into the slider used here. The simple JSON produced by this configurator gives enough information to place these cropped thumbs wherever on the page. The basic functionality for the onclick / click events are AJAX-ZOOM API functions $.fn.axZm.zoomTo() for plain 2D and $.fn.axZm.spinTo() for 360 turn able objects.

    How to
    1. Hit crop settings button or crop settingstab to adjust crop selector e.g. set aspect ratio and output parameters for the thumbnail.
    2. Hit the crop button to toggle crop and select region to crop.
    3. When ready hit the red "fire crop" button.
    4. At the cropped imagestab you can view the crops in real size, delete and reorder the crops.
    5. Optionally add descriptions to the crop regions in descriptiontab.
    6. Save the created setup e.g. in a JSON file to reproduce the work at some other frontend.
    "Clean" examples

    This file (example35.php) is the actual crop editor to define the copped thumbs and optionally descriptions. It is supposed to be in some restricted area of your page. For showing the results and integration of the player into your frontend please use one of the following "clean" examples as the starting point. Also please be aware of that AJAX-ZOOM is highly configurable so you can change the look and feel of nearly everything you could think of.

    example35_clean.php basically has the same setup as this editor but without the toolbar under the player.
    If you want to have a horizontal gallery please check out example35_clean_horizontal.php
    For responsive integrations please use example35_responsive.php
    On request AJAX-ZOOM team will deliver to you exactly what you need as a different example or integrated into your page layout / html.
    Is it free?
    • The answer is Yes and No. AJAX-ZOOM has it's own License Agreement, please read!
    • Under certain conditions You can use it totally for free!
    • In any case you can and should download and test AJAX-ZOOM without any further obligations. If you like it and would have certain features enabled - You can buy it.
    • In case after all you have any doubts or questions please contact the support.
    Jcrop (selector) settings
    Thumbnail settings
    W: H: px
    (10 - 100)
    Crop results (real size)
    Drag & drop to reorder the thumbs, click to get the paths and other information (see below), double click to zoom.
    - crops will be not deleted physically here!
    Paths
    (please note that full Url might differ if this editor is implemented in a backend of some CMS)
    (only available if "cache" option is chacked under "crop settings" tab)
    Crop description
    Optionally add a title || description to use them later in various ways. In this editor and also in the derived "clean" examples like example35_clean.php we use "axZmEb" - expandable button (AJAX-ZOOM additional plugin) to display these titles || descriptions over the image respectively inside the player. You could however easily change the usage of title || description in your implementation, e.g. display them under the player or whatever. Just change the "handleTexts" property of the options object when passing it to $.axZmImageCropLoad - see source code of e.g. example35_clean.php;
    Import all thumbs
    separated with
    and convert to be cached and replace thumb size W: H: px
    and convert px coordinates to percentage
    Save JSON to file
    (can be set or disabled inside '/axZm/saveCropJSON.php')
    - keep linebreaks, tab stops etc.
    - creates backup of the current JSON file if present with a timestamp in file name
    to .json (a-zA-Z0-9-_)
    e.g. "eos_1100d" (on default the file is saved into "pic/cropJSON" folder)
    Notes
    • In your final frontend presentation you can compose url out of query string with js $.fn.axZm.installPath()+'zoomLoad.php?'+queryString
    Load a different 2D / 360 or 3D content
    You do not need to edit html of this file in order to load a different 2D / 360 or 3D content into the editor. Just enter a path into one of the fields below and press "LOAD" button. Press "GET" button to see what is currently loaded.
    or
    (optional)
    (optional)
      
    How does it work:
      • For 2D (single image or gallery with more images) please enter local path(s) to the image(s), e.g.
        "/pic/zoom/animals/test_animals1.png"
        or image set with image paths separated with vertical dash e.g.
        "/pic/zoom/animals/test_animals1.png|/pic/zoom/animals/test_animals2.png"
        If you want to load all images from a folder please just enter the path to this folder e.g.
        "/pic/zoom/animals"
      • For 360 (single row 360 object) please enter only the path to the folder where your 360 images are located e.g.
        "/pic/zoom3d/Uvex_Occhiali";
      • For 3D (multi row turnable object) please enter the path to the folder where subfolders with each row of 3D are located.
        On http://www.ajax-zoom.com/examples/example35.php this could be
        "/pic/zoomVR/nike"
        (not provided with the download package)
      • Hotspot file path is the path to the file with hotspot configurations and positions, e.g.
        "../pic/hotspotJS/eos_1100D.js"
        You can create such a file in example33.php
      • Crop file path is the path to the file with crop data which can be created with this editor, e.g.
        "../pic/hotspotJS/eos_1100d.json"
    Load only JSON data from file into editor
    e.g.: "../pic/cropJSON/eos_1100d.json"
    MORE EXAMPLES
    javascript picture zoom
    javascript picture zoom
    javascript picture zoom
    javascript picture zoom
    javascript picture zoom
    javascript picture zoom
    javascript picture zoom
    javascript picture zoom
    javascript picture zoom
    javascript picture zoom
    javascript picture zoom
    javascript picture zoom
    javascript picture zoom
    javascript picture zoom
    javascript picture zoom
    javascript picture zoom
    javascript picture zoom
    javascript picture zoom
    javascript picture zoom
    javascript picture zoom
    javascript picture zoom
    javascript picture zoom
    javascript picture zoom
    javascript picture zoom
    javascript picture zoom
    javascript picture zoom
    javascript picture zoom
    javascript picture zoom
    javascript picture zoom
    javascript picture zoom
    javascript picture zoom
    javascript picture zoom
    javascript picture zoom
    javascript picture zoom
    javascript picture zoom