DedeCMS がライトボックス効果を実装する方法

DedeCMS はどのようにしてライトボックス効果を実現しますか?

Webサイト上で画像を表示するには様々な方法がありますが、一般的にはブラウザ上で画像リンク用の別ウィンドウやタブを開き、URLにアクセスするように表示させます。やり方が悪いです。結局のところ、訪問者が画像を表示するたびに、その画像を表示するために別のウィンドウがポップアップする必要があり、リソースを占有するだけでなく、画像とコンテンツ間の相関性が低下し、ユーザーの操作数が増加し、ユーザーの操作の手間が軽減されます。ある程度の疲労感を感じます。

推奨事項: "dedecms 使用チュートリアル"

ライトボックスの紹介

ライトボックス画像表示効果の出現により、画像を閲覧する従来の方法が変わりました。 Dadi はユーザー エクスペリエンスを大幅に向上させます。 LightBox の原理は非常に単純です。jQuery を使用して現在のページの上にレイヤーをポップアップし、ポップアップ レイヤー以外の部分をブロック (輝度を下げる) して、ポップアップ レイヤーに画像を表示します。この方法の利点は、画像を表示するときにページが更新されず、別のウィンドウやタブにジャンプしないことです。また、ポップアップ以外のレイヤーをクリックすると、スクリプトが LightBox のポップアップレイヤーを閉じます。

LightBox にはエフェクトを表示するための機能も豊富にあります。例えば、単に画像を拡大するだけのもの、ズーム機能を提供するもの、前後の画像を表示する機能を提供するもの…などですが、基本的な実装方法は似ています。

次に、いくつかの簡単な手順に従って、DreamWeaver CMS ページ上の画像に LightBox 表示効果を追加します。

ファイルをアップロードしてコードを追加する

まず、LightBox プラグインのソース コードをダウンロードします。ソース コードには、index.htm サンプル ページと関連する JS ファイルと CSS ファイルが含まれています。 Index.htm ファイルを除くライトボックス ディレクトリ全体を DedeCMS のデフォルト テンプレート (Default) ディレクトリにアップロードし、次に示すコードをデフォルト テンプレート (Default) ディレクトリのarticle_image.htm ファイルにコピーし、:

##コードの上記の部分は、LightBox ソース コードの Index.htm ファイルの一部であり、作成時に DedeCMS にコピーされるだけですテンプレート ファイルを作成する場合は、JS ファイルの呼び出しパスに注意してください。

これら 2 つの手順を完了すると、DedeCMS の画像表示モジュールに LightBox 効果を実装できます。DreamWeaver コンテンツ管理システムの記事モジュールまたはソフトウェア ダウンロード モジュールにも LightBox 効果を実装する場合は、上記のコードを head.htm ファイルに追加して、head.htm を呼び出すすべてのファイルで LightBox 効果を確実に実現できるようにすることをお勧めします。

以上がDedeCMS がライトボックス効果を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。