JSFiddle - React, Tailwind, and code Playground

by ergec

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<div class="fluid-container">Plugin by: <a href="https://twitter.com/ergecsenturk" target="_blank">Ergec Senturk</a>
Photo Credit: Unknown

     <h1>Facebook-like photo reposition calculation plugin (X-Axis)</h1>

     <h3>Default Options</h3>

    <div class="row-fluid">
        <div class="span6">
            <div id="mask1" class='mask'>
                <img src='http://www.hybridlava.com/wp-content/uploads/Wide_wallPAPER052.jpg' border='0'>
            </div>
        </div>
        <div class="span6">
            <input type="text" id="mask1_input">
            <div id="mask1_replica" class="replica_small">
                <img src='http://www.hybridlava.com/wp-content/uploads/Wide_wallPAPER052.jpg' border='0'>
            </div>
        </div>
    </div>
     <h3>Plugin Options</h3>

    <div class="row-fluid">
        <div class="span6">
            <div id="mask2" class='mask'>
                <img src='http://cdn.theunlockr.com/wp-content/uploads/2011/11/sunrise-panorama-v2.jpg' border='0'>
            </div>
        </div>
        <div class="span6">
            <input type="text" id="mask2_input2">
            <div id="mask2_replica2" class="replica_small">
                <img src='http://cdn.theunlockr.com/wp-content/uploads/2011/11/sunrise-panorama-v2.jpg' border='0'>
            </div>
        </div>
    </div>
     <h3>"data-" parameters overrides plugin options</h3>

    <div class="row-fluid">
        <div class="span6">
            <div id="mask3" class='mask' data-replica="replica3" data-input="input3">
                <img src='http://www.hybridlava.com/wp-content/uploads/Wide_wallPAPER052.jpg' border='0'>
            </div>
        </div>
        <div class="span6">
            <input type="text" id="mask3_input3">
            <div...

CSS

.mask {
    width:300px;
    height:200px;
    overflow:hidden;
}
.replica_small {
    width:120px;
    height:80px;
    overflow:hidden;
}
.replica_large {
    width:600px;
    height:400px;
    overflow:hidden;
}

img {
    max-width:none;
}

JavaScript

/*
Facebook-like photo reposition calculation plugin (X-Axis)
*/
(function ($) {
    $.fn.extend({
        esRePosition: function (options) {
            var defaults = {
                replica: "replica",
                input: "input"
            };
            options = $.extend(defaults, options);
            return this.each(function () {
                //Plugin options
                var o = options;

                //Main object
                var $mask = $(this);
                var $id = $mask.attr("id");

                var $replica = $("#" + $id + "_" + $mask.data("replica"));
                if ($replica.length === 0) {
                    $replica = $("#" + $id + "_" + o.replica);
                }
                if ($replica.length > 0) {
                    var $img_replica = $("img", $replica);
                    $img_replica.height($replica.height());
                }
                var $input = $("#" + $id + "_" + $mask.data("input"));
                if ($input.length === 0) {
                    $input = $("#" + $id + "_" + o.input);
                }


                var $img = $("img", $mask);
                var $mask_h = $mask.height();
                var $mask_w = $mask.width();
                var $photo_org_h = $img.height();
                var $photo_org_w = $img.width();
                $img.height($mask_h);
                var $photo_h = $img.height();
                var $photo_w = $img.width();
                var $max_margin = ($photo_w - $mask_w) * -1;
                $img.draggable({
                    axis: "x",
                    cursor: "move",
                    drag: function (event, ui) {
                        $leftmarginpx = ui.position.left;
                        if ($leftmarginpx > 0) {
                            ui.position.left = 0;
                        }
                        if ($leftmarginpx < $max_margin) {
                            ui.position.left = $max_margin;
                      ...