jQuery Easy Display Switch with CSS
http://designm.ag/tutorials/jquery-display-switch/
上記のスクリプトを利用したいのですが、
デフォルトでは、ページを開いた時に、縦12画像一覧表示、
Switch Viewのボタンをクリックすると横3列、縦4列一覧表示になります。
これをページを開いた時に横3列、縦4列一覧表示、
Switch Viewのボタンをクリックすると縦12画像一覧表示、と
デフォルトの逆にしたいのですが、どのようにすれば良いのでしょうか?
JavaScriptに詳しい方、どうぞ宜しくお願いします。
No.1ベストアンサー
- 回答日時:
「横3列、縦4列一覧表示」になるfunctionを個別に処理速度0で実行し、
Switch Viewにあてているクリック用functionの順番を逆にすれば良いです。
<script type="text/javascript">
$(document).ready(function(){
$("ul.display").addClass("swap");
$("ul.display").fadeOut(0, function() {
$(this).fadeIn(0).addClass("thumb_view");
});
$("a.switch_thumb").toggle(function(){
$(this).removeClass("swap");
$("ul.display").fadeOut("fast", function() {
$(this).fadeIn("fast").removeClass("thumb_view");
});
}, function () {
$(this).addClass("swap");
$("ul.display").fadeOut("fast", function() {
$(this).fadeIn("fast").addClass("thumb_view");
});
});
});
</script>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryでのレスポンシブが綺麗に動かない 3 2022/06/21 11:08
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
- WordPress(ワードプレス) ワードプレスで、投稿一覧ページにタグを表示する方法 投稿につけたタグを、記事一覧ページにもカテゴリと 1 2023/05/10 21:41
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- Word(ワード) Word2013 縦書き上下二段の表、改行を続けると次ページに情報が表示されるようにしたい 3 2022/06/16 09:24
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
- InternetExplorer(IE) お気に入りの「一覧」の表示 2 2022/11/21 13:59
- Visual Basic(VBA) Excelのマクロコードについて教えてください 1 2022/03/27 12:02
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
関数でy=g(x)のgとは何の略です...
-
jqueryuiのdialog
-
ajax反映後のjqueryが動かない
-
jQuery Easy Display Switch wi...
-
idを使わずにonclickで自身の要...
-
クッキーを発行するドメイン名...
-
コードをスマートにさせたい。
-
javascript(jQuery)でセル内...
-
HTML5でファイルドラッグ&ドロ...
-
functionから別のfunctionを実...
-
jslintのエラーについて質問
-
jQuery|:not(:animated)
-
Boolean型配列中のTrueの有無を...
-
JavaScript window.openで開く...
-
スマフォではボタンを表示させ...
-
C#テキストボックスの文字を配...
-
ActiveXobjectが作成できない
-
javascriptで、表示されている...
-
なぜmatchメソッドがエラーにな...
-
同じIDで定義した要素の配列を...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
functionから別のfunctionを実...
-
idを使わずにonclickで自身の要...
-
関数でy=g(x)のgとは何の略です...
-
jslintのエラーについて質問
-
jQueryの :not() .not() が有効...
-
クリックすると上に開くアコー...
-
jQueryのプラグイン「Skitter」...
-
関数名をテキストから読み込む...
-
小数点以下を5刻みで表示
-
XMLHttpRequestでキャッシュを...
-
jQueryでzipを解凍読み込みする...
-
Matlabで自作関数をオーバーロード
-
javascript(jQuery)でセル内...
-
要素名がスペースを含む場合のj...
-
ページ内に複数表がある場合のT...
-
処理前の「お待ちください」
-
JS 頭文字が大文字について
-
HTML5でファイルドラッグ&ドロ...
-
Javascriptリアルタイムエラー...
-
getElementByIdを使用したグロ...
おすすめ情報