タグ

jQueryに関するw-colonelloのブックマーク (20)

  • layerJS

    A slider needs a single stage, a layer and one frame for each slide. Use regular links to control the slider. The different layerJS elements are defined by the lj-type attribute. lj-default-frame will indicate which frame is shown initally in the layer. The example shows 2 frames in the layer, repesenting 2 slides. The controls are normal HTML links that reference a specific frame (e.g. #frame1) o

    layerJS
  • You Don't Need jQuery - Qiita

    注意とお願い この記事の内容はもはや古いです。ここに書いている方法では動かないものをいくつか見つけました。参考にする際は動作をよく確認してから使ってください。 ひとつお願いがあります。「あれ、動かないぞ」というコードを見つけたら是非コメントか編集リクエストで教えてください。解決方法までなくても結構です。「これはもう動かないよ」という印をつけたいのです。 この記事はYou Don't Need jQueryの日語訳と同じ内容です。 先日ひょんなことからYou Don't Need jQueryの日語訳をさせていただきました。著者のCam Songさんからも快諾をいただけたので1、Qiitaでも公開させていただきます。 なお、家の英語の説明は継続的にメンテされているので、この記事の情報は古くなっている可能性があります。 追記 この記事は当初は「もうjQueryは必要ない」というタイトルで

    You Don't Need jQuery - Qiita
  • 【怖くないJavaScript + jQuery】ウィンドウサイズに合わせてメイン画像のサイズを変えたい

    毎度おなじみ、[怖くないJavaScript + jQuery]シリーズです。 かゆい所に手が届くような、ニッチなjsをどんどん作っていきたいと思います。 「今回はウィンドウサイズに合わせてメイン画像のサイズを変えるjs」を作ります。 ファーストビューは維持したいんだけどメイン画像はウィンドウサイズに合わせて大きく取りたいと要望があった時には最適です。ウィンドウをリサイズした時の処理も入れて行きます。スマホにもちょっとだけ配慮します。 仕組みとしては、全体のウインドウのheightを取得して、上記のheaderと要素Aの高さを引き算した高さをメインビジュアル部にCSSとして適用すればOKです。 headerと要素Aの高さは指定しなくても動作はしますですが、しておいた方が安心です。 デモはこちら ZIPでダウンロード

    【怖くないJavaScript + jQuery】ウィンドウサイズに合わせてメイン画像のサイズを変えたい
  • 続・jquery.neosmart.fb.wall を導入しました | フロントエンドエンジニアのblog

    昨日導入した、jquery.neosmart.fb.wall ですが、2点ほど問題がありました。その1つはセキュリティ上の問題でもあります。 1つ目は、25人を超える「いいね!」がある投稿に対して、「いいね!」数が25までしか表示されないことです。これは、Graph API がデフォルトで25しか「いいね!」した人を表示しないのが原因とのことで、jquery.neosmart.fb.wall.js の61行目を、 url: graphURL+o.id+'/'+type+'?limit='+o.max+'&likes.limit=200&access_token='+o.accessToken', のように、likes.limit=いいね!の上限数 というパラメータを追加することで解決しました。(参考:永遠少年症候群 | fb.wallメモ最終版) 2つ目は、Facebook のアクセストー

    続・jquery.neosmart.fb.wall を導入しました | フロントエンドエンジニアのblog
  • 拾ってきた jQuery コードが動かない場合の簡易対処方法 | 毎日興味津々

    jQuery のサンプルコードってかなり前から多数出回っていて、 「これをコピペすればこうなりますよ」 というレベルで紹介されているものも少なくありません。 でも、実際試そうとしたら、自分のサイトではピクリとも動かない・・・ こんな経験無いでしょうか? 自分がまさにそうで、この部分でドハマりして当初 jQuery は挫折してました。 そういった際の対処方法をご紹介します。 あるサイトから「そのまま動く」と明記されているコードを拾ってきます。 例えば、以下のような感じで大抵は書いてあると思います。 (実際の処理は省略してます) $(document).ready(function(){ // jQueryの処理 }); これを WordPress のテーマに組み込んでみたら動かない(エラーが出る)、 サンプルHTMLを丸ごとコピーして html ファイルを生成したら問題ない。 自分の場合、こ

    拾ってきた jQuery コードが動かない場合の簡易対処方法 | 毎日興味津々
  • jQuery Image Lightbox: Prime Time Style

    Prime Time Style Gallery with Rotate thumbnails - Image Lightbox. FAQ April 22, 2014 Lightbox image viewer won't work in IE Hi, I've purchased the latest Visuallightbox version and inserted it into my page. It looks fine in all browsers except IE. Could you help with it? Thanks. March 18, 2014 Start lightbox youtube on click from the text link/image I have one other question: I want to be able to

  • 実践しながらjQueryを学べるオンライン学習サイト・Try jQuery - かちびと.net

    実際にコードを書いて学べる学習コンテンツ・Try jQueryのご紹介です。jQuery公式のオンライン学習サイトっぽいですね。英語ですけどこれから学ぼうという方にはうってつけかもしれません。 実践でjQueryを学べるサイトです。スライドも完備されています。英語が苦手な方にはちょっと難しいかもですけど・・ ドメインから察するに公式のものでいいと思います・・確認はしていませんけど。内容は基的なものからスタートします。 スライドからスタートです。 他の学習サイト同様、指示通りに進めていきます。 正解ならSuccess!の文字が出て次に進みます。 これから始めたい、という方は如何でしょうか。 Try jQuery

    実践しながらjQueryを学べるオンライン学習サイト・Try jQuery - かちびと.net
  • Cycle2

    Overview Cycle2 is a versatile slideshow plugin for jQuery built around ease-of-use. It supports a declarative initialization style that allows full customization without any scripting. Simply include the plugin, declare your markup, and Cycle2 does the rest. Highlights: Supports all browsers Declarative: no scripting needed! Responsive: fully control your slideshow via css (resize this page to se

  • jQueryの独自セレクトボックスを作成するjQueryプラグイン「jQuery.customSelect()」:phpspot開発日誌

    jQuery Custom Select Box Plugin - jQuery.customSelect() jQueryの独自セレクトボックスを作成するjQueryプラグイン「jQuery.customSelect()」 次のように、カスタマイズしたセレクトボックスを生成できます。非対応ブラウザも素のselectが出るので安心。 CSSを使って自分好みのデザインにするのが簡単にできそうなのが特徴です $(element).customSelect();と初期化するだけで使えて、CSSも通常、オープン時、フォーカス時等の場合に応じて設定できるので便利。 関連エントリ selectボックスを超カッコよくするjQueryプラグイン「Chosen」

  • 今日から現場で使えるjQueryのフォーム関連プラグイン15選

    Webサイト制作で欠かせないのがフォーム。 これらは購入時や、お問い合わせ、ログインと言ったパーツで良く使われます。 今回はそんなフォームにスポットを当てて、なるべく使いやすく、導入しやすいものをご紹介いたします。 ただし、あくまでもjQueryプラグインのご紹介なので、よくわからないと言う方は華麗にスルーしてください。細かい導入方法までは説明しません。 機能性重視プラグイン In-Field Labels jQuery Plugin フォームの中に入っている文字がオンクリックでうっすらと消えていくプラグイン。 なかなかいい感じ。 Create a Progress Bar With Javascript | Nettuts+ demo シームレスにフォームの内容を変え、さらにどれくらい進んでいるかが%で確認できる。 overset - jVal - jQuery Form Field V

    今日から現場で使えるjQueryのフォーム関連プラグイン15選
  • jQuery速報 jQuery Navi

    jQuery、Javascriptに関するWEBサイトやブログ記事、Twitterでのつぶやきの中から、役立つ情報を日々紹介しています。jQuery速報 jQuery Navi「easySlider1.7.js」を利用して、シンプルなHTML構造で設置も簡単なスライドショーを実現する ソースがシンプルで設置も簡単なjQueryのスライドショープラグイン「easySlider1.7.js」ですが、Y.Motoshige 様のサイトでは、実際の動作サンプルが公開されていますので、設置やカスタマイズの際には … 278 Views

  • 『画像のポップアッププラグインの最新バーション』

    リアナのカスタマイズ日記(CSS編集用デザイン)アメブロ 新CSS CSS編集用デザイン 無料 カスタマイズ アメブロカスタマイズ 初心者 CSS スタイルシート デザイン javascript jQuery 画像のポップアッププラグインの最新バーション 記事内の画像をクリックすると画像がホップアップされ拡大する プラグインです。 質問・・・クリックすると回答が見られます。 メッセージボードに、この機能は使えないの? 枠に背景画像は設定できないの? ◆ 以前までのものとの変更点 ① ポップアップされた画像を右クリック禁止するかどうか?を選択できます var r_click="OK";// 右クリック可能 var r_click="NG";// 右クリック禁止 ② 中央にポップアップ画像を表示?クリック場所に表示?を選択できます。 (クリック場所に表示? は以前のものです。) var D_c

    『画像のポップアッププラグインの最新バーション』
  • ホタルの光をイメージさせるようなエフェクトを実装するjQueryプラグイン・firefly - かちびと.net

    ちょっと適切なタイトルが思い浮かばな かったのですが、指定した要素を沢山 配置してアニメーションでランダムで 移動させる、というjQueryプラグイン。 デモでは、よく見かけるパーティクルで 作成したホタルっぽいエフェクトを用意 しています。 タイトルじゃ良く分からないと思いますのでデモをご覧下さい。 itsfireflyで使われているエフェクトのオマージュみたいですね。ホタルっぽいエフェクトです。 Canvasとかじゃなくて、画像を直に指定してランダム表示させてアニメーションで動かすプラグイン、みたいな感じ。cssのpositonとz-indexで背景化しています。画像を変えれば違った表現も出来ますねー。プラグインも軽量です。 コード <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jque

    ホタルの光をイメージさせるようなエフェクトを実装するjQueryプラグイン・firefly - かちびと.net
  • 画像を使ったいろいろなjQueryプラグイン224個まとめ - かちびと.net

    画像にエフェクトをかけて拡大表示したり、スライドを作ったり、ツールチップで表示したり、というような画像を使用したjQueryプラグインが沢山あるのと、探してる方が直ぐに見つけられるように、という事でリンク集を作りました。 という訳で、集まっているjQueryのプラグインの共通点は画像を使っている、という事だけです。一貫性無いといえば無いですが、個人的にも必要とする事が多いので自分用のメモも兼ねてシェア。 日語 English 結構カテゴリ分けはいい加減かもしれませんのであしからずご了承下さい。画像じゃなくてもいいんじゃ・・みたいのもありますが、デモで画像を使ってる、画像と相性が良さそう、みたいなものは基的に掲載しています。 リンクにマウス乗せればキャプチャが出ます。 Lightbox Lightbox風に画像を表現できるjQueryいろいろ Lightbox2 / ベーシックなタイプ。

    画像を使ったいろいろなjQueryプラグイン224個まとめ - かちびと.net
  • jQueryプラグイン サンプル(画像系):skuare.net

    JavaScriptライブラリのjQueryのプラグインを利用して出来るサンプルです。 jQueryは、John Resig によって開発されたJavascriptライブラリで、AjaxやDOMプログラミングコードを「簡潔・簡単」に書けます。 ここでは、画像関連のjQueryプラグインを紹介しています。 JSONファイルから画像スライダーを作成するjQueryプラグイン「jsonslider」 JSONファイルに画像パスなどのデータが格納されている場合、処理を入れて画像スライダーにするのはそれなりの手間です。 jQueryプラグインのdcdeiv/jsonslider · GitHubを利用することでその手間が少し軽減できるかもしれません。 via:dcdeiv/jsonslider

    jQueryプラグイン サンプル(画像系):skuare.net
  • http://www.css-lecture.com/log/javascript/jquery-select.html

  • CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました

    Webデザインをしていると、HTMLCSS だけではできない表現ってありますよね。そんな時によく使うのが jQuery。今回は jQuery っていまいちよく分からない ... っていう人が、jQuery に少しでも親しんでもらえたらいいなーと思って、知ってる事をまとめてみました。なので jQuery 初心者さん向けの記事です。 とっても当たり前なんですけど、Web サイトは基的に HTML で書かれていて、デザインは CSS で装飾されていますよね。最近では CSS3 の登場で、簡単なアニメーションも CSS で作れるようになりました。でもクライアントワークでは、まだまだ CSS3 を使える部分が限られているし、Webデザインに少し動きなどをつけたい時などは、まだまだ jQuery を活用する事も多いです。 私は Javascript が苦手で、jQuery もどちらかというと苦

  • jQueryのプラグイン33+1選 -2011年9月 | コリス

    紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 Loupe 画像の一部を拡大します、多彩なオプションが便利。 Slicebox 画像をダイナミックに3Dスライスするギャラリー。 E

  • クライアントワークでよくお世話になっているjQueryプラグインいろいろ

    私が仕事Web制作をする時に、よく利用させてもらっている jQuery のプラグインをまとめてみました。ライセンスは MIT、GPL のものばかりです。デザイン、レイアウト的に汎用性のあるものになっています。また、IE 特有のバグ(透過PNGの黒ずみなど)対策についても少し触れてみました。 Webサイトを作る時に、何かとお世話になっている jQuery のプラグイン。HTMLCSS だけでは表現できないことも、Javascript を使うことでいろいろできるようになりますよね!インターネットを見ていると、当にたくさんの jQuery のプラグインが公開されています。feed を読んでいても、1日一個くらいは新しい jQuery のプラグインに出会います。どれを使ったらいいか迷うくらい … 。 今回は、そんな数ある jQuery のプラグインの中から、 私がクライアントワーク(仕

  • サンプル – 少しのコードで実装可能な20のjQuery小技集 | Webクリエイターボックス

    WebデザインやWebサイト制作、最新のWeb業界情報などを紹介していくサイト。設置方法 1. マウスオーバーで画像を変更 2. 外部リンクを別タブで開く Google検索 3. ページトップへスクロールする ページトップへ 4. Div全体をクリックできるようにする このDiv全体をクリックするとリンク先へジャンプします。スマートフォン用サイトにも最適!! このDiv全体をクリックするとリンク先へジャンプします。スマートフォン用サイトにも最適!! このDiv全体をクリックするとリンク先へジャンプします。スマートフォン用サイトにも最適!! Webクリエイターボックスへ

  • 1