画面サイズによって読み込むイメージを切り替えてくれる「Responsive Images」
レスポンシブ・デザインでサイト制作をする際に困るのが画像のサイズ。今とりかかっているサイトでも、対応策に悩んでいるところです。 PC画面向けの大きなイメージはモバイルには大き過ぎる。 逆に、モバイル画面向けの小さな画像はPC向けには小さすぎる。 そんな問題を解決してくるのがFilament Groupという制作会社が使った「Responsive Images 」という、JavaScriptとApacheの.htaccessを使った仕組です。まだ実験的なものでプロダクションレベルのものではないかも知れませんが、Github でソースが提供されているので、ここから改善したものをフォーク するのもありですね。 「Responsive Images」の仕組 実際に試したわけではないですが、説明によると以下のような仕組だそうです。 .htaccessとJavaScriptを利用して、スクリーンサイズ
秋元@サイボウズラボ・プログラマー・ブログ: lightboxライブラリ37個の比較表
写真などをページ上で強調表示する、いわゆるlightbox効果を実現するJavascript+CSSライブラリを37個も集めて、ライブラリサイズやそれぞれの機能、どのJavascriptライブラリを使っているかなどで絞り込めるようにした比較表が発表されている。 このようなUI系のライブラリを使う際には、自分が普段使っているベースライブラリとの親和性などが重要だと思うので、このような形でまとまっているとdel.icio.usで”lightbox”タグで絞り込む、といった調べ方よりも楽にライブラリが選べていい。 via del.icio.us/popular この記事は移転前の古いURLで公開された時のものですブックマークが新旧で分散している場合があります。移転前は現在とは文体が違い「である」調です。(参考)記事の内容が古くて役に立たなくなっている、という場合にはコメントやツイッターでご指摘い
[CSS]CSS Spritesに利用できる画像置換の実装例いろいろ | コリス
複数の画像を一枚にまとめて、スタイルシートで背景画像として指定するCSS Spritesに利用できる画像置換の実装例の紹介です。 画像置換する際には、CSSオフ時・画像オフ時・印刷時・音声ブラウザ対応・空タグ使用などを考慮する必要があります。 備考 コードは、参考サイトからサイズ指定などを変更しています。 画像置換元は、全てH3要素になっています。 H3は、テキスト(見出しのテキスト)もしくは画像(印刷用の見出し画像)です。 ブラウザに「背景画像」が表示されていれば、期待通りの動作です。 使用している画像は、次の通りです。 背景画像 印刷用の見出し画像 1pxの透過画像 名称は、Revised Image Replacementを参考にしています。 サンプル:01 -Classic FIR デモページ <textarea name="code" class="html" cols="60"
![[CSS]CSS Spritesに利用できる画像置換の実装例いろいろ | コリス](https://cdn-ak-scissors.b.st-hatena.com/image/square/bc54860ba06deaa45382cf2bddc929515def0354/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fshared%2Flogo-2014050501-en.png)
Lightbox 2.04が登場 - WolaWola
WolaWola 久しぶりにLightbox2がバージョンアップしてますね。コード比べたら、結構違いがありました。（微妙な仕様変更があったようなので、追記します） Home Plugins This_site Profile Mailform Search Archives zelneがMT4.1にLightbox2を組み込んでて、動作しないというので調べてみてたら、どうやら若干仕様変更があったみたいですね。Script.aculo.usの読み込みで、今まではeffect.jsのみだったのだけど、今回のv2.04からbuilder.jsも使うようになったみたいです。 scriptaculosの読み込みに、load指定している場合は、 <script type="text/javascript" src="scriptaculous.js?load=effects,bu
clip プロパティで画像をトリミング
phpspot 開発日誌さんで、「CSS の Overflow を応用して画像を綺麗にリサイズ表示するサンプル」 という記事が上がっていたのですが、この手の一部トリミングだったら clip プロパティがちゃんと用意されてるんでそっちを使ってもできるんじゃないかということで、clip プロパティを使用したサンプルを簡単に紹介してみます。 いきなりですが、サンプル。 clip プロパティで画像トリミングサンプル 通常は画像の一部のみが表示され、マウスオーバーで全体が表示されると思います。 ソースは下記。まずは XHTML ソース。 <p class="clipSample"> <a href="***"> <img src="***" width="240" height="180" alt="" /> </a> </p> CSS は下記のとおり。今回のサンプルは画像のサイズが、240px ×
PHPでの画像のリサイズ、切り抜きが自由自在「class.image.php」:phpspot開発日誌
PHPでの画像のリサイズ、切り抜きが自由自在「class.image.php」 2008年02月21日- Icebeat | class.image PHPでの画像のリサイズ、切り抜きが自由自在「class.image.php」 class.image.php を使えば、分かりやすいコードで、簡単に画像のリサイズ、切抜きが可能です。 例えば、3行で、画像のサムネイルが作れてしまいます。 まずは、画像を幅200pxでリサイズ＆保存のコード $thumb = new Image('image.jpg'); $thumb->width(200); $thumb->save(); そして、画像を50%のサイズにリサイズのコード $thumb = new Image('image.jpg'); $thumb->resize(50); $thumb->save(); そして、左0px、上30pxの位置
Prototype.js、YUI等コアライブラリを選択できかつ、多機能LightBox「Shadowbox.js」:phpspot開発日誌
Prototype.js、YUI等コアライブラリを選択できかつ、多機能LightBox「Shadowbox.js」 2008年01月29日- Shadowbox.initShadowbox.js Media Viewer Shadowbox is a cross-browser, cross-platform, cleanly-coded and fully-documented media viewer application written entirely in JavaScript. Prototype.js、YUI等コアライブラリを選択できかつ、多機能LightBox「Shadowbox.js」。 YUI, Ext, Prototype.js, jQuery, Mootools, Dojo などをコアライブラリとして使用できます。 LightBox は prototype.js
[JS]多彩なカスタマイズが可能な画像を拡大するスクリプト -Lightview | コリス
Lightviewは、LightBox風に画像を拡大するスクリプトで、多彩なオプションで拡大表示時のカスタマイズが可能です。 Lightview Lightviewは、単独の画像拡大をはじめ、連番での送り機能や自動スライドショー機能を備えています。 デフォルトの状態でも快適に動作しますが、下記の多彩なオプションで画像の拡大表示時のカスタマイズが可能です。 backgroundColor 背景色 border ボーダーのサイズ buttons.opacity ボタン不透明度 effects Scriptaculousの効果 images lightview.jsからみたディレクトリ imgNumberTemplete 画像のナンバリング overlay オーバーレイ radus 角丸の半径 sideshow.delay スライドの表示タイミング titleCaptionSplit タイトルと
CSSを使わずに画像を使ったSEOマークアップが簡単にできるjavascript : 4GALAXYのメモ
66 15 09 2007 CSSを使わずに画像を使ったSEOマークアップが簡単にできるjavascript jQuery, Ajax javascriptだけでテキストを画像に置き換えることが出来ます。コーディング作業が楽になります、 今まではテキストを画像に置き換える場合はCSSでbackgroundに画像を指定していたと思いますが、 JQueryプラグインjQirを使うと以下のコードだけでテキストを画像に置き換えることが出来ます。 コーディングしている方にはかなり良いプラグインではないでしょうか？ jquery.js - ダウンロードページかならず必要ですのでダウンロードして下さい コード <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" s
スプーキーズラボブログ | prototype.js ベースの Thickbox ライブラリ「ProtoThickBox」を公開しました
prototype.js ベースの Thickbox ライブラリ「ProtoThickBox」を公開しました。 ThickBox を使うためだけに jQuery を導入している方は結構いるのではないでしょうか？ 例えば、Ruby on Rails はデフォルトで prototype.js を使うようになっているため、 ThickBox を使いたい場合、jQuery を導入した上で $ 関数が競合にならないように、 <%= javascript_include_tag 'prototype.js' %> <%= javascript_include_tag 'jquery.js' %> <%= javascript_tag "jQuery.noConflict();" %> のように設定しなければなりません。 そこで、jQuery 依存だった「ThickBox 3.1」を prototype
alphafilter.jsライブラリがバージョンアップしました。
alphafilter.jsライブラリがバージョンアップしました。 IE6で透過pngを扱う為のライブラリalphafilter.jsのバージョンアップを行ったので報告しておきます。 今までalphafilter.jsはprototype.jsがなければ動かなかったのですが、これを単体で稼働するように修正しています。 これでjqueryユーザーの方もalphafilter.jsをご利用いただけます。 また、他のライブラリとの相性を良くする為に、objectの汚染についても取り除くよう対応しました。 現状報告いただいてる問題点は 透過するbox要素にpositionが設定されている場合、box内のa要素が動作しない。 backgroundのrepeatなどには対応してない ここらへんは、AlphaImageLoaderの仕様がそうなので、対応方法が思いつかないんですけど分かる人がいたら教えて
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.graphact.com/memo/2008/01/16/174