今、Flexsliderを使ったスライダーを作っています。ただスライダーとして使うだけなら全く問題ないのですが、画像のtitleに当てているテキストを少し離れた箇所に表示したいのですが、現在表示されている画像に.flex-active-slideというクラスが付いているのですが、そのタイトルの取得〜反映が出来ません。。。
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
< div class="day_title">< p>ここに画像のタイトルを切り替えながら出したい</p></div>
< div class="flexslider">
< ul class="slides">
< li>< img src="123.jpg" title="test01"></li>
< li>< img src="123.jpg" title="test02"></li>
< /ul>
< /div>
これで、1枚目の画像が出てる時にはtest01を2枚目の時はtest02を出すようにしたいのです。
var imgTitle = $(".slides li.flex-active-slide img").attr("title");
$(".day_style").prepend("<p>"+imgTitle+"</p>");
動くものを入れ替えしていくためには、なんか足りないのは想像できるのですが何が足りないのかよくわかりません。
初歩的な質問なのかもしれませんが、具体的なコードを教えていただきたいです。
宜しくお願いします。
No.1
オプションのafterにコールバック関数設定できるらしいです。
ここでやれば良いんじゃないでしょうか。
http://sho-tem.com/archives/354/2
after:function(){$('.flex-active-slide a').fadeTo(800,1);}
ってかんじで
after:function(){
var imgTitle = $(".slides li.flex-active-slide img").attr("title");
$(".day_style").prepend("<p>"+imgTitle+"</p>");
}
ってかんじで
1
1
1
1
あ、prependだと挿入しちゃうからtextで上書きですね。
2015/02/27 13:10:51ありがとうございます。
2015/02/27 13:56:59無事に解決しました。after知りませんでした・・・。よく調べないとダメですね。
とても参考になりました。
どうもありがとうございます。ベストアンサーにさせて頂き終了させていただきます。