タグ

JavaScriptと画像に関するmelo1029のブックマーク (2)

  • [JS]表示サイズにあわせて最適なレイアウトを提供する高性能なスライドショーのスクリプト -Camera

    表示サイズに合わせて、スライドショー自体のサイズやサムネイルなどを最適な状態で提供するスライドショーを実装するjQueryのプラグインを紹介します。 もうすぐ始まるIEの自動アップデートのIE8にも対応しています。 Camera | a free jQuery slideshow by Pixedelic [ad#ad-2] Cameraのデモ Cameraの使い方 Cameraのデモ デモは上記のトップにあるものと、他に3種類のスライドショーがあります。 トップのものが一番シンプルで、Cameraの基性能を楽しめます。 画像の切り替えには、美しいアニメーションが採用されています。 デモ:Fullscreen フルスクリーンタイプのスライドショー。 Cameraの使い方 Cameraで使用する基的なHTMLの構造から。 HTML div要素にHTML5の独自属性で「data-src」を

    melo1029
    melo1029 2012/03/12
    表示サイズに合わせて、スライドショー自体のサイズやサムネイルなどを最適な状態に
  • 範囲を指定して切り抜き。jQuery製の画像クロップライブラリ·Jcrop MOONGIFT

    Jcropは画像を四角くクロップするjQueryプラグインです。 写真アップロードサービスやプロフィール画像の切り抜きで活躍しそうなライブラリがJcropです。マウスで範囲指定して画像を四角く切り抜けます。 はい、まずは普通の表示です。マウスで範囲指定します。 こんな感じで範囲指定できます。一度指定した後、マウスで微調整もできます。 正方形に限らず形を決められます。 コールバックにも対応していて、マウスを動かしたタイミングなどが座標付きで取り出せます。 サムネイルビューにも対応しています。範囲指定した部分が小さくなって右側に表示されています。 範囲を大きくしたらサムネイルが自動調整されています。 CSSを使って決められた範囲だけクロップ表示することもできます。 サーバサイドに飛ばしたところです。PHP+GDのスクリプトサンプルも用意されています。 Jcropはサーバサイドに座標を飛ばせるの

    範囲を指定して切り抜き。jQuery製の画像クロップライブラリ·Jcrop MOONGIFT
    melo1029
    melo1029 2012/01/24
    写真アップロードサービスやプロフィール画像の切り抜きで活躍しそうなライブラリ
  • 1