「カルーセルパネル」は、画像などのコンテンツを並べたパネルを左右にスライドさせて切り替えるUIです。Amazonの「この商品を買った人はこんな商品も買っています」で利用されているので、名前は知らなくてもご存じの方は多いでしょう。カルーセル(Carousel:回転木馬)は、メリーゴーラウンド(merry-go-round)のことで、パネルをスライドしていくと一周して元のスライドに戻ることから「カルーセルパネル」と呼ばれています。今回はjQueryでカルーセルパネルを作成する方法を解説します。 HTML/CSSでカルーセルのベースを作成する 今回作成するカルーセルパネルのHTML/XHTML(以下、HTML)は次のようになっています。カルーセル全体を囲むdiv要素を配置し、id属性に「carouselWrap」を設定します。div要素の内側にはパネルを左方向にスライドさせる「戻る」ボタン用のp
活躍の舞台をどんどん広げているJavaScript。本連載では、JavaScript関連書の執筆でおなじみの古籏一浩氏が、最新の活用Tipsから今後注目のAjax/JavaScriptライブラリーの解説まで、“楽しくできて役立つネタ”をお届けします。
The web content creators that would like to use Shadowbox on an advert resource are provided with commercial licenses. Shadowbox is an application that works as an internet-based image/video viewer, it supports all of the widespread audio and video formats. This app is created with CSS and JavaScript and can be tailored to customer needs easily. The core benefit of Shadowbox is that it allows web
This tool lists a number of javascript scripts designed to embed various objects in HTML pages, such as images, flash animations, movies and iframes. Comparison of various scripts that display images and other objects in somehow cool CSS popups
Since usually the best galleries are created in jQuery, we’ve mainly focused on jQuery type sliders, but there are a few simple CSS galleries as well. This collection has been organized into five main categories so you can easy switch to your preferred section. Before we start, we wanted to tell you that it’s up to you to go for a free or premium solution for your jQuery gallery or slider. Your We
prototypeベースのとてもかっこいいLightviewですが、サンプルや解説が英語なのでいまいちわからないという方のためにサンプルページを作ってみました。 追記:2008/10/03 QuickTIme形式の動画についてのサンプルを用意しました。 サンプルページ JavaScriptの読み込み prototype.jsとscriptaculous.jsは最新のものをGoogle AJAX Librariesを使って読み込んだ後にlightviewを読み込みます。 Google AJAX LibrariesについてはGoogle AJAX Libraries APIとServing YUI Filesを参照ください。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1
jQueryとprototype.js を同時に使いたい場面がまれにあります。 そのとき $('id_name'); といった書式を jQuery, prototype.js 共に持っているのですが、その動作(書式や戻り値)が違います。 例えば戻り値の場合、 prototype.js:DOMオブジェクトを返す jQuery:jQueryオブジェクトを返す という違いがあります。 そこで jQueryとprototype.jsを同時に使いたい場合は jQueryの $(); を違う名前に変更して使います。 <html> <head> <script src="prototype.js"></script> <script src="jquery.js"></script> <script> // 下記2行を追加 jQuery.noConflict(); var j$ = jQuery; <
便利なGoogleブックマークレット12選 管理人 @ 6月 14日 03:13pm Gmail(Gメール), Google マップ, Google リーダー, Google 翻訳, iGoogle, 検索Tips Googleには公式ブックマークレットがあります。文章を選択(ハイライト)した状態でブックマークレットをクリックすると、Google検索できるというものです。でも、ほとんどのブラウザが検索ボックスを搭載している現状では、あまり使う人はいないでしょう。以下に紹介するのは、Google Blogscopedで紹介された、かなり便利な非公式ブックマークレット+GManiaおすすめブックマークレットです。 リンクを「右クリック>このリンクをブックマークorお気に入りに追加」で、リンクを保存して使ってください。また、IEのリンク、Firefoxのブックマークツールバーに保存すると、ツール
Wednesday, June 13, 2007Googmarklets (Google Bookmarklets) By Ludwik Trammer Bookmarklets are short snippets of JavaScript code added to the browser as bookmarks. Every time you open such bookmark it executes its function, usually using information from the currently opened website. Bookmarklets can make daily browsing a lot easier by automating simple tasks. You can find many interesting bookmark
Guide to Most Useful Bookmarklets for Chrome, Firefox, Safari, etc. This guide will help you understand the advantages of bookmarklets over add-ons, how to install bookmarklets followed by a list of essential bookmarklets that should work across all popular browsers including Google Chrome, Firefox, Opera, IE and Safari. Why Use Bookmarklet over Add-onsIf you were to choose between a bookmarklet a
ブラウザの上に、ウインドウをオーバーレイして各種機能を実現するブックマークレットWidgetをここに紹介していきます。今後新機能が追加された場合は、ここに追記していきます。 (2008/3/23にcodereposへの公開を機にソースコードの構造が変わりました。恐れ入りますが、それ以前にブックマークされた方は入れ替えていただけますでしょうか。今までのURLはいずれ削除する予定です。) WidgetというのはUIを伴った小さな部品という意味なのですが、ここで紹介しているものは、ブラウザ画面内をマウスドラッグで移動して、今見ているWebページに機能を追加するウインドウです。 以下のリンクをブックマークに登録したり、ブックマークバーにドラッグすることで使えるようになります。 どんな動作をするか?は試しにリンクをクリックしてみてください。 1.PHPの関数を調べる。 よくわからない関数名をコピペし
(現在のところ)Firefoxのような拡張機能もなければ、○○ツールバーなどもインストールできないChrome。そんなChromeを使えるようにするには、ブックマークレットしかないのだ。 Google Chromeは速い! それは分かっていても、Firefoxのようなさまざまな拡張機能が追加できないことが、常用できない理由の1つ(Chromeにも拡張機能が追加されるという話もあるが)。そんな人のために、拡張機能の代わりになりそうなブックマークレットを紹介しよう。 ブックマークレットはブックマークとしてJavaScriptを登録して、好きなページで実行するもの(詳しくはブックマークレットに関する記事を参照)。Chromeでは、ブックマークレットのリンクをブックマークバーにドラッグ&ドロップすれば登録できる。その機能を使いたいサイトで、ボタンを押せば、機能が実行される。 ブログを書くためのブッ
「ウェブリブログ」は 2023年1月31日 をもちましてサービス提供を終了いたしました。 2004年3月のサービス開始より19年近くもの間、沢山の皆さまにご愛用いただきましたことを心よりお礼申し上げます。今後とも、BIGLOBEをご愛顧賜りますよう、よろしくお願い申し上げます。 ※引っ越し先ブログへのリダイレクトサービスは2024年1月31日で終了いたしました。 BIGLOBEのサービス一覧
link Validate forms like you've never validated before! "But doesn't jQuery make it easy to write your own validation plugin?" Sure, but there are still a lot of subtleties to take care of: You need a standard library of validation methods (such as emails, URLs, credit card numbers). You need to place error messages in the DOM and show and hide them when appropriate. You want to react to more than
ECサイトでよく見るレコメンド機能や「最近チェックした商品」等の一覧の多くは JavaScript で記述されているため、クローラが読み取ることができず、ユーザとクローラで見ているページの内容が違います。これはクローキングになりませんか? サイトマップ αSEOについて αSEO トップ > SEO FAQ > SEO内部施策 FAQ > ECサイトでよく見るレコメンド機能や「最近チェックした商品」等の一覧の多くは JavaScript で記述されているため、クローラが読み取ることができず、ユーザとクローラで見ているページの内容が違います。これはクローキングになりませんか? SEO FAQ ECサイトでよく見るレコメンド機能や「最近チェックした商品」等の一覧の多くは JavaScript で記述されているため、クローラが読み取ることができず、ユーザとクローラで見ているページの内容が違います
Can't find a Plugin you are looking for? Check out the jQuery Wiki page. Are you a plugin developer? Please move your plugin over to this site.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く