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

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

新規登録して質問してみよう
ただいま回答率
85.49%
jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

Q&A

解決済

1回答

2749閲覧

lightboxの画像を切り替えたい

rider10

総合スコア11

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

0グッド

0クリップ

投稿2017/10/03 06:37

現在、テストアップで画像をクリックするとlightboxになるページを新規で作っているのですが、
一個の画像だけlightbox内でnextを押すと別の画像に切り替わるようにしたいです。

現在のテストアップ
リンク内容

右側にある画像をクリックするとlightboxが表示されます。
nextを1回押すと何故か同じ画像が表示され、2回目で次の画像になります。
error内容をみると関数を間違えて呼び出しているのかと思います。

行いたい実装はこのnext、prevの表示を無くす。
上から5枚目の省エネの画像のときだけlightbox内で画像を切り替えたいです。

unction

1var objImagePreloader=new Image();objImagePreloader.onload=function(){$('#lightbox-image').attr('src',settings.imageArray[settings.activeImage][0]);_resize_container_image_box(objImagePreloader.width,objImagePreloader.height);objImagePreloader.onload=function(){};};objImagePreloader.src=settings.imageArray[settings.activeImage][0];};function _resize_container_image_box(intImageWidth,intImageHeight){var intCurrentWidth=$('#lightbox-container-image-box').width();var intCurrentHeight=$('#lightbox-container-image-box').height();var intWidth=(intImageWidth+(settings.containerBorderSize*2));var intHeight=(intImageHeight+(settings.containerBorderSize*2));var intDiffW=intCurrentWidth-intWidth;var intDiffH=intCurrentHeight-intHeight;$('#lightbox-container-image-box').animate({width:intWidth,height:intHeight},settings.containerResizeSpeed,function(){_show_image();});if((intDiffW==0)&&(intDiffH==0)){if($.browser.msie){___pause(250);}else{___pause(100);}} 2コード

この辺りのどこかをいじればいいかは何となくわかるのですが、どういじればいいかが分かりません。
よろしくお願いいたします!

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

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

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

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

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

guest

回答1

0

ベストアンサー

###間違いがあったので訂正します。
すみません。間違えました。正しくは営利可の改変禁止でした。失礼しました。
そして、このプラグインの元になったプラグインを作っているLokesh Dhakarさんもライトボックスのプラグインをリリースしていますが、それはMITライセンスなので自由に使えます。

このプラグインならやりたいこともできそうな気がしますので一度見てみてください。
http://lokeshdhakar.com/projects/lightbox2/

HTML

1//data-lightbox=を指定することによって画像グループを指定できます。一枚ならナビゲーションは表示されません。 2<a href="images/image-1.jpg" data-lightbox="image-1">Image #1</a> 3 4//data-lightbox=を同じにするとナビゲーションが表示されるようです。 5<a href="images/image-2.jpg" data-lightbox="image-group">Image #2</a> 6<a href="images/image-3.jpg" data-lightbox="image-group">Image #3</a> 7<a href="images/image-4.jpg" data-lightbox="image-group">Image #4</a>

しっかり調べず回答してすみませんでした。

###以下、過去に回答した間違った回答です。

このプラグインのライセンスは非営利かつ要クレジットです。
お仕事で使うなら他のを探した方がいいですね。どんなプラグインもホームページやコード先頭にコピーライトとライセンスが記載されているので必ずチェックしましょう

Javascript

1/** 2 * jQuery lightBox plugin 3 * This jQuery plugin was inspired and based on Lightbox 2 by Lokesh Dhakar (http://www.huddletogether.com/projects/lightbox2/) 4 * and adapted to me for use like a plugin from jQuery. 5 * @name jquery-lightbox-0.5.js 6 * @author Leandro Vieira Pinho - http://leandrovieira.com 7 * @version 0.5 8 * @date April 11, 2008 9 * @category jQuery plugin 10 * @copyright (c) 2008 Leandro Vieira Pinho (leandrovieira.com) 11 * @license CC Attribution-No Derivative Works 2.5 Brazil - http://creativecommons.org/licenses/by-nd/2.5/br/deed.en_US 12 * @example Visit http://leandrovieira.com/projects/jquery/lightbox/ for more informations about this jQuery plugin 13 */

###Creative Commons Attribution-No Derivative Works 2.5 Brazil License

https://creativecommons.org/licenses/by-nc-nd/2.5/br/deed.ja

投稿2017/10/03 06:56

編集2017/10/03 08:58
IShix

総合スコア1724

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

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

Lhankor_Mhy

2017/10/03 07:52

コードのコメントに書かれているCCはBY-NDのようですが、お間違えではありませんか?
IShix

2017/10/03 08:59

ご指摘いただきありがとうございます。感謝です。
rider10

2017/10/05 06:29

再度ご回答していただきありがとうございます。 おかげさまで、対応できました!ありがとうございました!
IShix

2017/10/05 06:37

間違った情報を提供してしまいすみませんでした。 解決できてよかったです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.49%

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

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

質問する

関連した質問