質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.46%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1304閲覧

featherlightで「前へ」ボタンを特定のときに非表示にする方法

meli

総合スコア312

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/09/14 09:16

お世話になります。
現在実装中のサイトでlightboxを作るにあたり、featherlightというjQueryを導入しています。
https://github.com/noelboss/featherlight/
画像を表示させることはできたのですが、任意の画像のみ「前へ」「次へ」を出さないようにしたいです。
特定の動作をしたときのみaddclassでdisplay:noneにしたいと思っているのですが、jsでの動きが良く分からず難航しています。

jQueryの中のおそらくここのあたりでprev,nextボタンの表示・非表示をしているとは思うのですがそれもあいまいです。

js

1 var index = this.currentNavigation(); 2 var len = this.slides().length; 3 this.$instance 4 .toggleClass(this.namespace+'-first-slide', index === 0) 5 .toggleClass(this.namespace+'-last-slide', index === len - 1); 6 return _super(event); 7 }, 8 onKeyUp: function(_super, event){ 9 var dir = { 10 37: 'previous', /* Left arrow */ 11 39: 'next' /* Rigth arrow */ 12 }[event.keyCode]; 13 if(dir) { 14 this.$instance.trigger(dir); 15 return false; 16 } else { 17 return _super(event); 18 } 19 } 20 }; 21 22 function FeatherlightGallery($source, config) { 23 if(this instanceof FeatherlightGallery) { /* called with new */ 24 $.featherlight.apply(this, arguments); 25 this.chainCallbacks(callbackChain); 26 } else { 27 var flg = new FeatherlightGallery($.extend({$source: $source, $currentTarget: $source.first()}, config)); 28 flg.open(); 29 return flg; 30 } 31 }

css

1.featherlight-last-slide .featherlight-next, 2.featherlight-first-slide .featherlight-previous { 3 display: none; 4}

html

1 <ul class="list"> 2 <li class="newsflex" data-category="aaa"><img src="../img/top/aaa.png"><a class="gallery" href="#aaa01">aaa01</a></li> 3~~~ 4 <div class="aaa_gallary" id="aaa01"> 5 <p>aaa</p> 6 </div> 7

どうやってaddclassを行うか、またはjQuery中に書きこむかご教示いただければ幸いです。
不足等あればご質問いただければと存じます。
よろしくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

galleryを二つ用意し、display:noneで切り替えを行うことにしました。

投稿2020/09/14 12:50

meli

総合スコア312

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問