わずか3STEP！誰でも簡単にjQueryを使ったLightboxギャラリーを作成出来るソフトウェア・Jquery Photo Viewer - かちびと.net
なかなか面白い試みだったので 備忘録。現在数多くのjQueryを 使用したギャラリーが存在し、その 中には多くのLightbox風ギャラリー が存在します。今日、ご紹介する のはそんなギャラリーを作成する ソフトウェアです。 jQueryを使用したギャラリーを作成するジェネレーターになりますね。ちょっとこの発想はありませんでした。 オンラインのジェネレーターではなく、ローカル環境で動かすソフトウェアです。使い方も凄く簡単ですよ。 言語も日本語に対応しています。 わずか3STEPで作成出来ます。 STEP.1 使い方はDLページにも書いてありますが、簡単にご紹介。おそらく直感で作成出来ます。ソフトウェアをDLしてセットアップすると上記画面が立ち上がります。ここにギャラリーにしたい画像をドラッグ＆ドロップしていきます。 STEP.2 画像を決めたら、上部のPublishをクリックします。すると
コンテンツの概要を好きな高さできっちりピクセル指定できデザインを崩させないjQueryプラグイン「DivGrow」:phpspot開発日誌
コンテンツの概要を好きな高さできっちりピクセル指定できデザインを崩させないjQueryプラグイン「DivGrow」 2010年10月29日- DivGrow jQuery Plugin ? Easily make your DIV containers expandable & collapsable (with animation) HibboBlog コンテンツの概要を好きな高さできっちりピクセル指定できデザインを崩させないjQueryプラグイン「DivGrow」。 ブログの記事の概要なんかを次のように画像の横に表示させるとして、このプラグインを使うことでピッチリと画像の高さをあわせてデザインをスッキリさせることが可能です。 通常こういうことをやろうとすると結構めんどくさいですがjQueryプラグインなので高さを渡してあげるだけで綺麗にそろいます。 で、「Show More」という部分
[JS]背景やボーダーの不透明度をアニメーションで変更するスクリプト -Transify
IE6にも対応した、指定したエレメントの背景やボーダーの不透明度をアニメーションで変更するjQueryのプラグインを紹介します。 IE6でのキャプチャ Transifyの特徴 あらゆるエレメントの背景とボーダーの不透明度を変更します。 設置は簡単で、軽量のスクリプト。 主要ブラウザの全てで動作します。 機能するのは、背景のカラー、背景の画像、ボーダーです。 マウスのホバーで、不透明度をアニメーションで変更します。 jQuery1.4.3でテスト済みです（前のバージョンでも動作します）。 [ad#ad-2] Transifyの実装 「jquery.js」と「transify-min.js」を外部ファイルとして指定し、下記のように記述します。 「#selector」は任意のエレメントを指定します。 $('#selector').transify(); デフォルトでの不透明度は60%に設定されて
カッコ悪いスクロールバーとはオサラバできるjQueryプラグイン「jQuery vScroll」:phpspot開発日誌
カッコ悪いスクロールバーとはオサラバできるjQueryプラグイン「jQuery vScroll」 2010年10月28日- jQuery vScroll ? Simple animated vertical content scroller supporting varying heights HibboBlog カッコ悪いスクロールバーとはオサラバできるjQueryプラグイン「jQuery vScroll」 通常、divなんかにサイズを指定して、overflow:auto とかにすると次のようにスクロールバーがでますよね。 ただ、このスクロールバーはブラウザ依存でちょっとデザインにあわなかったりしてカッコ悪いという場合があります。 デモページ そこでこのプラグインを使えば、スクロールバーを消してしまうことが可能。 消しちゃうとコンテンツ見れないじゃん、という心配は不要で、ボタンをクリック
CSS3とjQueryでフォームを美しく装飾する方法
2014年8月22日 CSS, jQuery どんなWebサイトでも設置されているフォーム。なんの装飾もなく味気ないフォームより、デザインされたもののほうが連絡してみたくなるはずです！そんなフォームも少し手を加えるだけで素敵なデザインに変身させることができます。今回はCSS3とjQueryを使ってより美しいフォームを作成する方法を紹介します。 ↑私が10年以上利用している会計ソフト！ フォームの仕様 今回チャレンジするフォームの主な仕様です！ グラデーション・ボックスシャドウを使って立体感を表現 角丸で丸みをつける（モダンブラウザ） 対応ブラウザ: IE7△, IE8△, IE9, Firefox, Chrome, Safari フォーム制作の流れ CSS3ってなんだ？という人もひとつひとつ記述していけば意外と簡単に作れるはずです！リンクをクリックで各項目にジャンプします。 テキストボック
画像や枠などをキラッと超カッコよく光らせるエフェクトをjQueryで実装:phpspot開発日誌
ShineTime ? A Kick-Ass New jQuery & CSS3 Gallery With Animated Shine Effects 画像や枠などをキラッと超カッコよく光らせるエフェクトをjQueryで実装する例が公開されています。 透明と白のグラデーション画像を斜めにして画像や枠の上をアニメーションで横切らせるというシンプルな方法でFlashサイトのようなクールな演出を実現しています。 実際のデモを見てみましょう。 超クールですね。 チュートリアル形式になっているので横切らせる画像を替えたりしても面白いかも。 このエフェクトは使える気がします。 チュートリアルでは現在のところjQueryは使っていますがプラグインの形ではないのでコードを記述する必要がありますが、プラグインになったらより便利そうですね。 関連エントリ 画像の映り込みエフェクトを実現するJavaScrip
再生ボタン等も変更できちゃうYoutube操作jQueryプラグイン「jQuery Youtube Player」:phpspot開発日誌
再生ボタン等も変更できちゃうYoutube操作jQueryプラグイン「jQuery Youtube Player」 2010年10月26日- jQuery Youtube Player 再生ボタン等も変更できちゃうYoutube操作jQueryプラグイン「jQuery Youtube Player」 このプラグインを使えば次のように、Youtubeの動画に独自の再生、動画送り、リピートボタン、ボリュームボタンの他、プレイリストを付けてリストから再生なんていうことができちゃいます。 YoutubeのコントロールはFlashの中にあるから無理と思っていましたがYoutubeのFlash側で対応したっぽいですね。（外部からJSでFlash内で公開された関数を操作してるようです） ↑プレイヤー下部のリストがプレイリスト。クリックで動画が切り替わります。 ↓現在再生中の秒数なんかも取れたりするようで
スマートフォン最適化サイトの本命か·jQuery Mobile MOONGIFT
jQuery MobileはjQuery公式が開発したスマートフォン向けサイト開発用ライブラリ。 MOONGIFTはこう見る jQuery Mobileは数ヶ月前に開発が発表され、ついに1.0α版が登場した待ちに待たれたライブラリ。既に幾つかこの手のライブラリはあるが、本家が打ち出してくる以上、人気は集まるだろう。既に機能も多いので、大抵のスマートフォンサイトならこなせそうだ。 jQTouchは不具合とは言わないまでも、利用に際してはコツを掴む必要があった。jQuery Mobileはぜひそのテツは踏まず、PC向けライブラリ同様の使い勝手を維持してほしいと願ってしまう。 jQuery MobileはJavaScript/jQuery製のオープンソース・ソフトウェア。iOS、特にiPhone/iPad用のWebサイトを作るための専用ライブラリは数多い。最適化され、iPhoneなどで見やすい画
[JS]jQueryのプラグイン33+1選 -2010年9・10月
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 bxSlider 多彩な表示方法に対応したコンテンツスライダー。 Sudo Slider 各パネルがブックマークできるコンテンツスラ
IEでも動作する画像を超簡単に角丸化できるjQueryプラグイン「IMGr」:phpspot開発日誌
IMGr :: jQuery Image Rounder IEでも動作する画像を超簡単に角丸化できるjQueryプラグイン「IMGr」 $("imageElement").imgr(); と唱えるだけでクロスブラウザで画像の角を丸くすることが可能です。 $("imageElement").imgr( optoins ); でradiusやサイズ、色のカスタマイズが可能。 赤いボーダーで角丸の例 ボーダーを消した例 四方の角丸の操作も自由自在です。 IE 6, IE 7, IE 8, FF 3.6, Chrome 6.0, Safari 5.0, Opera 10.62 のブラウザ上でテストされているそうです。 関連エントリ CSSで角丸テクニック２５ 角丸を使った可愛いカレンダーピッカー実装JavaScript「jsDatePick」 CSS3で影付き角丸グラデーション付きのボタンを作成す
Zudolab -
The Search for a Trusted 메이저사이트: A World of Thrills, Security, and Immersive GamingdErsPOId - December 1, 2023In the dynamic world of online entertainment, the quest for finding a trustworthy 메이저사이트, or major site, is akin to navigating through a labyrinthine digital jungle. Much like the adventurers of old scouring for hidden treasures, modern-day netizens are on the lookout for that one platform
写真を効果的に見せるjQueryプラグイン集「7 Awesome JQuery Photo Plugins for Developers」
TOP > WebDesign > 写真を効果的に見せるjQueryプラグイン集「7 Awesome JQuery Photo Plugins for Developers」 様々なサイトで利用されている高機能なjavascriptライブラリjQuery。扱いやすく多くのプラグインがでていることもあり、定番のライブラリとなっていますが、今日紹介するのはそのなかでも、写真を効果的に見せるjQueryプラグイン集「7 Awesome JQuery Photo Plugins for Developers」。 2.Thumbnails Navigation Gallery with JQuery – Demo CSSとjQueryを上手く使って、写真を効果的に見せることができるプラグインがあつめられています。今日はその中からいくつか気になったものをピックアップして紹介したいと思います。
jQueryとPHPを使ったモダンなユーザ管理機能実装デモ:phpspot開発日誌
jQuery & PHP Powered User Manager BitsNTuts.Com jQuery | CSS | PHP | MySQL Tutorials & Articles jQueryとPHPを使ったモダンなユーザ管理機能実装デモ。 ユーザ登録、ログインといった機能は画面遷移するのが通常ですが、jQueryを使い画面遷移なしのモダンなログイン機能・ユーザ登録を実現するためのコードです。 デモということでそのまま本番プログラムとして使う場合にはチェックはした方がよいですが、ダウンロードして使うことが出来ます。 ページヘッダーに表示されるログインのタブ クリックするとニョキっと表示され、そのままログイン。 「Not Registerd?〜」の部分を押すと登録画面がLightBox風に表示されます。 ユーザデータがMySQLに保存される部分までのPHPコードも同梱されており、
Googleマップを使った経路案内も一瞬で実装できるjQueryプラグイン「jGmaps」:phpspot開発日誌
jGmaps | jQuery Plugins Googleマップを使った経路案内も一瞬で実装できるjQueryプラグイン「jGmaps」 必要なライブラリを読み込んで、次のようにjgmapsメソッドを呼び出すとGoogleマップによる経路案内の地図と文字による案内情報が出ます。 $('#mapa').jgmaps( { width: 300, height: 300, directions:{ address: ['東京都新宿区', '東京都港区'], usePanel: true, panelId: 'panelDirections' } } ); 次のように、経路が地図に表示されます。 文字による案内情報も表示できます。 会社案内や会場案内なんかもこれで速攻実装できそうですね。 ダウンロードできるサンプルをいじくってみましょう。 地名に日本の場所を漢字で使う場合、文字コードはUTF-
どんなHTML要素もカルーセル化してしまえるjQueryプラグイン「CarouFredSel」:phpspot開発日誌
infinite, circular jQuery carousel --- CarouFredSel 2.1.3 どんなHTML要素もカルーセル化してしまえるjQueryプラグイン「CarouFredSel」。 指定した要素以下に<div>や<img>を単に並べるだけでカルーセル化してくれるプラグインです。 少ないスペースで多くのコンテンツを格納するのに便利です。 横だけでなく、縦スクロールもオプションで指定することが出来ます。 ページ下部にexamplesが多数紹介されているので他にも色々な機能があることを確認できます。 関連エントリ 関連アイテムを出す場合等に使えそうなjQueryカルーセル「bxCarousel」 JavaScriptで実装するクルクル回転する3DカルーセルUI実装ライブラリ 無限に回転するカルーセルＵＩ実現用jQueryプラグイン実装チュートリアル
jQueryを使ってiframe要素の中身にアクセスする | バシャログ。
残暑の蒸し暑さから、涼しさを通り越して、寒いと感じる今日この頃、tanakaです。 今日はjQueryでiframe要素の中にアクセスして、情報を取得したり、改変したりする方法を紹介します。 jQueryは、Webページに対するアクセスを簡潔に表現できるライブラリですが、iframe内の文書にまで、 $('div iframe p') といった感じでアクセスすることはできません。ドキュメントが違うからでしょうか？正しい理由はわかりませんが、同時に2つのページをまたいで処理するのは混乱しそうなのでこれはこれでいいと思います。で、そういったときにアクセスする方法があるのでご紹介します。 [追記 2010/09/27]注意点として、親フレームとiframe内ドキュメントのドメインが異なる場合はアクセスできません。 iframe内のドキュメントにアクセスするにはcontents() $(...).
jQuery ソースコードを読むための参考資料一覧 - mollifier delta blog
2010/09/26(日) に京都で Kanasan.JS jQuery コードリーディング #2 が行われる(告知ページ)。みんなで jQuery のソースコードを読むイベントで、今回が2回目だ。参加者募集中です。 jQuery はファイル1つだけのライブラリなのですごい環境とかもってなくても大丈夫なんだけど、読むうえで参考になるサイトとかをまとめてみた。この辺の準備をしておくと理解が深まると思う。 ソースコード http://code.jquery.com/jquery-1.4.2.js http://github.com/jquery/jquery まずは jQuery のソースコードを取ってこないと始まらない。今回はバージョン 1.4.2 を使用する。jQuery の公式サイトから圧縮していないコードをダウンロードしよう。 それと、jQuery ソースコードは Git で管理されて
PHP＆MySQL＆jQueryで構築するチャットボックス実装デモ:phpspot開発日誌
Making a shoutbox with PHP, MySQL and jQuery | CodeForest PHP＆MySQL＆jQueryで構築するチャットボックス実装デモとチュートリアルが公開されています。 Ajaxベースのチャットスクリプトが欲しいという方は覚えておいてもよさそうです。 デモページ 投稿すると画面遷移せずにアニメーションしつつ、そのまま画面に表示されます。 ソースのDLが可能で、プログラム自体もそこまで難しいものではないため、改造して使うのも簡単そうです。 関連エントリ あなたの空き状況が一目でわかるカレンダー実装PHPスクリプト「Ajax Availability Calendar」 あなたのドロップボックスにアップロードが可能なPHPスクリプト PHPスクリプト1つでできる簡単サーバ監視
14のjQueryベストプラクティス[to-R]
14のjQueryベストプラクティス 原文:14 Helpful jQuery Tricks, Notes, and Best Practices 良かったので翻訳してみました。かなりの意訳で、上手に訳せてない箇所も多いので詳しくは原文を参照してください。 1.メソッドはjQueryオブジェクトを返す ほとんどのメソッドがjQueryオブジェクトを返すのが重要です。 これにより次のようなメソッドチェーンが可能になっています。 $someDiv .attr('class', 'someClass') .hide() .html('new stuff'); jQueryオブジェクトを返すのがわかっていれば次のように分割して書くことも出来ます。 var someDiv = $('#someDiv'); someDiv.hide(); 次のように一行で書くことも出来ます。 var someDiv
![14のjQueryベストプラクティス[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)
iPhone/iPadでダブルタップが利用できるjQueryプラグイン「jquery.event.dblTap.js」
iPhone/iPadでダブルタップが利用できるjQueryプラグイン「jquery.event.dblTap.js」 iPhone/iPadでダブルタップをJavaScriptで実装するで紹介してたダブルタップの実装方法をjQueryプラグインにしてみました。 利用方法 jQuery本体とjquery.event.dblTap.jsをhead要素などで読み込みます。 <script src="jquery-.min.js"></script> <script src="jquery.event.dblTap.js"></script> 後は「dblTap」をbindするとdblTapイベントが実装できます(クリックにも反応するようにしています)。 $("button").bind("dblTap",function(){ alert("duble tap"); }) デモ 初期設定では5
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
