Skip to content

Instantly share code, notes, and snippets.

@hagino3000

hagino3000/example.js

Last active August 29, 2015 14:02
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save hagino3000/4560e4be81e55749314c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save hagino3000/4560e4be81e55749314c to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. hagino3000 revised this gist Jun 3, 2014. No changes.
  2. Takashi Nishibayashi revised this gist Nov 25, 2013. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions utils.js
    View file
    Original file line number Diff line number Diff line change
    @@ -22,16 +22,16 @@ define([], function () {
    'position': 'absolute'
    });
    } else {
    return $img;
    }
    }
    // 縦長の画像の場合は横をフルに使う
    $img.css({
    'width': boxWidth,
    'top': -1 * Math.floor(boxHeight/2 * (height/width - 1)),
    'position': 'absolute'
    });
    }
    return $img;
    }
    }

    return {
    createImageAdjustFn: createImageAdjustFn
  3. Takashi Nishibayashi revised this gist Nov 25, 2013. 2 changed files with 19 additions and 7 deletions.
    5 changes: 3 additions & 2 deletions example.js
    View file
    Original file line number Diff line number Diff line change
    @@ -5,9 +5,10 @@ define(['utils', 'template'], function (Utils, JST) {
    // テンプレート使ってレンダリングする例
    $('#target').html(JST['app/templates/fuga.ejs'], {images: [],....});

    // 画像を60px * 60pxの枠に納める場合
    // 画像を60px * 60pxの枠に納めるとする
    var adjustFn = Utils.createImageAdjustFn(60, 60);
    $('#target img').on('laod', function() {
    $('#target .profile img').on('load', function() {
    // サイズを調節したい奴をセレクタで指定してloadイベントで処理する
    adjustFn($(this)).removeClass('need_adjust');
    });
    }
    21 changes: 16 additions & 5 deletions utils.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,15 @@
    define([], function () {
    'use strict';

    /**
    * 画像のサイズ調節用の関数を返す
    * 親のBox要素は次のスタイルを指定しておく
    *
    * - overflow: hidden
    * - position: relative
    * - width: 任意の値
    * - height: 任意の値
    * /
    function createImageAdjustFn(boxWidth, boxHeight) {
    return function($img) {
    var width = $img.width();
    @@ -9,18 +18,20 @@ define([], function () {
    // 横長の画像の場合は縦をフルに使う
    $img.css({
    'height': boxHeight,
    'left': -1 * Math.floor(boxWidth/2 * (width/height - 1))
    'left': -1 * Math.floor(boxWidth/2 * (width/height - 1)),
    'position': 'absolute'
    });
    } else {
    return $img;
    }
    }
    // 縦長の画像の場合は横をフルに使う
    $img.css({
    'width': boxWidth,
    'top': -1 * Math.floor(boxHeight/2 * (height/width - 1))
    'top': -1 * Math.floor(boxHeight/2 * (height/width - 1)),
    'position': 'absolute'
    });
    }
    return $img;
    }
    }

    return {
    createImageAdjustFn: createImageAdjustFn
  4. Takashi Nishibayashi revised this gist Nov 25, 2013. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions utils.js
    View file
    Original file line number Diff line number Diff line change
    @@ -6,11 +6,13 @@ define([], function () {
    var width = $img.width();
    var height = $img.height();
    if (width > height) {
    // 横長の画像の場合は縦をフルに使う
    $img.css({
    'height': boxHeight,
    'left': -1 * Math.floor(boxWidth/2 * (width/height - 1))
    });
    } else {
    // 縦長の画像の場合は横をフルに使う
    $img.css({
    'width': boxWidth,
    'top': -1 * Math.floor(boxHeight/2 * (height/width - 1))
  5. Takashi Nishibayashi revised this gist Nov 25, 2013. 2 changed files with 16 additions and 0 deletions.
    16 changes: 16 additions & 0 deletions example.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,16 @@
    define(['utils', 'template'], function (Utils, JST) {
    'use strict';

    function render() {
    // テンプレート使ってレンダリングする例
    $('#target').html(JST['app/templates/fuga.ejs'], {images: [],....});

    // 画像を60px * 60pxの枠に納める場合
    var adjustFn = Utils.createImageAdjustFn(60, 60);
    $('#target img').on('laod', function() {
    adjustFn($(this)).removeClass('need_adjust');
    });
    }

    render();
    });
    0 clip_image.js → utils.js
    View file
    File renamed without changes.
  6. Takashi Nishibayashi revised this gist Nov 25, 2013. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions clip_image.js
    View file
    Original file line number Diff line number Diff line change
    @@ -8,12 +8,12 @@ define([], function () {
    if (width > height) {
    $img.css({
    'height': boxHeight,
    'left': -1 * (Math.floor(boxWidth/2) * (width/height - 1))
    'left': -1 * Math.floor(boxWidth/2 * (width/height - 1))
    });
    } else {
    $img.css({
    'width': boxWidth,
    'top': -1 * (Math.floor(boxHeight/2) * (height/width - 1))
    'top': -1 * Math.floor(boxHeight/2 * (height/width - 1))
    });
    }
    return $img;
  7. Takashi Nishibayashi created this gist Nov 25, 2013.
    26 changes: 26 additions & 0 deletions clip_image.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,26 @@
    define([], function () {
    'use strict';

    function createImageAdjustFn(boxWidth, boxHeight) {
    return function($img) {
    var width = $img.width();
    var height = $img.height();
    if (width > height) {
    $img.css({
    'height': boxHeight,
    'left': -1 * (Math.floor(boxWidth/2) * (width/height - 1))
    });
    } else {
    $img.css({
    'width': boxWidth,
    'top': -1 * (Math.floor(boxHeight/2) * (height/width - 1))
    });
    }
    return $img;
    }
    }

    return {
    createImageAdjustFn: createImageAdjustFn
    }
    });