PhotoSwipe

3ステップで試す

1. 1

   PhotoSwipe 5.4.4を導入する

   確認対象のv5安定版を固定して導入します。

   npm install --save-exact photoswipe@5.4.4コピー
2. 2

   画像寸法を持つgallery markupを用意する

   各linkへ大きな画像のURLとdata-pswp-width・data-pswp-heightを設定します。

   <div id="my-gallery"><a href="large.jpg" data-pswp-width="1600" data-pswp-height="1200"><img src="thumb.jpg" alt=""></a></div>コピー
3. 3

   Lightboxを初期化する

   Lightboxから必要な時だけCoreを読み込み、galleryのlinkを拡大表示できるようにします。

   import PhotoSwipeLightbox from 'photoswipe/lightbox'; import 'photoswipe/style.css'; const lightbox = new PhotoSwipeLightbox({ gallery: '#my-gallery', children: 'a', pswpModule: () => import('photoswipe') }); lightbox.init();コピー

Built with

• JavaScript

カテゴリとタグ

GitHubデータ

このOSSの使い方や活用事例をMarkdownで投稿できます。管理者が承認した後に公開されます。

あわせて探訪

• Bootstrap174,991 Stars

  共通タグ 4件

  responsive grid・utility・componentをCSS/Sassとnative JavaScriptから組み立てるfrontend framework

  MDX
• Storybook91,200 Stars

  共通タグ 4件

  UI状態をstoryとして保存し、Docs・interaction test・AI toolへ再利用するfrontend workshop

  TypeScript
• Expo52,566 Stars

  共通タグ 4件

  React NativeアプリをAndroid・iOS・Webへ一つのprojectから展開する

  TypeScript
• Alpine.js31,960 Stars

  共通タグ 4件

  HTML属性にstate・event・表示制御を記述し、小さなinteractive UIを構築する

  HTML
• Uppy31,010 Stars

  共通タグ 4件

  ファイル選択UIと再開可能なアップロードをプラグインで組み合わせ、ローカル・リモートの取得元から送信する

  TypeScript
• flatpickr16,464 Stars

  共通タグ 4件

  日付・時刻・期間・複数日を依存なしのpicker UIで入力し、無効日やlocaleも設定する

  TypeScript