WB—Tech
Menu
  • Projects
  • Experience
  • Process
  • Contacts
  • Blog
  • Ru
  • Plugin Comparator

    6 March 2014 Gleb Kondratenko

    We are happy to present another simple JQuery plugin called Comparator which allows you to visually compare two overlapped images.

    Basic usage:

    <link rel="stylesheet" href="wbt.comparator.css">
    <script src="wbt.comparator.js"></script>
    <script>
    $("#any-jq-selector").wbtComparator({
        src: [
            "first-image.jpg",
            "second-image.jpg"
        ]
    });
    </script>

    For example, you can use it to simultaneously show map and satellite views of some area, or to compare current and past satellite shots.

    $(".wbt-comparator__map").wbtComparator({
        src: [
            "sample/sevastopol-map.png",
            "sample/sevastopol-satellite.png"
        ],
        initDelay: false
    });

    Or you can compare two photos taken from the same spot but in different time.

    $(".wbt-comparator__tsunami").wbtComparator({
        direction: "horizontal",
        src: [
            "sample/tsunami-before.jpg",
            "sample/tsunami-after.jpg"
        ],
        timeout: 50
    });

    Finally, you can compare similar and awesome images with different visual effects.

    $(".wbt-comparator__colors").wbtComparator({
        src: [
            "sample/colors.jpg",
            "sample/colors-inverted.jpg"
        ],
        timeout: false
    });

    Options

    Name Description
    src Array of two string paths for images to compare. Array
    direction Sets the layout of comparison. «horizontal»|«vertical»
    initDelay Delays initial animation until top border of image box is visible on screen. Boolean
    timeout Centers border positions after this timeout. Centering is disabled when set to false. Integer | false

    Download this and other plugins from GitHub.

    Comment
    • JavaScript
  • Debug Mail

    16 December 2013 Kirill Grishanin

    We’d like to announce the Debug Mail.

    Debug Mail is a mail server for testing applications and websites without need to set up an SMTP server. To start using Debug mail, simply fill in the host, port and password provided by Debug Mail.

    Debug Mail helps you:

    • Use real customer data when simulating email flow with Debug Mail (no emails will be sent).
    • to review letters without spamming your own mailbox
    • share the results with your colleagues,
    • show emails to anyone via short public link,
    • test scenarios which trigger automated emails.

    Debug Mail will be launched in January of 2014. Sign up to our waiting list, and be the first to try our way of debugging and developing emails.



    Comment
    • +972(58)436-8276
    • ask@wbtech.pro
    • Israel, Tel Aviv-Yafo Ahad Ha'am 54, Mindspace, office 137
      • Facebook
      • Twitter
    • If you have questions, concerns or want to request a quote, please contact us and we’ll be happy to assist you.
    • WB—Tech
    • © 2011