![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
![](http://oshiete.xgoo.jp/images/v2/common/profile/M/noimageicon_setting_13.png?e8efa67)
http://sorgalla.com/jcarousel/の下から2番目のjCarousel and Thickbox 3についてです。
試行錯誤して何とか1つはHTMLに表示できました。
が、しかし、商品のシリーズごとに同一のHTMLに複数表示させたいのですが
やり方がわかりません。
・Aシリーズ
・Bシリーズ
・Cシリーズ
みたいな感じです。
よろしくお願いします。
以下、ソースです。
// Set thickbox loading image
tb_pathToImage = "images/loading-thickbox.gif";
var mycarousel_itemList = [
{url: "http://static.flickr.com/66/199481236_dc98b5abb3 … title: "Flower1"},
{url: "http://static.flickr.com/75/199481072_b4a0d09597 … title: "Flower2"},
{url: "http://static.flickr.com/57/199481087_33ae73a8de … title: "Flower3"},
{url: "http://static.flickr.com/77/199481108_4359e6b971 … title: "Flower4"},
{url: "http://static.flickr.com/58/199481143_3c148d9dd3 … title: "Flower5"},
{url: "http://static.flickr.com/72/199481203_ad4cdcf109 … title: "Flower6"},
{url: "http://static.flickr.com/58/199481218_264ce20da0 … title: "Flower7"},
{url: "http://static.flickr.com/69/199481255_fdfe885f87 … title: "Flower8"},
{url: "http://static.flickr.com/60/199480111_87d4cb3e38 … title: "Flower9"},
{url: "http://static.flickr.com/70/229228324_08223b70fa … title: "Flower10"}
];
function mycarousel_itemLoadCallback(carousel, state)
{
for (var i = carousel.first; i <= carousel.last; i++) {
if (carousel.has(i)) {
continue;
}
if (i > mycarousel_itemList.length) {
break;
}
// Create an object from HTML
var item = jQuery(mycarousel_getItemHTML(mycarousel_itemList[i-1])).get(0);
// Apply thickbox
tb_init(item);
carousel.add(i, item);
}
};
/**
* Item html creation helper.
*/
function mycarousel_getItemHTML(item)
{
var url_m = item.url.replace(/_s.jpg/g, '_m.jpg');
return '<a href="' + url_m + '" title="' + item.title + '"><img src="' + item.url + '" width="75" height="75" border="0" alt="' + item.title + '" /></a>';
};
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
size: mycarousel_itemList.length,
itemLoadCallback: {onBeforeAnimation: mycarousel_itemLoadCallback}
});
});
</script>
</head>
<body>
<div id="wrap">
<h1>jCarousel</h1>
<h2>Riding carousels with jQuery</h2>
<h3>jCarousel and Thickbox 3</h3>
<p>
Example of jCarousel working together with <a href="http://jquery.com/demo/thickbox/">Thickbox 3</a>.
</p>
<ul id="mycarousel" class="jcarousel-skin-ie7">
<!-- The content will be dynamically loaded in here -->
</ul>
</div>
No.1ベストアンサー
- 回答日時:
ライブラリについては知りませんが、回答がないみたいなので…
サムネイルと拡大画像の名前などに規則性があるのかないのか、キャプション表示があるのかないのかやthickboxでグルーピングをするのかなどによって方法が変わってくるとは思いますが…
thickboxは基本的にリンク要素のhrefに拡大画像のアドレスを指定して、class="thickbox"を設定しておけば処理してくれるみたいです。
(グループ表示するのだと、rel属性の設定を使い分けるとかが必要)
http://jquery.com/demo/thickbox/
なので、簡単なのはjCarouselだけのときのHTMLソースが
◆(1)
<ul class="carousel">
<li><img alt="" src="A_s.jpg"></li>
<li><img alt="" src="B_s.jpg"></li>
<li><img alt="" src="C_s.jpg"></li>
・・・・・・・・・
</ul>
だとすれば、
◆(2)
<ul class="carousel">
<li><a href="A_m.jpg" class="thickbox"><img alt="" src="A_s.jpg"></a></li>
<li><a href="B_m.jpg" class="thickbox"><img alt="" src="B_s.jpg"></a></li>
<li><a href="C_m.jpg" class="thickbox"><img alt="" src="C_s.jpg"></a></li>
・・・・・・・・・
</ul>
のようにしておくだけで、個別に(拡大表示だけの)thickboxが適用可能となるようです。
このようなソースでも、jCarouselはそのまま処理してくれるので一番簡単かも。
>商品のシリーズごとに同一のHTMLに複数表示させたいのですが
>やり方がわかりません。
jCarouselを複数設定するのはセレクタで複数の要素をセットするか、あるいは、オプションなどが異なる場合は分けてそれぞれ設定すれば良いだけのようです。
ご提示のサイトの「Static Examples」の一番下に、複数設置の例がでています。
http://sorgalla.com/projects/jcarousel/
サムネイルと拡大画像に規則性があるような場合(上例のような場合)は、スクリプトで◆(1)のソースHTMLから◆(2)のソースに自動変換することができるでしょう。
上の例で言えば
$(".carousel li img").each(function(){
var src = this.src.replace(/_s.jpg$/,"_m.jpg");
$(this).wrap('<a href="' + src + '" class="thickbox"></a>');
});
のような方法で可能です。
jCarouselの設定の後でも大丈夫とは思いますが、jCarouselはいろいろHTMLの構造をいじっているみたいなので、先に変換しておいたほうが無難かも。
サムネイルと拡大画像に関連性がないものをスクリプトで設定したいのであれば、ご提示のスクリプトのように配列でデータを用意しておいて、同じように設定してゆくことになるかと思いますが、メンテナンスを考えると、変更があるたびにHTMLとスクリプトの両方を変更しなればならないので面倒ですね。
また、別々に設定されているので、要素の数が合わないときを考慮した処理なども作成しておく必要がありますので、あまりお勧めとは思えません。
(自由度は一番高いかも知れませんが…)
回答ありがとうございます。
<li><img alt="" src="A_s.jpg"></li>
<li><img alt="" src="B_s.jpg"></li>
<li><img alt="" src="C_s.jpg"></li>
上記ような記述だと何とか分かるのですが
私が試したサンプルは動的に読み込む形だったようなので
困ってました。
複数設置のサンプルは
<li><img alt="" src="A_s.jpg"></li>
<li><img alt="" src="B_s.jpg"></li>
<li><img alt="" src="C_s.jpg"></li>
の記述形式だったのでこちらにして形になりました。
(確かにメンテナンスを考えると手間ですが頻繁にある訳ではないので)
詳しいご説明、ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- PHP アコーディオンPHPが上手くいかない 3 2022/07/15 16:29
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- HTML・CSS cssが効かなくて困ってます 1 2023/01/01 23:57
- Perl RSSにdiv,ul classを付けたいのですがどのようにつけるのかわからないです 2 2022/03/28 01:53
- PHP PHP MySql 画像を取得 1 2022/06/04 14:05
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
PDFを(htmlのように)無限に縦...
-
VBA ディレクトリ名をワイルド...
-
要素内を常に一番下を表示させたい
-
C言語のflagの使い方が分かりま...
-
ワードでA3横の画面にして、文...
-
バッチファイル 特定ウインドウ...
-
VBA
-
時間表示で0:48:17と入力すると...
-
MMS機能とは
-
VBA コンボボックスの値をスピ...
-
VBAユーザーフォーム内に別のシ...
-
以下のURL入れますか?皆さんは↓
-
画像のドットの部分が抜けてい...
-
Chinapost こよパズルどう動か...
-
非同期通信で掲示板を作る際の...
-
非同期通信を使うタイミングが...
-
PYTHONのtkinterについて
-
Pythonのtkinterについて
-
Pythonを勉強する道のり
-
Pythonを無料(安価)で学ぶ方...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
CSSプルダウンメニューとjQuery...
-
jQueryでスライドショー作成(無...
-
jQueryのアコーディオンメニュ...
-
jqueryのslideUpについて質問で...
-
アコーディオンで多階層のメニ...
-
jqueryで開閉メニューの状態をc...
-
jqueryで作ったアコーディオン...
-
同一ページ移動時ハンバーガー...
-
jQueryで複数あるUL要素の最後...
-
matlabの要素の検索
-
jQueryプラグインが動かない
-
Jcarousel 複数設置
-
jQuery 隣接セレクタ
-
アナログ時計の画像の回転
-
双方向リストについて
-
フォーム2を出して フォーム...
-
ドラッグ & ドロップでのド...
-
JavascriptからPHPへのAjax通信...
-
階層別の組織図の自動作成について
-
Javascriptを使ってQRコード読...
おすすめ情報