私はテンプレートを作成しています。すべてのxhtml/css作業がjqueryイメージギャラリーで行われます。周りにjqueryギャラリーがたくさんあり、状況に応じてカスタマイズする方法がわかりませんカスタムjqueryギャラリー
これは3列のテンプレートです。最初の列にはナビゲーションがあります。 2番目の列は3番目の列のサムネイルから選択されたイメージを持ちます。サムネイルを回転させる3列目の上下ボタンもあります。 ONのサムネイル画像をクリックすると2列目の画像divに読み込まれます。
これ以上の情報は入力する必要がありますか？
あなたが実際に質問をしていないので、私はあなたが始めるためにどのように求めていると仮定するつもりです。あなたはまたあなたのHTML構造を与えていないので、私もそれを仮定しなければなりません。
HTML構造
<div id="gallery">
<img id="main_image" />
<div>
<img src="image1-thumbnail.jpg" />
<img src="image2-thumbnail.jpg" />
<img src="image3-thumbnail.jpg" />
<img src="image4-thumbnail.jpg" />
</div>
</div>
：
(function ($) {
$.fn.gallery = function() {
};
})(jQuery)
これはあなたのコードが完全に再利用されることを保証し、あなたがしたい場合は衝突を命名することはありません将来別のフレームワークで使用してください。次のあなたはそれがメイン画像のSRCを修正するために、各サムネイルにクリックイベントを追加したい：
(function ($) {
$.fn.gallery = function() {
this.find($(this).attr('id') + '>div>img').click(function() {
$(this).siblings('img').removeClass('selected');
$(this).addClass('selected');
var mainImageSrc = $(this).attr('src').replace('-thumbnail','');
$(this).parent().siblings('img').attr('src',mainImageSrc);
});
return this; // jQuery plugins should (nearly) always return this to make them chainable
};
})(jQuery);
最後に、あなたの関数を呼び出す：
jQuery(function ($) {
$('#gallery').gallery();
});
このコードは、基本的な機能を提供する必要があります。私はサムネイルをスクロール可能にする作業に取り掛かり、実際にそれを感じるならば、イメージ間のフェードを作成します（ヒント：2つのimgタグが必要です。CSSを使用して重ねて配置します）。.animate()それらの間で退色する不透明度）。うまくいけば、これはあなたに行くだろう。
詳細な回答ありがとうございますが、私の質問は '垂直jqueryギャラリーはありませんか？それはテンプレートと統合できますか？ ' – mysterious
jqueryギャラリーで多くの時間を無駄にし、最終的に私は自分のコードを書くべきであることを認識しました。上のコードは非常に役に立ちました。私が終わった後、ここで分かち合います。ありがとう – mysterious
私はすべてホイールの再発明を避けていますが、時にはカスタムソリューションが必要なものを正確に得るための唯一の方法です。嬉しいことに、これはあなたが始めるのを助けました。ギャラリーに固有のことをするのに問題がある場合は、別の質問をしてください。あなたが良い答えを得られるようにするには、関連するすべてのコードを含めて、質問が具体的であることを確認してください。 –
あなたの質問がありますか？あなたはどこにいるのですか？ –
Wht jquery galleryプラグインでこれを行うことができますか？私はいくつかのプラグインを試しましたが、望みの結果を得ることができませんでした。 – mysterious