ここから本文です

【コイン100枚!】javascriptなどプログラムに詳しいお方回答をお願いします!

hix********さん

2018/1/2312:34:58

【コイン100枚!】javascriptなどプログラムに詳しいお方回答をお願いします!

住宅設備設置の仕事をしていましてホームページを作ったのですが、
「施工事例」のページで「施工前(before)」と「施工後(after)」の写真をbxsliderで
掲載したいと思い、とりあえず施工後(after)だけ掲載してみました。

http://kubotechnoservice.com/works/detail_b201801.php

HTML本文には実際にスライドする写真の記述のみで、
サムネイル部分はjavascriptのほうに記述しています。
-----------------------------------------------------------------
【HTML】※スライダー部分のみ抜粋
<div class="bxslider_b1_af">
<p><img src="img/pho/detpho_b2_af01.jpg" alt="" /></p>
<p><img src="img/pho/detpho_b2_af02.jpg" alt="" /></p>
<p><img src="img/pho/detpho_b2_af03.jpg" alt="" /></p>
<p><img src="img/pho/detpho_b2_af04.jpg" alt="" /></p>
</div>
-----------------------------------------------------------------

-----------------------------------------------------------------
【javascript】※スライダー部分のみ抜粋
$('.bxslider_b1_af').bxSlider({
controls: false,
//サムネイルの設定
buildPager: function(slideIndex){
switch (slideIndex){
case 0:
return '<a data-slide-index="0" href=""><img src="../works/img/pho/detpho_b2_af01_thum.jpg" /></a>';
case 1:
return '<a data-slide-index="1" href=""><img src="../works/img/pho/detpho_b2_af02_thum.jpg" /></a>';
case 2:
return '<a data-slide-index="2" href=""><img src="../works/img/pho/detpho_b2_af03_thum.jpg" /></a>';
case 3:
return '<a data-slide-index="3" href=""><img src="../works/img/pho/detpho_b2_af04_thum.jpg" /></a>';
}
}
});
-----------------------------------------------------------------
今はまだ施工事例が1件だけですが、今後増やしていこうと思うと、この記述だと、
bxslider_b1_afというclassもbxslider_b2_af、bxslider_b3_af...........と
classを追加し、javascriptにサムネイルの記述をどんどん増やしていかないと
いけないので長くなりそうです。

そこで、各施工事例写真をフォルダ分けして番号を連番で用意し、
javascriptでのclassも1つに統一して上記のjavascriptの記述だけでcase0~case3を
どの施工事例でも使うというやり方はないでしょうか?
要するにjavascript部分の<img src="../works/img/pho/detpho_b2_af01_thum.jpg" />
のimgタグのパスをプログラムで取得して...とかで何とかしたいのですが。。。

なにぶん初心者のため、専門用語が乏しく伝わりにくいかもしれませんが、
どなた様でも何卒何卒お力をお貸しいただければ幸いです。

閲覧数:
85
回答数:
2
お礼:
100枚

違反報告

ベストアンサーに選ばれた回答

プロフィール画像

カテゴリマスター

oishii_mahouさん

2018/1/2402:43:13

これから追加していく画像、サムネイル画像ファイルを、
どんなフォルダ構成で管理していくのか分からんけど、
とりあえず、
スライド画像のファイル名「~.jpg」に対して、
サムネイル画像のファイル名を「~_thumb.jpg」として、
スライド画像とサムネイル画像のペアは同じフォルダに置く、
という前提で回答する。

まず、
スライダーの各ブロックのクラス名は、
すべて同じクラス名(例 : class="bxslider")にしておく。

━━━━━━━━━━━━━━━━
<div class="bxslider">
<p><img src="~.jpg" alt="" /></p>
<p><img src="~.jpg" alt="" /></p>
<p><img src="~.jpg" alt="" /></p>
<p><img src="~.jpg" alt="" /></p>
</div>

<div class="bxslider">
<p><img src="~.jpg" alt="" /></p>
<p><img src="~.jpg" alt="" /></p>
<p><img src="~.jpg" alt="" /></p>
<p><img src="~.jpg" alt="" /></p>
</div>

<div class="bxslider">
<p><img src="~.jpg" alt="" /></p>
<p><img src="~.jpg" alt="" /></p>
<p><img src="~.jpg" alt="" /></p>
<p><img src="~.jpg" alt="" /></p>
</div>
━━━━━━━━━━━━━━━━

そして、
jQuery で動的に連番のクラス名 "slider_○" を追加する。

━━━━━━━━━━━━━━━━
$( document ).ready( function(){

// 連番のクラス名を追加
$( ".bxslider" ).each( function( groupIndex, elem ){
$( elem ).addClass( "slider_"+groupIndex );
} );

} );
━━━━━━━━━━━━━━━━

あとは、
各 class="slider_○" に対して bxSlider を実行するだけ。
サムネイルを生成する buildPager は、
return する文字列がそのまま、
sliderIndex に対応するサムネイルの HTML コードになるんで、
switch() 文でケース分けせずに、
return するコードに直接 slideIndex を使えばいい。
また、
slideIndex に対応するサムネイル画像のパスも、
対応するスライド画像のパスに _thumb を付ければいいだけなんで、
それをそのまま return のコードに使う。

━━━━━━━━━━━━━━━━
$( document ).ready( function(){

$( ".bxslider" ).each( function( groupIndex, elem ){

// 画像のリストを取得
var list = $( elem ).find( "img" );

// bxSlider 実行
$( '.slider_'+groupIndex ).bxSliderr( {
"controls": false,
"buildPager": function(sliderIndex){
// サムネイル画像のパス
var thumb = $( list ).eq( sliderIndex ).attr( "src" ).replace( ".jpg", "_thumb.jpg" );
// コードを出力
return ''
+ '<a data-slide-index="'+sliderIndex+'" href="">'
+ '<img src="'+thumb+'" />'
+ '</a>';
}
} );

} );

} );
━━━━━━━━━━━━━━━━


以上をまとめて全コード。

━━━━━━━━━━━━━━━━
【 HTML 】

<div class="bxslider">
<p><img src="~.jpg" alt="" /></p>
<p><img src="~.jpg" alt="" /></p>
<p><img src="~.jpg" alt="" /></p>
<p><img src="~.jpg" alt="" /></p>
</div>

<div class="bxslider">
<p><img src="~.jpg" alt="" /></p>
<p><img src="~.jpg" alt="" /></p>
<p><img src="~.jpg" alt="" /></p>
<p><img src="~.jpg" alt="" /></p>
</div>

<div class="bxslider">
<p><img src="~.jpg" alt="" /></p>
<p><img src="~.jpg" alt="" /></p>
<p><img src="~.jpg" alt="" /></p>
<p><img src="~.jpg" alt="" /></p>
</div>


【 JS 】

$( document ).ready( function(){

$( ".bxslider" ).each( function( groupIndex, elem ){

// 連番のクラス名を追加
$( elem ).addClass( "slider_"+groupIndex );

// 画像のリストを取得
var list = $( elem ).find( "img" );

// bxSlider 実行
$( '.slider_'+groupIndex ).bxSlider( {
"controls": false,
"buildPager": function(sliderIndex){
// サムネイル画像のパス
var thumb = $( list ).eq( sliderIndex ).attr( "src" ).replace( ".jpg", "_thumb.jpg" );
// コードを出力
return ''
+ '<a data-slide-index="'+sliderIndex+'" href="">'
+ '<img src="'+thumb+'" />'
+ '</a>';
}
} );

} );

} );
━━━━━━━━━━━━━━━━

  • 質問者

    hix********さん

    2018/1/2410:22:47

    お忙しい中回答ありがとうございます!
    おかげさまでまさに私がやりたかったことが実現できました!
    駄文にも関わらず汲み取ってくださり、詳しい回答をありがとうございました。本当に感謝しかありません。
    oishii_mahouさんをベストアンサーとさせていただきます。

返信を取り消しますが
よろしいですか?

  • 取り消す
  • キャンセル

質問した人からのコメント

2018/1/24 10:24:34

このたびは初心者の私にもわかりやすく丁寧に回答くださり
ありがとうございました!
感謝いたします!

ベストアンサー以外の回答

1〜1件/1件中

2018/1/2320:34:13

$('.bxslider_b1_af').bxSlider({
controls: false,
//サムネイルの設定
buildPager: function(slideIndex) {
return '<a data-slide-index="' + slideIndex + '" href=""><img src="' + $('.bxslider_b1_af p:not(.bx-clone) img').eq(slideIndex).attr('src').replace('.jpg', '_thum.jpg') + '" /></a>';
}
});


html内画像のsrcを元にサムネイル画像srcを生成
それをサムネイルに設定することでjavascriptを改変する手間を省きたいってことですよね。
これが動くかどうか、正しい記述かわかりませんがこんな感じになると思います。

元画像に_thumを付け足したものがサムネイル画像の名前であることが条件です。
original01.jpg
original01_thum.jpg

返信を取り消しますが
よろしいですか?

  • 取り消す
  • キャンセル

この質問につけられたタグ

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる