jQueryプラグイン「cycle」を利用してサムネイル付スライダーをつくる | 電脳備忘録
前回、「bxslider」というプラグインを利用してサムネイルつきのスライダーをつくったのですが、このプラグイン、「Next」[Prev][サムネイル]をクリックすると自動再生が止まってしまうようです。 これは困ったといろいろ解決策を探してみましたが結局見つけることができませんでした。 たまたま別で試したことがある「cycle」というプラグインでも同様のことができそうだったので対応してみました。 ということで以下備忘録。 cycleの設定はこんな感じ、jQueryでごにょごにょ書きます。 サムネイルの部分はbefor/afterで追加するんですね。あと(idx+1)でカウントアップしているので、ファイル名のつけ方をそれに合わせる必要がありますね。今回は適当だけど、桁を調整しないとなぁ...。 $(function() { $("ul#slides").after('<ul id="slid
HTML5 × CSS3 × jQueryを真面目に勉強 – #8 jQueryプラグインの作り方について詳しく | DevelopersIO
僕は人の名前を覚えるのが苦手です。それはさておき、jQueryプラグインの作成方法について頻繁に忘れるので、手順をここにまとめておくことにします。コレさえ読めば急にプラグインを大量に作れといった無茶ぶりをされても大丈夫。 多い日も安心♪（ゝω・）vｷｬﾋﾟ はじめに - jQuery プラグインの構成 細かい差はあれど、基本的にjQueryプラグインは以下のような構成で成り立っています。 // 匿名関数で全体をラップ - (5) (function($) { // このプラグインの名前 - (1) $.fn.name_space = function() { //要素を退避 - (2) var elements = this; // 要素をひとつずつ処理 - (3) elements.each(function() { // 具体的な処理をここに記述 }); // method chain
lightBoxのjqueryのtitleにリンクを付ける: データ処理
------挿入部分・例 <div id="gallery"> <ul> <li> <a href="photos/image1.jpg" title="コメント"> <img src="photos/image1.jpg" width="56" height="72" alt="" /> </a> </li> </ul> </div> ------title="コメント"部分にリンクをつけたい時・例 title="<a href='リンク先.html' > コメント </a>" -----webにリンクさせるとき・例 title="<a href='http://ron2010deta.seesaa.net/' > コメント </a>" ---------title部分から ファイルのダウンロ
jQuery を高速に使う CSS セレクタの書き方 - てっく煮ブログ
JavaScriptjQuery は CSS セレクタで要素を選んで処理できるのが魅力的ですね。そんな jQuery ですが、CSS セレクタの書き方次第で速度が大幅に変わってきます。ここでは jQuery の内部処理を疑似コードで示しつつ、jQuery を高速に使うためのポイントを５つに絞って紹介します。何度も同じセレクタを実行しないクラスだけを指定するのは禁止#id を積極的に使う途中までの結果を再利用する子供セレクタ(>)を使うと速くなることがある※ この記事は jQuery 1.2.6 のソースコードを元に記述しています1. 何度も同じセレクタを実行しない改善前 // 例題 1 $("div.foo").addClass("bar"); $("div.foo").css("background", "#ffffff"); $("div.foo").click(function(){
Webデザイナーのためのjquery入門2（前編）
82 views jQueryの社内勉強会用スライドです。だいたい1時間で終われるように、前編・後編に分けています。 後編は6月以降で公開を予定しています。 More… jQueryの社内勉強会用スライドです。だいたい1時間で終われるように、前編・後編に分けています。 後編は6月以降で公開を予定しています。 このスライドを作るにあたって、書籍「WebデザイナーのためのjQuery入門」をかなり参考にしています。 Webデザイナーのためのjquery入門2（前編） — Presentation Transcript Webデザイナーのための jQuery入門 -覚醒編（前編） -jQueryのコードを自分で考えて書けるようになろう！ 目標 日々の業務にjQueryを取り入れて、 自分で何かを作れるようになる。 大まかな内容１. 何かを取ってくる ２. それに何かをする３. まとめ 1
ラジオボタンのクリックがSafari・Chromeで反応しない、の解決策 | snippet
仕事で外注プログラマーから頂いたJSが、SafariとChrome限定で動かない、という珍現象が起きました。 ラジオボタンをクリックしたら、スクリプトが動作するというもの。webkit系ブラウザではfocusが効かないのでchangeに修正すると動きました。 stackoverflowでの記事がヒントになりました。 ↓問題のソース $(":radio").focus(function(){ //function内容 }); ↓解決されたソース $(":radio").change(function(){ //function内容 }); 参考サイト jQuery .focus() and .blur() not working in Chrome or Safari
Turn.js: The page flip effect in HTML5
Turn.js is a JavaScript library that will make your content look like a real book or magazine using all the advantages of HTML5. The web is getting beautiful with new user interfaces based in HTML5; turn.js is the best fit for a magazine, book or catalog based in HTML5. <div id="flipbook"> <div class="hard"> Turn.js </div> <div class="hard"></div> <div> Page 1 </div> <div> Page 2 </div> <div> Page
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...
レスポンシブ・ウェブデザイン基礎