2

私は Lightbox 2 を使用しています。これは、ほぼすべての要件を満たし、最近更新された目立たない高品質の「Lightbox」jQuery プラグインのようです。私が抱えている唯一の問題は、2 つの画像 (クローズと読み込み) が .js ファイルにハードコードされており、スクリプトに引数を渡してこれをオーバーライドする例がないことです。ソースコードであるドキュメントを使用するには、JS が十分ではありません。

(function() {
  var $, Lightbox, LightboxOptions;
  $ = jQuery;
  LightboxOptions = (function() {
    function LightboxOptions() {
      this.fileLoadingImage = 'images/loading.gif';
      this.fileCloseImage = 'images/close.png';
      this.resizeDuration = 700;
      this.fadeDuration = 500;
      this.labelImage = "Image";
      this.labelOf = "of";
    }
    return LightboxOptions;
  })();

  Lightbox = (function() {
    function Lightbox(options) {
      this.options = options;
      this.album = [];
      this.currentImageIndex = void 0;
      this.init();
    }
    [...]
  })();

  $(function() {
    var lightbox, options;
    options = new LightboxOptions;
    return lightbox = new Lightbox(options);
  });
}).call(this);

十分なコードが含まれていない場合は、ファイル全体を GitHubで見ることができます。インクルードされたセクションでは、this.fileLoadingImageそれthis.fileCloseImageを実行する HTML ファイルへの相対パスが与えられます。たとえば、http://mywebsite.com/. ただし、CSS、JS、画像などはすべて から提供されhttp://static[number].mywebsitestatic.com/ます。利用可能な静的 URL の 1 つを .js ファイルにハードコーディングするのではなく、これをより再利用可能なソリューションにして、利用可能なサブドメインまたは親ドメインが変更された場合にこれを更新する必要がないようにしたいと考えています。ファイルも。

このサイトは Django アプリなので、テンプレート コードを使用{{ STATIC_URL }}して、特定のページの適切な静的ファイル URL を書き出し、それを .js ファイルに渡すだけです。しかし、どのように？たとえば、次のことができるようにしたいと考えています (グローバル変数を避けながら):

<script>
    /* instantiate a new version of Lightbox */
    newLightbox.fileLoadingImage = "{{ STATIC_URL }}img/lightbox/loading.gif";
    newLightbox.fileCloseImage = "{{ STATIC_URL }}img/lightbox/close.gif";
</script>
4

3 に答える 3

7

ここでは、lightbox.js スクリプトがその URL を判別できるようにするための微調整を行います。次に、依存イメージの URL です。

オリジナルコード

this.fileLoadingImage = 'images/loading.gif';
this.fileCloseImage = 'images/close.png';

改訂されたコード

this.fileLoadingImage = $('script[src$="/lightbox.js"]')
    .attr('src')
    .replace(/\/lightbox\.js$/, '/../images/loading.gif');
this.fileCloseImage = $('script[src$="/lightbox.js"]')
    .attr('src')
    .replace(/\/lightbox\.js$/, '/../images/close.png');

スクリプトは、属性が で終わるすべての<script>タグをチェックすることによって機能します (そのようなスクリプト タグが 1 つだけであることを願っています)。この時点から、画像のパスを計算するのは簡単です。デモはこちら. デモでは、jsFiddle で動作するためにいくつかのトリックを使用していることに注意してください。src/lightbox.js

于 2012-04-24T06:27:25.063 に答える
1

グローバルjs変数を使用できます。

<script>
    var imagePath = '{{ STATIC_URL }}img/';
</script>
<script src="js/lightbox.js"></script>

次に、lightbox.jsを変更します。

this.fileLoadingImage = imagePath + 'images/loading.gif';
this.fileCloseImage = imagePath + 'images/close.png';
于 2012-04-24T06:21:47.027 に答える
0

そのため、私はjQuery lightBoxプラグインを選択しました。これは、必要に応じて初期化できます。例：

$("a[rel|=lightbox]").lightBox
  imageLoading: '/assets/lightbox-ico-loading.gif'
  imageBtnPrev: '/assets/lightbox-btn-prev.gif'
  imageBtnNext: '/assets/lightbox-btn-next.gif'
  imageBtnClose: '/assets/lightbox-btn-close.gif'
  imageBlank: '/assets/lightbox-blank.gif'

（私はCoffeescriptを使用しています）。

于 2012-07-02T16:27:48.420 に答える