サムネイルクリックで画像切り替え | 私的雑録
$(function () { // プリロード for(var i = 1; i <= 5; i++) { $('<img>').attr('src', '/img/full0' + i + '.jpg').appendTo('body').hide(); } $('#thumb img').click(function() { // thumbをfulに置換 var img_full = $(this).attr('src').replace('thumb', 'full'); // 画像をフェードイン、フェードアウトする $('#full img').fadeOut('fast', function() { $(this).attr('src', img_full).fadeIn(); }); // 画像をフェードイン、フェードアウトしない // $('#full img').att
bxsliderのサムネイル画像枚数を自由に変更できるようにする方法 - ECサイト構築運営に役立つ情報発信｜モバイルファーストマーケティングラボ
bxsliderといえば、カスタマイズ性の非常に高いスライダー系プラグインで有名ですね。 レスポンシブ対応やページャー・サムネイル画像のカスタマイズなどにも対応しており、「スライドショーが欲しい」と言われるとまず思い浮かぶプラグインになっています。 そんなbxsliderを使用したのサイト管理をより便利にする方法を今回は１つご紹介します。 「サムネイル画像を使用していて、定期的にスライダー枚数を増減させたい」という方は必見です。 完成するもの １：サムネイル画像付きのレスポンシブなスライドショー ２：CSSを触らなくても、サムネイル画像枚数の変更に対応してくれる ３：スマートフォンでも見やすい配置 設定のための３ステップ ０：用意するもの jQuery Content Slider | Responsive jQuery Slider | bxSlider 今回はコーディングへの工夫のみで
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
