かっこよすぎる！JavaScriptで、画像に多く使われている色を背景色に設定しよう！サンプルコード付き - Qiita
かっこよすぎる！JavaScriptで、画像に多く使われている色を背景色に設定しよう！サンプルコード付きCSSJavaScriptjQuerynpmbower みなさん下の図のように、商品画像と背景が似たようないろになっている画面を見たことがあると思います。 下の図のような画面では、画像に多く使われている色(ドミナントカラー)を背景色に設定しています。 (※下記の画面はwebサイトではない(itunes)ため参考程度ですが) この記事では、ドミナントカラーを背景色に設定するまでをサンプルを追いながら紹介していきます。 実装 jquery.adaptive-backgrounds.js このライブラリを使用することで誰でも簡単に、画像のドミナントカラーを背景色に設定することができます。 1. jquery.adaptive-backgrounds.js をダウンロードする bowerを利用し
Owl Carousel
How To Use 1. Load jQuery and include Owl Carousel plugin files To use Owl Carousel, you’ll need to make sure both the Owl and jQuery 1.7 or higher scripts are included. <!-- Important Owl stylesheet --> <link rel="stylesheet" href="owl-carousel/owl.carousel.css"> <!-- Default Theme --> <link rel="stylesheet" href="owl-carousel/owl.theme.css"> <!-- jQuery 1.7+ --> <script src="jquery-1.9.1.min.js"
GIMPでレイヤーを座標指定で移動させるスクリプトが消えていたけど代わりのスクリプトを発見した | ノート100YEN.com
無料の画像編集ソフトGIMPはデフォルトのままでも様々な機能がありますが、後からプラグインやスクリプト（マクロ）を組み込む事で更に機能を拡張する事ができます。 今回はそのスクリプトの中で以前に紹介した「レイヤーを座標指定して移動させるスクリプト」について。 gimp-GIMPresionist-hack / PhotoComiX GIMPは作業中にマウスドラッグでレイヤーを移動させる事ができますが、複数の画像の端をピタッとあわせたい時などちょっとズレたりして手動ではなかなか難しいところがあります。そんな時に便利だったのが座標指定によってレイヤーを移動させられる「レイヤー移動スクリプト」でした。 レイヤー移動スクリプトがなくなっていた 先日パソコンのOSを入れ替えた時の話。 ついでにGIMPも最初からインストールしなおしたので、このスクリプトをもう一度入手しようと配布サイトに行ってみました。
タッチデバイスに対応したフリーのLightbox・スライドショーjQueryプラグイン
【Swipeshow】スワイプで操作できるjQu... / 【Liquid Slider】スマートフォンのタ... / 【Sly】スライドショーとしても使えるタッチ操作...他...全6件
ディスプレイのサイズに合わせて画面いっぱいに背景画像を表示するCSSやjQueryプラグインいろいろ
ディスプレイサイズ（ブラウザサイズ）いっぱいに背景画像を表示する方法はいくつかありますが、最近見つけた jQuery のプラグインを使って、いろいろ試してみたりしたのでレビューをまとめてみました。 背景に画像を使った Webサイトってたくさんありますよね。大きくてキレイな画像は、見た目にもインパクトがあってとても印象的です。でも Webサイトを閲覧している人の環境は様々で、ディスプレイのサイズが違ったりするもの。ディスプレイ（ブラウザ）のサイズにあわせて、画像を拡大表示する方法はいくつかありますが、その中からいくつかをサンプル付きでご紹介します！ 画面いっぱいに背景画像 目次 CSSのみで画面いっぱいに背景画像 jQuery プラグイン fullscreenr を使ってみた Full Size Background Image jQuery Plugin を使ってみた jQuery max
Webデザインレシピ » Blog Archive » Perfect Full Page Background Image with maxImage Scaling Plugin
Perfect Full Page Background Image with maxImage Scaling Plugin jQuery のプラグイン、maxImage Scaling Plugin を使って、画面いっぱいに背景画像を表示しています。 実際の画像のサイズは 1000 x 666 ピクセルというサイズですが、横幅がディスプレイサイズに合わせて表示されていると思います。 拡大しているので、当然画像はぼやけて表示されますが、元画像の大きさを大きくすれば軽減されます。 プラグインのパラメータに、overflow: 'auto' とすると、スクロール OK になります。たくさんのパラメータが用意されているので、色んなニーズに応えてくれそうです。 画像の縦位置も top、center、bottom の3種類から選べるのもうれしいですね！ 動作確認済み Firefox 3.6 Saf
画面いっぱいに背景画像を表示するjQuery | 新潟県長岡市ホームページ制作ならkusumi28.com
最近使ったjQueryプラグイン。 ホームページを制作をしているとユーザーのモニタ環境というのは頭を悩ませるところです。 サイトを見ている人の環境は様々でさらに最近では端末の種類も増えているので、何を基準にしたら良いのか分かりません。 今回紹介するjQueryはそんな悩みをいとも簡単に飛び越えてくれるモニタ環境に合わせて画面いっぱいに背景画像を表示するというプラグイン。 maxImage Scaling Plugin Demo まずはjQuery本体とmaxImage Scaling Pluginをダウンロードしておきます。 設置場所は任意で。 以下設置の仕方です。 HTML <body> <img src="画像へのパス" alt="" class="bgmaximage" /> <div id="maincontent"> <div> ここに内容 </div> </div> </bod
[jQuery] いつでもどこでもローディングアイコンを表示 NETEYE Activity Indicator | バシャログ。
最近目がかゆくてやたらとクシャミが出るんですけど、PM2.5 ってホント迷惑ですね～。みなさん、こんにちは nakamura です。 最近ちょっとおぉ！と思った jQuery プラグインがあったので今日はそのご紹介です。Ajax を使った非同期な処理も今やすっかり定番ですが、毎回メンドクサイな～と思うのがローディングアイコン。アニメーション Gif を用意して、どこで呼び出しても見栄えがするように CSS 調整して・・・。あーもうしゃらくせえ！と思っていたら、その辺全部勝手にやってくれる jQuery プラグインがあったんですね～。 NETEYE Activity Indicator っていうプラグインがそれです。github で公開されてます。 NETEYE Activity Indicator jquery-plugins/activity-indicator at master ·
![[jQuery] いつでもどこでもローディングアイコンを表示 NETEYE Activity Indicator | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/6a7c7828e73c1691039a9aa0dce7f4c767e36c92/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fimages%2Fcat_javascript.png)
iOSなどのスマートフォンのブラウザ側でリサイズをおこないファイルアップロードを爆速にする - 僕は発展途上技術者
iOS 6 より Safari からファイルをアップロードできるようになり、写真投稿が必要なウェブサービスで、投稿のためだけにアプリを用意する必要はなくなったかなあ、と最初は思っていました。 ところが、iPhone 5 などで撮った写真などはファイルサイズが結構大きく、Safari からアップロードするときはそのままのサイズで送るため、外出先で 3G だとアップロードにものすごく時間がかかってしまい、ほとんど使い物になりません。 そこで、アップロード前にブラウザ側で写真をリサイズできる方法はないかと探したところ、 » IOS6 and Safari Photo Uploading - File API + Canvas + jQuery Ajax Uploading and Resizing Files Asynchronously - Stack Overflow で紹介されていた »
jQuery Image Lazy Load WP
Description add lazy loading to WP, more info at http://plugins.jquery.com/project/lazyload Installation unzip archive to wp-content/plugins directory, and activate it in Plugins page in wp-admin or you can cd into your wordpress_root/wp-contents/plugins and do: git clone git://github.com/ayn/wp-jquery-lazy-load.git FAQ Installation Instructions unzip archive to wp-content/plugins directory, and a
Pinterest風のデザイン 「jQuery Masonry」を試してみた
Pinterestのデザインは、要素が敷き詰められた感じになっています。 これはなんていうデザインの通称かわからないので、ひとまず「Pinterest風」と言ってます。 これを実装してくれるJavaScriptプラグインのひとつが「jQuery Masonry」なのですが、どういうものか使って試してみました。 基本的には公式サイトに載ってることを自分なりにまとめた内容となっております。 ダウンロードはこちらから JSなどの必要なファイルは以下からダウンロードします。 jQuery Masonry 設置の仕方 設置も特に難しいことはなくJavaScript読み込んでCSSで調整する感じです。 サンプルは以下から サンプルサイト JavaScriptの記述例 <script type="text/javascript" src="https://ajax.googleapis.com/ajax
並べた画像を敷き詰めて超カッコよくするjQueryサンプル:phpspot開発日誌
Automatic Image Montage with jQuery | Codrops 並べた画像を敷き詰めて超カッコよくするjQueryサンプル。 <img>を単に並べるだけであとはブラウザの幅に応じて画像を次のように並び替えてくれちゃうデモとスクリプトのダウンロードが可能です。 画像間の調整や背景色の調整等が行えるようです。 デモページはこちら ブラウザサイズを変更しても画像を再計算して表示しなおしてくれます。 背景を黒にするとよりオシャレな感じです。 関連エントリ 異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」 ブロックサイズ内に画像を綺麗に収めるjQueryプラグイン「CJ Object Scaler」
[JS]雑誌をめくるようにぺらっと画像を表示するスクリプト -mLivre
雑誌をめくる「Pege Flip」のエフェクトで画像を次々に表示するjQueryのプラグインを紹介します。 mLivre デモ [ad#ad-2] mLivreの実装 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして指定します。 <script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script type="text/javascript" src="jquery.mLivre.min.js"></script> HTML img要素をdiv要素で内包します。 <div id="demo1"> <img src="celestin/couverture.jpg" width="650" height="325" /> <img src="celestin/illustration2.jp
HTML5+jQueryのドラッグ&ドロップに対応したアップローダー・droparea
Gmailライクにローカル環境からブラウザに ドラッグ&ドロップで画像をアップロード可能 にするHTML5+jQuery製のアップローダー droparea。今後、こうしてキーボードを使う 頻度が減っていくんですかね・・HTML5の 出現で一気に加速した印象ですね。 jQuery HTML5 UploaderやjQuery File Uploadの後発に当たりますね。 イメージアップローダーです。Gmailライクにドラッグ&ドロップでアップロード出来ます。 コードs = { 'init': m.init, 'start': m.start, 'complete': m.complete, 'instructions': 'drop an image file here', 'over' : 'drop file here!', 'nosupport' : 'No support for t
異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」:phpspot開発日誌
異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」 2011年04月07日- Google image search style image alignment with jQuery Atteeeeention plugin | DreamersLab 異なる幅・高さの画像も超綺麗に並べられるjQueryプラグイン「Atteeeeention plugin」。 <img>でただ単に画像を並べると、幅、高さの違いから、ページがごちゃごちゃしてしまいますが、このプラグインを使うことでGoogle の画像検索のように綺麗にピッチリ並べられます。 普通に並べるとちょっと残念なことに。空白ができちゃいます。 プラグインを使うことで、あら綺麗。となります。 Firefox は 2以上、IEは6以上ということで殆どのブラウザに対応。 まず、必要な
jQueryを使ったストレッチする背景画像 – creamu
背景に大きくビジュアルを使いたい。 そんなときに参考になるのが、『Image Now』。jQueryを使った、背景画像がストレッチするサイトです。 jquery.backstretch.jsが使われていて、width:1024pxの画像が、ブラウザサイズに合わせて伸縮しますね。Flashサイトでなくてもこれができるのはいい感じ。 画像がランダムに切り替わるんですが、それはfunctionでJavaScriptが書かれています。 デザインも設計もクールなサイトなので、一度見てみてください。 Image Now LADの新作のレザーバッグを購入。前のが破れてしまって新しいのがほしかったので、ちょうどいいのが見つかっていい感じ。ふとボッテガ ヴェネタのも気になって見に行ったんだけど、結構するしまだいいかな、と見送りました。でもデザインも質もものすごくいいですね。 あとFenderロゴ入りの帽子も
netswitch! | 決定版! Rails用画像添付プラグインpurl
Rails pluginとして動く言語、purlを公開しました。 purl はクライアントサイドから柔軟な画像処理を行うために開発されました。 サムネイルの生成などを行うプラグインはいくつかありますが、そのどれよりも強力で汎用性、拡張性があります。 セットアップ Rails2.1以上では、 $ script/plugin install git://github.com/nanki/purl.git それ未満では、 $ git clone git://github.com/nanki/purl.git -- vendor/plugins/purl gitが無い環境なら、githubのdownloadからファイルを落として、vendor/plugins/ に配置してください。 依存ライブラリ 必須: ImageMagick, rmagick あった方がいい: cairo, rcairo その
jCarouselLite - Project
jCarousel Lite is a jQuery plugin that carries you on a carousel ride filled with images and HTML content. Put simply, you can navigate images and/or HTML in a carousel-style widget. It is super light weight, at about 2 KB, yet very flexible and customizable to fit most of our needs. As if that wasn't enough, the best part is yet to come... You don't need any special CSS file or class name to get
[JS]ページをめくったような効果を出すスクリプト -curl.js | コリス
curl.jsは、先日エントリーした「画像に鏡面効果を与えるスクリプト」と同じ作者が作成した、画像にページをめくったような効果を出すスクリプトです。 curl.js (with IE 6/7 support) 画像にページをめくったような効果を与えるには、curl.jsを外部スクリプトとして記述し、画像にclass指定をします。 classには、デフォルトの「curl」、サイズ変更ができる「isize」、色を変更できる「icolor」、影をつける「ishadow」があり、数値を入れ微調整をすることも可能です。 マウスのホバーやクリックなどのアクションにも対応しており、その場合は「cvi_curl_lib.js」を使用します。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Google Code Archive - Long-term storage for Google Code Project Hosting.