GalleryViewのカスタマイズについて
jqueryのプラグイン、GalleryViewを使っています。
http://spaceforaname.com/galleryview
デモ
http://spaceforaname.com/gallery-light.html
現状はデモ通りに使用していますが、左端にクリックしたサムネイルがきたときだけ、そのimgにclassを
付加させたいと思っています。しかしうまくいかず困ってます。
最新版はver2のようですが、仕様が変わっており、また作者による解説もないためデモと同じver1.1使用しています。
ご教授ください。よろしくお願いします。
No.3ベストアンサー
- 回答日時:
まとめ
jquery.galleryview-1.1.js
-------------------------------------------------
// 90行目あたり
enableFrameClicking();
// imgが移動
var img = $(j_frames[iterator]).find('img');
img.attr('class', 'hoge');
// ----------
});
-------------------------------------------------
// 106行目あたり
enableFrameClicking();
// 枠の方が移動してくる(img少数)時
img = $(j_frames[iterator]).find('img');
img.attr('class', 'hoge');
// ----------
});
-------------------------------------------------
// 120行目あたり
function showNextItem() {
// class名があれば削除(対象全走査)
j_frames.each(function(i){
var img = $(j_frames[i]).find('img');
if (img.attr('class')) img.attr('class', '');
});
$(document).stopTime("transition");
-------------------------------------------------
// 130行目あたり
function showPrevItem() {
// class名があれば削除(対象全走査)
j_frames.each(function(i){
var img = $(j_frames[i]).find('img');
if (img.attr('class')) img.attr('class', '');
});
$(document).stopTime("transition");
-------------------------------------------------
// 160行目あたり
$(this).click(function() {
$(document).stopTime("transition");
// class名があれば削除(対象全走査)
j_frames.each(function(i){
var img = $(j_frames[i]).find('img');
if (img.attr('class')) img.attr('class', '');
});
showItem(i);
iterator = i;
-------------------------------------------------
// 403行目あたり
has_filmstrip = j_frames.length > 0;
// 始動時のimg
if (has_filmstrip) $(j_frames[0]).find('img').attr('class', 'hoge');
if(!has_panels) opts.panel_height = 0;
-------------------------------------------------
No.4
- 回答日時:
>>No.3まとめ
// 106行目あたり
enableFrameClicking();
// 枠の方が移動してくる(img少数)時
var img = $(j_frames[iterator]).find('img'); // var 追記
img.attr('class', 'hoge');
// ----------
});
ごめん「var」抜け。
こちらでも動作確認し全く問題ありませんでした。
やりたいことを全部実装してもらって大変助かりました。
本当にありがとうございました。
No.2
- 回答日時:
>>No.1補足
jquery.galleryview-1.1.js
-------------------------------------------------
// 40行目あたり
/************************************************/
/*Plugin Methods*/
/************************************************/
function showItem(i) { // フラグ仮引数削除
//Disable next/prev buttons until transition is complete
-------------------------------------------------
-------------------------------------------------
// 90行目あたり
enableFrameClicking();
// class名(hoge)設定
// j_frames[iterator]は親要素
var img = $(j_frames[iterator]).find('img');
img.attr('class', 'hoge');
// if文削除
});
-------------------------------------------------
-------------------------------------------------
// 160行目あたり
$(this).click(function() {
$(document).stopTime("transition");
// class名があれば削除
var img = $(j_frames[iterator]).find('img');
if (img.attr('class')) { img.attr('class', ''); }
showItem(i); // フラグ無しで呼出し
// ----------
iterator = i;
-------------------------------------------------
始動まではclass無しですけど、それぞれ変更してみて下さい。
No.1
- 回答日時:
以下に示す箇所にコード追加してみて下さい。
jquery.galleryview-1.1.js
-------------------------------------------------
// 40行目あたり
/************************************************/
/*Plugin Methods*/
/************************************************/
function showItem(i, flag /* click呼出しフラグ */) {
//Disable next/prev buttons until transition is complete
-------------------------------------------------
// 90行目あたり
enableFrameClicking();
// class名(hoge)設定
if (flag /* click呼出し */) {
// j_frames[iterator]は親要素
var img = $(j_frames[iterator]).find('img');
img.attr('class', 'hoge');
}
// ----------
});
-------------------------------------------------
// 120行目あたり
function showNextItem() {
// class名があれば削除
var img = $(j_frames[iterator]).find('img');
if (img.attr('class')) img.attr('class', '');
// ----------
$(document).stopTime("transition");
-------------------------------------------------
// 130行目あたり
function showPrevItem() {
// class名があれば削除
var img = $(j_frames[iterator]).find('img');
if (img.attr('class')) img.attr('class', '');
// ----------
$(document).stopTime("transition");
-------------------------------------------------
// 160行目あたり
$(this).click(function() {
$(document).stopTime("transition");
// class名があれば削除
var img = $(j_frames[iterator]).find('img');
if (img.attr('class')) { img.attr('class', ''); }
showItem(i, true); // フラグ付きで呼出し
// ----------
iterator = i;
-------------------------------------------------
左端に来たタイミング。抜けるタイミングで対象要素にアクセスできます。
あとは適当にどうぞ。
この回答への補足
回答ありがとうございます。
コードを追加したところ問題なく動きました。
追加で伺いたいのですが、左右の矢印を押したときや、サムネイルが自動でスクロールしているときにも、常に左端のimgにclassを持たすことは難しいでしょうか。
可能でしたらお願いします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- WordPress(ワードプレス) ワードプレスのバージョン 2 2022/06/12 09:32
- Android(アンドロイド) auのAndroid端末のSIMカードがロックされてしまいました。 6 2022/08/22 20:31
- JavaScript スマホ上で、左右スワイプで次のページに移動させたいです 2 2022/11/11 17:04
- WordPress(ワードプレス) Wordpress プラグイン Mail Form 7 のファイル添付の表示が切れてしまう 1 2022/03/24 09:05
- HTML・CSS FC2カートのテンプレートでの商品表示について 1 2023/03/02 18:05
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
- その他(Microsoft Office) Microsoft365 バージョンアップ時にカスタマイズしたメニューはどうなる 1 2022/12/15 10:01
- イヤホン・ヘッドホン・補聴器 70年代 4チャンネルヘッドホン プラグ2本 使い方 2 2023/02/04 07:48
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
【OpenCV】二値画像後、白の部...
-
OpenCV での画素値の比較について
-
imageクラスからiconクラスに変...
-
リンク先を動的に変更する
-
jQuery 複数のfind()
-
画像が表示でnull; this.src
-
複数画像のランダム複数表示(...
-
libjpegライブラリの使い方につ...
-
MAX関数を使ってからLEFT JOIN...
-
javascriptで毎月替わる画像
-
HTMLで条件分岐はできますか?
-
HTMLですCSSです 画像のように...
-
アップロードファイルの種類に...
-
Slick.jsのオプションrtlについて
-
スタイルシートで画面を上下に...
-
大分類・中分類・小分類
-
textareaに画像を表示したい
-
javascriptテキストBOX色を元に...
-
日替わりで画像を変更したい
-
CSS <div>の入れ子が反映さ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
JavaScriptで変更した属性の元...
-
MFCで画像を表示させているので...
-
画像が表示でnull; this.src
-
error LNK2019 未解決のシンボ...
-
(javascript)HTMLで指定した...
-
外部javascriptの重複を防ぐには
-
libjpegライブラリの使い方につ...
-
Vb.net2005での画像の合成方法
-
外部ファイルにしたら文字化け...
-
jQuery 複数のfind()
-
HTMLからimgのsrcのみを正規表...
-
html内にスライドショーを複数設置
-
条件分岐でキーが入力されてい...
-
複数画像のランダム複数表示(...
-
ダイアログから画像ファイルは...
-
【OpenCV】二値画像後、白の部...
-
"lightbox"の"CLOSE"ボタンクリ...
-
onclickで画面が固まる・・・ら...
-
pythonで、tkinterとpillowの組...
-
imgボタンにfocusの当て方
おすすめ情報