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
優雅なWEB制作のためのJavaScript「yuga.js」
派手なアクションや演出はありませんが、WEBサイト構築において、ちょっとした気の利いた所を押さえているjavascriptが今回紹介するJavaScript「yuga.js」です。 簡単に導入できる上に「jQuery」を使って様々な事が簡単なコードで実現可能です。優雅なWeb制作のためのJS サンプルと銘打っているだけあって実相もシンプルでわかりやすいJavaScriptになっています。 詳しくは以下 yuga.jsでできることは以下の通りです。 ・画像のロールオーバーを簡単にする機能 ・外部リンクは別ウィンドウを自動で設定 ・画像のリンクをthickboxで開くよう簡単設定 ・偶数、奇数行を自動で色分け ・ページ内リンクのアニメーション機能 詳しい動作や導入方法については「yuga.js 0.4.2 – 優雅なWeb制作のためのJS｜CSS HappyLife」で詳しく参照することができ
[JS]デザイナーのためのjQueryのチュートリアル
Web Design Wallのエントリー「jQuery Tutorials for Designers」から、JavaScriptのライブラリ「jQuery」が視覚的にどのように動作するかデモと共に解説してる10のチュートリアルを紹介します。
複数のjsライブラリを利用する際にonloadを書き換える方法[to-R]
複数のjsライブラリを利用する際にonloadを書き換える方法 複数のJavaScriptライブラリを利用していて、正常に動作しないや、どちらか一方しか動作しないなどの状況に陥ることがあります。 原因は様々なのですが、一番多いのがJavaScriptライブラリのonload記法に依存する問題です。 onload記法とはJavaScriptを実行するタイミングをonloadイベント（ブラウザがすべてを読み込んでから実行）に設定する際の書き方です。 DreamWeaverを利用している方は、以下のようなソースをよく見るかもしれません。 <body onload="MM_preloadImages('hogehoge')"> これはonloadイベントにMM_preloadImagesという関数を設定しているという意味です。 他にもソースコード中の window.onload = functio
![複数のjsライブラリを利用する際にonloadを書き換える方法[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a9717624309e36a795026e1b70982163687ccca2/height=288;version=1;width=512/https%3A%2F%2Fblog.webcreativepark.net%2Ficon_200x200.png)
カスタマイズの自由度が高いツールチップ用JSライブラリ「Prototip」他ツールチップJS色々:phpspot開発日誌
カスタマイズの自由度が高いツールチップ用JSライブラリ「Prototip」他ツールチップJS色々 2008年02月13日- Prototip - Tooltips for prototype While waiting for Prototype 1.6.0.1 I've put together a preview for the next release of Prototip. カスタマイズの自由度が高いツールチップ用JSライブラリ「Prototip」他ツールチップJS色々。 まずは、最近公開されたprototip の紹介。 実現したい大体のツールチップは prototip で出来る、というぐらい多機能です。 通常のツールチップ タイトルを付けてみる ツールチップ表示位置を指定 HTMLを表示 リンクボックスを表示 その他 ツールチップのアニメーション表示 クリックでツールチップ表示
JavaScriptでの進捗表示に便利な「jsProgressBarHandler」がアップデート:phpspot開発日誌
JavaScriptでの進捗表示に便利な「jsProgressBarHandler」がアップデート 2008年02月07日- Bram.us jsProgressBarHandler (Dynamic Unobtrusive Javascript Progress/Percentage Bar) jsProgressBarHandler is a Javascript based Percentage Bar / Progress Bar, inspired upon JS-code by WebAppers and CSS-code by Bare Naked App.JavaScriptでの進捗表示に便利な「jsProgressBarHandler」がアップデート。 『進捗状況を分かりやすくプログレスバーで表示できるJSライブラリ「jsProgressBarHandler」』で紹介した
[JS]jQueryのプラグイン33+1選 -2008年1月 | コリス
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 jqzoom 画像の一部をズーム。 Shadowbox 複数のJavaScriptライブラリに対応したLightbox。 Faceb
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
あるＳＥのつぶやき: Ajaxライブラリまとめ
Ajax/JavaScriptライブラリをまとめておきます。（順不同） | 基本 | 統合 | 表示系 | GUI部品 | イメージ | PGM連携 | ブラウザ | Flash | その他 | | 部品集 | リンク | 編集履歴 | ・基本ライブラリ ・・・Ajax開発のベースになるもの ↑TOP prototype.js 超メジャーなAjaxライブラリ prototype.js の開発者向けメモ prototype.jsリファレンス prototype.jsリファレンス(JavaScriptist) prototype.js逆引きサンプル集 Prototype 1.5.0 Cheat Sheet Prototype 1.5 PDF － API/サンプル/解説 Prototype.js Documentation － まとめサイト Prototype 1.6.0へのアップグレード実例紹
[JS]多彩なカスタマイズが可能な画像を拡大するスクリプト -Lightview | コリス
Lightviewは、LightBox風に画像を拡大するスクリプトで、多彩なオプションで拡大表示時のカスタマイズが可能です。 Lightview Lightviewは、単独の画像拡大をはじめ、連番での送り機能や自動スライドショー機能を備えています。 デフォルトの状態でも快適に動作しますが、下記の多彩なオプションで画像の拡大表示時のカスタマイズが可能です。 backgroundColor 背景色 border ボーダーのサイズ buttons.opacity ボタン不透明度 effects Scriptaculousの効果 images lightview.jsからみたディレクトリ imgNumberTemplete 画像のナンバリング overlay オーバーレイ radus 角丸の半径 sideshow.delay スライドの表示タイミング titleCaptionSplit タイトルと
IE6以下をWeb標準に準拠させるライブラリ『IE7.js』
IE6以下をWeb標準に準拠させるライブラリ『IE7.js』 多くの人が待ちに待ち望んだライブラリ。やはりすごい人はすごいものを作るんですね。 このライブラリを読み込むことによりIE6以下でもIE7と同じようなXHTM/CSSの解釈を行ってくれます。 ただし完全にIE7と同じような形にするのではなく、より近い形ということです。 現在公開されているバージョンはversion 2.0 (beta)ということで、まだ実務で使うのは難しいかもしれませんが、MITライセンスで公開されておりますので正式にリリースされればweb制作の現場を変えてしまうライブラリです。 設置方法 Google コードのie7-jsより直接読み込むことが可能です。 以下の要素をhead要素内などに記述します。 <!--[if lt IE 7]> <script src="http://ie7-js.googlecode.c
一番簡単な画像置換の方法-imageReplace.js--とあるWEBクリエイターのblog
一番簡単な画像置換の方法-imageReplace.js- 画像置換は設置がややこしく。 デメリット・メリットの切り分けが困難です。 そんなわけで一番簡単な画像置換の方法として、画像置換javascriptライブラリ-imageReplace.js-を作ってみました。 設定は簡単head要素内にimageReplace.jsを読み込むだけ。 <script type="text/javascript" src="./imageReplace.js"></script> あとは、画像置換したい要素にclass属性に『imageReplace』と記述しスペースを空けて『置換する画像名』、『ロールオーバーする画像名』を記述します。 例えばこんな感じに。 <a class="imageReplace ajax_a.gif ajax_b.gif" href="/ajax/">Ajax</a> 『ロー
要素の中身をアニメーションしながら切り替えられる「InnerFade with jquery」:phpspot開発日誌
InnerFade with jquery InnerFade is a small plugin for the jQuery-JavaScript-Library. 要素の中身をアニメーションしながら切り替えられる「InnerFade with jquery」。 スライドショーのように、要素内がアニメーションしながら切り替わるパーツが作れます。 便利なのは、画像が切り替わった際に、画像からのリンク先も切り替わる点。 実際には、次のように、ul 要素内の li を順にアニメーションするという仕様になっているようで、その実装も簡単です。 <ul id="portfolio"> <li> <a href="http://medienfreunde.com/deutsch/referenzen/kreation/good_guy__bad_guy.html"> <img src="images
ドロップダウンリストから入力補完できるインプレイスエディタ実装ライブラリ「Proto.IPS」:phpspot開発日誌
Proto.IPS :: In-place-select controls made easy Proto.IPS is a nice little widget which can be used for in place selection. ドロップダウンリストから入力補完できるインプレイスエディタ実装ライブラリ「Proto.IPS」。 テキストをクリックしてそのまま編集できる、というのはよくみますが、ドロップダウンから入力補完できるのははじめて見ました。 Prototype.jsベースで、次のようなコードで簡単に初期化して使えます。 new Proto.IPS(element, { options: [ {text: 'Available', className: 'on'}, {text: 'Free for chat', className: 'on'}, {text: 'Aw
JavaScriptでツリー構造やグラフ、ヒストグラムを描画できるライブラリ「Ortho」:phpspot開発日誌
JavaScriptでツリー構造やグラフ、ヒストグラムを描画できるライブラリ「Ortho」 2007年12月26日- Ortho JavaScript Graphics - Home Page Ortho is a JavaScript library for creating 2-D Graphics in Web Browsers JavaScriptでツリー構造やグラフ、ヒストグラムを描画できるライブラリ「Ortho」 JavaScriptを使って次のような図を描いたりすることが出来るようです。 Examples ページにツリー構造の描画やグラフ描画など色々サンプルがあります。 ふとツリー構造を表したいときにすぐ活用できそうですね。 関連エントリ Googleのグラフ描画ＡＰＩ「Google Chart API」 jQueryベースの滑らかなグラフ描画ライブラリ「Flot」 IEでJ
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
Google Chart API にまつわるサービスや各種ライブラリ:phpspot開発日誌
Google Chart API にまつわるサービスやライブラリ。 Google Chart API に関するサービスやライブラリが充実してきたのでまとめてみました。 グラフ作成サービス hohli Online Charts Builder - ウィザードに従ってチャートをリアルタイムに作成可能 Chart Maker - 分かりやすいＵＩにデータを入れるだけで簡単グラフ作成 IE6,Operaでは動かない？ GCFAK 英語じゃないので使えないかも。けどこういうＵＩもなかなか原始的でいいかも。 ライブラリ PHP用 Google Chart API.を超簡単に扱えるラッパークラスライブラリ「gchartphp」が登場 クラスライブラリ GphpChart gchartapiとは別に開発されているクラスライブラリ PHPで「Google Chart API」を扱う ユーティリティ関数
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]スタイルシートを機能拡張するスクリプト -MoreCSS
jQueryでweb制作をする時にキープしておきたい30リストまとめ*ホームページを作る人のネタ帳
