Jquery ウィンドウサイズに合わせた画像スライドショーの作成（リサイズ対応版） | Stronghold Archive
前回 “Jqueryでウィンドウサイズに合わせた画像スライドショーを作成” からの続きです。 前回の記事ではリサイズに全く降れていなかったのでちょっと変更 ・横幅100％の画像をスライドショーさせる ・（追加）ウィンドウ幅をリサイズ（縮小）して高さまで極端に小さくなるのを回避 コード 自分用でもあるので下記一気にコピペ！！ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <!– links –> <link rel="stylesheet" href="css/reset.css" type="text/css" /> <script src="http://code.jquery.com/jquery-latest.js"></script> <!– close.links –> <title>title</t
jQuery 簡単かつ高性能なスライダー【bxslider】の設置 – Divスライド系の中では一番のオススメです。 | Stronghold Archive
【bxslider】レスポンシブデザイン対応版の記事はこちら アップデートによりレスポンシブデザイン対応版に変更されていましたので、改めてメモとして記事にまとめております。CSS3のアニメーションを組み込んでスライドがさらにスムーズな動作になっています。※レスポンシブ版の方はイージングの選択の幅が狭い事やIE6が非対応だったり等、若干の癖がありますので、こちらで記事化したバージョンと使い分ける事をオススメします。 設置方法 > DEMO > DOWLOAD 設置方法も非常にシンプルです。プラグインを読み込みdivやliの階層を書くだけ。 プラグインのダウンロードは本家サイトより行えます。 <script src="js/jquery.1.X.X.js"></script> <script src="js/jquery.easing.1.3.js"></script> <script src
幅のカスタマイズも可能なレスポンシブWebデザイン用の表示確認ツール・Responsivator - かちびと.net
レスポンシブWebデザインの表示 確認ツールです。よく見かける タイプのツールですが、OSSで ソースが公開されているので後 で自分のサーバーに入れようと 思ったので備忘録として。 よく見かける、複数のサイズの幅を同時に表示確認出来る、というやつです。幅の数値は設定可能です。 こういうやつ。URL入れてRESPONSIVATE!っていうボタンをクリックすれば表示確認出来ます。 ↑ 幅のサイズは変更できます。 URLも発行されるので他の方に見せるのも楽ですね。OSSとしてソースコードも公開されてます。これは導入してみようと思います。 Responsivator
jQueryでスクロールバーのデザインを変更する | WEBZARU
新着情報一覧などのように全て見せる必要がない(スクロールして閲覧可能)場合に、そのコンテンツだけスクロールさせて見せることがよくあります。 CSSで高さを固定してやることによりそれ以上の高さが必要な場合には、自動的にスクロールバーが表示されるのですが、何よりも見た目がダサいです。そんな時、jScrollPaneを使うとスクロールバーのデザインを変更することができます。 jQueryのプラグインであるjScrollPaneの使い方をご紹介。 jScrollPaneとは スクロールバーのデザインを変更するためのjQueryのプラグインです。本体のJavaScriptとCSSの他にjquery.mousewheel.jsも併用し動作します。 現時点で最新版の「v2.0.0beta11」を例としています。ダウンロードは、本家サイトから行ってください。 jScrollPaneの使い方 <!DOCTY
LavaLamp for jQuery lovers! | Ganeshji Marwaha
Click on the above image to land in the Lava Lamp Demo page. Then, hover over it and feel for yourself, the nifty effect that Lava Lamp offers. What you just experienced is nothing but the LavaLamp menu packaged as a plugin for the amazing jQuery javascript library. I personally believe that the effect rivals that of flash – Don’t you? Especially considering the fact that it is extremely light wei
LavaLamp for jQuery を動作させるためのメモ | GoreyBlog［思い出すことなど］
【自分用メモ】 LavaLamp for jQuery Webサイトのナビゲーションに使用しようと思っているjQueryプラグイン「LavaLamp for jQuery」で、そのままの設定だと設置後にリンクをクリックしても動作しなかったので、動作させるようにするためのメモ。 [xhtml] <pre lang="”LANGUAGE”"> $(function() { $("#<strong style="color:black;background-color:#ffff66">lavaLamp</strong>").<strong style="color:black;background-color:#ffff66">lavaLamp</strong>({ fx: "backout", speed: 700, click: function(event, menuItem) { re
jQuery.supportでのブラウザ判別
chromeとsafariを対象とする場合 if(!jQuery.support.checkOn){ alert('あなたがお使いのブラウザはChromeもしくはSafariっぽいです'); } if文の条件式の中で!をつけたので、checkOnがfalseであればこの条件文に該当します。該当するのはwebkitだけなので、これでchormeとsafariのみに振り分けたコードを記述できます。なお、Android標準ブラウザ、iPhone / iPad標準ブラウザといったスマートフォンも同じChromeとSafariなので、この条件に合致します。 FirefoxとOperaを対象とする場合 if(jQuery.support.checkOn && jQuery.support.noCloneEvent){ alert('あなたがお使いのブラウザはFirefoxもしくはOperaっぽいです'
[jQuery] レスポンシブ表示・スワイプ切り替え対応でモバイルページにも使いやすい画像スライドショープラグイン – SlidesJS
以前は、Slides, A Slideshow という名前だった多機能スライドショープラグインですが、いつの間にか SlidesJS という名前に変わり、機能もシンプルに、かつマルチデバイス対応できるものに変わっていました。 オプションや使い方などもマルっと変わっていたため、古いバージョンの内容を削除し現在の仕様内容へ書き換えました。 SlidesJS プラグインの特徴 モバイルページにも使いやすいよう画像のレスポンシブ表示が可能で、スワイプでの画像切り替えもできます。 オプションでページャー・ページナビゲーション・自動再生の開始と停止ができ、エフェクトはスライドにもフェードにも変更できます。欲しい機能が揃っている上、設置も簡単です。 ダウンロード プラグインのダウンロードは以下のページより。 SlidesJS, a responsive slideshow plug-in for jQu
![[jQuery] レスポンシブ表示・スワイプ切り替え対応でモバイルページにも使いやすい画像スライドショープラグイン – SlidesJS](https://cdn-ak-scissors.b.st-hatena.com/image/square/13dbe7efe8ed31a6d9a46b661656ca737229776f/height=288;version=1;width=512/https%3A%2F%2Fmemocarilog.info%2Fwp-content%2Fuploads%2F2011%2F12%2Ficon.png)
背景にフルスクリーン画像をスライダーで流すjQuery「maxImage Scaling Plugin」
続いてbody部に １．フルスクリーン背景に使用する画像を設定します。 <img src=”images/bg1.jpg” alt=”” /> // 画像のパス１ <img src=”images/bg2.jpg” alt=”” /> // 画像のパス２ <img src=”images/bg3.jpg” alt=”” /> // 以下画像の数だけ設定 ・・・・・・ ２．コンテンツ作成 <div id=”maincontent” >～</div>に囲まれた部分にコンテンツを入れます。 そして、任意の場所（</body>の直前など）にJavaScriptを設定して完了です。 <script type=”text/javascript”> $(function(){ jQuery(‘img.bgmaximage’).maxImage({ isBackground: true, slideSho
jQueryでスクロールすると表示する系いろいろ
jQueryでスクロールすると表示する系いろいろ 最近はスクロールするときにいろいろ仕掛けをするのが流行なようです。 ここではシンプルにある要素の位置とか最下部までスクロールしたら何か表示するということをやってみます。 投稿日2012年03月08日 更新日2019年12月19日 ちょっとスクロールするとフェードして「トップへ戻るボタン」を表示を表示します。 ボタンは下の方にこんな感じで配置します。 html <p id="page-top"><a href="#wrap">PAGE TOP</a></p> fixedにすると固定配置されます。 css #page-top { position: fixed; bottom: 20px; right: 20px; font-size: 77%; } #page-top a { background: #666; text-decoration
jQueryAutoHeight.js - 複数のカラムの高さを最大値にそろえるjQueryプラグイン | かたつむりくんのWWW
Movable Type, Craft CMS, Drupal, HTML, CSS, JavaScript, jQuery etc. jQueryAutoHeight.js とは jQueryAutoHeight.js とは、複数のボックスの高さを自動的にそろえるシンプルな jQueryプラグインです。高さのそろえ方は、次の２通りです。 セレクタで指定したすべての要素を、その中の最大値にそろえる セレクタで指定した要素を、オプションで渡した数ごとに、その中の最大値にそろえる（1行ごとにそろえられる） サンプル 複数のボックスの高さを最大値にそろえるjQueryプラグイン ダウンロード Releases · tinybeans/jQueryAutoHeight ※jQuery 1.9 以降で利用する場合は v0.04 以降をお使いください。 使い方 ファイルの読み込み ダウンロードしたファ
少しのjQueryコードでHTMLテーブルの列にリンク先を指定できるようにする - かちびと.net
列全体がクリック可能で、Wikipediaに飛びます。セル内にアンカータグが含まれている場合はそちらが優先されます。Webサービスの料金プランなんかに使えそうでは。 jQuery( function($) { $('tbody tr[data-href]').addClass('clickable').click( function() { window.location = $(this).attr('data-href'); }).find('a').hover( function() { $(this).parents('tr').unbind('click'); }, function() { $(this).parents('tr').click( function() { window.location = $(this).attr('data-href'); }); });
jRumble | A jQuery Plugin That Rumbles Elements
Latest Version: 1.3 Latest Release Date: December 3, 2011 Original Release Date: March 30, 2011 Compressed: 1.47kb Uncompressed: 4.84kb View GitHub Repository About The Plugin jRumble is a jQuery plugin that rumbles, vibrates, shakes, and rotates any element you choose. It's great to use as a hover effect or a way to direct attention to an element. 2016-11-04 Update This project is no longer being
[JS]インタラクティブでフレキシブルなレイアウトが楽しめるスクリプト -Magic jQuery
ページ内のエレメントの配置や、メニュー、タブなど、ユーザーインタラクションを伴ったレイアウトが簡単に実現できるjQueryのプラグインを紹介します。 Magic jQuery デモ [ad#ad-2] 配置のデモでは、ピンクのパネル（「drag me」）をドラッグすると、それに合わせて各パネルの配置がダイナミックに変更されます。 ピンクのパネルを移動したキャプチャ 上記の各色のパネルにはそれぞれ条件が設定されています。 例えば、オレンジのパネルは下記のようなスクリプトになっています。 JavaScript $("#orange").align({top:'', bottom:"", left:"", rightIsLeftOf:'pink'}); $("#orange").limit({rightIsLeftOf:'blue'}); オレンジのパネルはピンクの左に沿って配置（align:r
画像ローディング中にLoadingアニメーションを表示するjQueryプラグイン「How to Create an Awesome Image Preloader 」｜BLACKFLAG
最近ではWebページ上に多くの画像を表示するような場合には、 読み込むまでにLoadingアニメーションを表示してユーザーのストレスを軽減させる手法をよく見かけますが、 それを簡単に組み込むことができるjQueryプラグイン 「How to Create an Awesome Image Preloader 」が便利そうだったので紹介してみます。 ≫How to Create an Awesome Image Preloader | Nettuts+ ≫DEMO：Image Preloader デモ画面上で動作を確認すると以下の様な感じに。 DEMO：Image Preloader 単純に画像ロード中にLoadingアニメーションを表示するだけでなく 完了後は画像が順々にフェードインしてくる加減が気持ちいい。 Loading中は該当要素に対して「.preloader」のクラスを付加して、
HugeDomains.com
Captcha security check monodez.com is for sale Please prove you're not a robot View Price Processing
Polaroid Photobar Gallery with jQuery | Codrops
In this tutorial we are going to create an image gallery with a Polaroid look. We will have albums that will expand to sets of slightly rotated thumbnails that pop […] In this tutorial we are going to create an image gallery with a Polaroid look. We will have albums that will expand to sets of slightly rotated thumbnails that pop out on hover. The full image will slide in from the bottom once a th
μGallery - tiny and clean jQuery image gallery plugin
μGallery - tiny and clean jQuery image gallery pluginHelp me please to improve my gallery, I need your feedback in my blog. You do not need to register, all languages (all what exists in Google Translate ;-)) are welcome. Just write me a comment. I hadn't found a suitable image gallery for my site among similar ones. I looked for a gallery which is simply to use, highly customizable, without any F
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
複数のタグをDIVタグで囲みたい - OKWAVE
jQueryスクロールしてもついてくるサイドメニュー - サンプルデモ