【重要】サービス終了のお知らせ

Fork
0
Fav
1
View
4605
  • Play

Fullscreen

Smart Phone

  • Readme
  • JavaScript 11 lines
  • HTML 180 lines
  • CSS 9 lines

Lightbox風画面ポップアップ・スライドショー Colorboxのご紹介です。

今回は、イメージギャラリーなどで、スライドショーなどを簡単に実装できるプラグインを紹介します。

Javascriptでは、かなり前からLightboxという有名なプラグインがありましたが、jQueryのプラグインでも Lightbox風なプラグインが多く開発されています。

今回は、Colorboxというプラグインを紹介します。 スタイルが複数用意されており、Bootstrapでも利用しやすいスタイルも提供されています。 私が選択しているのは、「example4」のスタイルです。

白で、シャドーがついていますが、Bootstrapのテンプレートと相性が良いと思います。

images/配下に外枠やローディングのイメージが入っているのですが、jsdoitにどうあげるのか分からなかったため、 colorbox.cssの内容を変更しています。 通常利用する際は、images/もサーバにアップロードすれば問題ありません。 Bootstrapで利用する際は、assets/に入れるのが良いかと思います。 その際も、colorbox.cssの内容を変更して下さい。

BLOGの本体は以下です。

Bootstrap jQeuryプラグインサンプル [Colorbox] Lightbox風画面ポップアップ・スライドショー

  • Lightbox風画面ポップアップ・スライドショーを簡単に実装出来るプラグイン Colorbox
  • Lightbox風画面ポップアップ・スライドショーを簡単に実装出来るプラグイン Colorbox

play

Complete!

Description What kind of game?

Control Device

jsdo.it websocket controller

Mouse

keyboard

smartphone

Fullscreen

Shigeru.Ono

Author

ITスクール システムアーキテクチュアナレッジにてjavaの講師をしています。 フロントの技術が好きでjQueryをいじりながら遊んでいます。 たまには開発などして、気ままに過ごしています。

Default Panel

Size

  • Width: px
  • Height: px

code

QR Code

Discussion

Questions on this code?

Tags

Favorite by