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://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<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>

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

     <h3>Default Options</h3>

    <div class="row-fluid">
        <div class="span6">
            <div id="mask1" class='mask'>
                <img src='http://www.wacdesign.com/images/blogs/vertical_panorama02.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.wacdesign.com/images/blogs/vertical_panorama02.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://www.wacdesign.com/images/blogs/vertical_panorama02.jpg' border='0'>
            </div>
        </div>
        <div class="span6">
            <input type="text" id="mask2_input2">
            <div id="mask2_replica2" class="replica_small">
                <img src='http://www.wacdesign.com/images/blogs/vertical_panorama02.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.wacdesign.com/images/blogs/vertical_panorama02.jpg' border='0'>
     ...

CSS

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

JavaScript

/*
Facebook-like photo reposition calculation plugin (Y-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.width($replica.width());
                }
                var $input = $("#" + $id + "_" + $mask.data("input"));
                if ($input.length === 0) {
                    $input = $("#" + $id + "_" + o.input);
                }


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