5

PhotoSwipe3.0.4とjQueryMobile1.1-rc1を使用しています。

PhotoSwipeがツールバーを非表示にしないようにしようとしています。

captionAndToolbarAutoHideDelayパラメーターを0に設定してみましたが、これによりツールバーが非表示になるのを防ぐことができますが、これにより、ツールバーが自動的に非表示になるのを防ぐことができます。

また、captionAndToolbarHideをfalseに設定しました。これにより、非表示が防止されることを期待していますが、これは役に立ちませんでした。

一部の携帯電話ではツールバーを再び表示するのが少し難しいため、ユーザーが画像をタップしてスワイプしたときにツールバーが非表示にならないようにしたいと思います。

誰かがこれで運が良かったですか？

4

6 に答える 6

8

ここでソースコードを閲覧すると、いくつかの可能なオプションがあるようです。

  1. 設定した設定に基づいてツールバーがフェードアウトしないように、toolbar.class.jsのOnFadeoutまたはfadeout関数をオーバーライドします。具体的には、次の行の前後にifステートメントに基づく設定を追加します。

  2. OnBeforeJideイベントまたはOnHideイベントをオーバーライドまたは追加して、ツールバーの非表示を再表示または停止します。

    カスタムイベントリストナーの例については、ここを参照する か、PhotoSwipedisposeメソッドの外部でを呼び出してOnHideイベントを完全に削除してくださいUtil.Events.remove(this.toolbar,Toolbar.EventTypes.onHide, this.toolbarHideHandler);。

  3. カスタムイベントハンドラーをOnHideまたはOnBeforeHideイベントに追加します。これは、デフォルトのイベントから継承しますが、設定した設定に基づいてツールバーの非表示を停止します。

私が見ることができるものから

  • 変数はデフォルトでfalseであり、captionAndToolbarHidetrueに設定すると、CreateComponents関数でツールバーが作成されなくなります。
  • 変数はそれが言うことをしcaptionAndToolbarAutoHideDelayますが、それはキャプションとツールバーの自動非表示を防ぐだけで、OnHideへの他のイベント呼び出しを防ぎません。
  • このpreventHide変数は、ユーザーがphotoSwipeを閉じるのを防ぎますが、ツールバーが非表示にならないことを必ずしも保証するものではありません。

PhoneSwipeの詳細なドキュメントは、こちらから入手できます。

于 2012-03-31T11:23:22.207 に答える
6

PhotoSwipeが画像のキャプションを非表示にしないようにする必要がありましたが、それでも通常どおりページ下部のツールバーを非表示にしました。PhotoSwipeがこの要素を非表示にするために適用するインラインスタイルをオーバーライドするために、次のcssを追加しただけです。同様の方法を使用して、ツールバーが非表示にならないようにすることもできます。

.ps-caption{
opacity:0.8 !important;
display:block !important;
}
于 2012-04-30T13:09:40.923 に答える
3

cssには次の両方のタグが必要です。

.ps-caption{
opacity:0.8 !important;
}

.ps-toolbar {
opacity:0.8 !important;
}
于 2013-04-24T18:54:15.060 に答える
1

ツールバーを常に表示し、スクリプトの上にあるキャプションを最初に削除するには、次の手順に従います。

this.caption.fadeOut(); 
this.toolbar.fadeOut();

それから

this.captionAndToolbar.fadeOut()

注意してください、2つの試みがあり、もう1つはどちらかを知る必要があります。サイトへのリンクを変更してください。ほとんどの場合、分。

于 2014-02-01T20:19:49.890 に答える
0

スライドショーのみのモードでフォトスワイプを使用しています。写真はajax呼び出しで読み込まれます。スライドショーの下部にキャプションを永続的に貼り付けたいと思いました。これが私が思いついたものです。最後の2行に注意してください。

  instance.toolbar.showCaption();
  instance.toggleToolbar = function() {};

これにより、キャプションが強制的に表示され、トグル機能が何も上書きされません。このソリューションでエラーは発生していません。

loadSlideshow = function(items){


 var options = {
    captionAndToolbarOpacity: 0.9,
    captionAndToolbarFlipPosition: true,
    captionAndToolbarAutoHideDelay: 0,
    captionAndToolbarShowEmptyCaptions: true,
    preventHide: false,
    enableKeyboard: false,
    autoStartSlideshow: true,
    target: $('#PhotoSwipeTarget'),
    imageScaleMethod: 'fit',
    preventHide: true,
    margin: 0,
    allowUserZoom: false,
    backButtonHideEnabled: false,
    //captionAndToolbarHide: true,
    getImageSource: function(obj){
      return obj.url;
    },
    getImageCaption: function(obj){
      return obj.caption;
    }
  };

  instance = window.Code.PhotoSwipe.attach(
    items, options 
  );

  instance.show(0);
  instance.toolbar.showCaption();
  instance.toggleToolbar = function() {};                           
  return true;
}
于 2013-08-01T22:31:32.060 に答える
-1

次のコード行を追加して、ツールバーを永続的に表示します

.ps-toolbar{
    opacity:0.8 !important;
}
于 2013-01-11T05:06:58.307 に答える