jQuery Easy Display Switch with CSSについて教えてください。

質問

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

atse · ベストアンサー

「横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>

お礼

早速、教えていただきありがとうございます。
思うような動作になりました。