Great Compassion Bodhi Prajna Temple Great Compassion Bodhi Prajna Temple
  • 大悲菩提寺
    • 公告: 更新社群帳號
    • 願心
    • 寺院簡介
    • 北美噶舉比丘尼學會
      • 2018國際比丘尼論壇網站
      • 2018國際比丘尼論壇影片
  • 活動通啟
  • 活動報導
  • 成人禪修
  • 青少年禪修
    • 後疫情時代青少年禪修專案
    • 青少年品德教育宗旨
    • 青少年周末禪修班
    • 青少年暑期禪修營
      • 2022年 大悲菩提寺 第九屆 暑期青少年 卓越禪修營 報名簡章
    • 青少年冬令營
    • 歷屆青少年活動報導
  • 法音宣流
    • 雲端法音宣流系列
    • 佛陀的故事
    • 觀音的故事
    • 菩薩因地故事
    • 佛教教義
    • 佛教咒語
    • 佛教禪修
  • 線上教學共修
    • 2021-2022 大寶法王全球網路授課 菩提道燈論
    • 2020 大寶法王全球網路共修
    • 大悲菩提寺線上教學共修
      • 成人共修- 大悲懺法
  • 護持捐款
    • 大悲菩提寺敬邀大眾供養鎏金莊嚴舍利塔
    • 一燈能除千年闇,積聚福德無量無窮盡,歡迎大眾發心供佛前燈
    • 五方佛塔啟完成、大悲菩提寺禪淨、佛法園區的起點
    • 莊嚴大願琉璃地藏王,虔敬安奉圓滿眾生善願成
  • 聯絡我們
Great Compassion Bodhi Prajna Temple Great Compassion Bodhi Prajna Temple
  • 大悲菩提寺
    • 公告: 更新社群帳號
    • 願心
    • 寺院簡介
    • 北美噶舉比丘尼學會
      • 2018國際比丘尼論壇網站
      • 2018國際比丘尼論壇影片
  • 活動通啟
  • 活動報導
  • 成人禪修
  • 青少年禪修
    • 後疫情時代青少年禪修專案
    • 青少年品德教育宗旨
    • 青少年周末禪修班
    • 青少年暑期禪修營
      • 2022年 大悲菩提寺 第九屆 暑期青少年 卓越禪修營 報名簡章
    • 青少年冬令營
    • 歷屆青少年活動報導
  • 法音宣流
    • 雲端法音宣流系列
    • 佛陀的故事
    • 觀音的故事
    • 菩薩因地故事
    • 佛教教義
    • 佛教咒語
    • 佛教禪修
  • 線上教學共修
    • 2021-2022 大寶法王全球網路授課 菩提道燈論
    • 2020 大寶法王全球網路共修
    • 大悲菩提寺線上教學共修
      • 成人共修- 大悲懺法
  • 護持捐款
    • 大悲菩提寺敬邀大眾供養鎏金莊嚴舍利塔
    • 一燈能除千年闇,積聚福德無量無窮盡,歡迎大眾發心供佛前燈
    • 五方佛塔啟完成、大悲菩提寺禪淨、佛法園區的起點
    • 莊嚴大願琉璃地藏王,虔敬安奉圓滿眾生善願成
  • 聯絡我們
Blog
Great Compassion Bodhi Prajna Temple / 無分類 / Spotlight
6 月 08
Lightbox Image

Spotlight

  • 8 6 月, 2011
  • webmaster
  • 無分類

The Widgetkit Spotlight allows you to add an overlay to your images which fades or moves in on mouse hover. The overlay can be an image or HTML content. The default magnifier spotlight is a perfect match to be used with a lightbox.

Features

  • Create nicely animated image overlays
  • Supports custom image or HTML content overlays
  • 5 different animation modes
  • Responsive design to fit all device resolutions
  • Built with the latest jQuery version
  • Works with Joomla and WordPress

Examples

If no custom overlay is set the default spotlight fades in an overlay with an magnifier image. If you define a custom overlay you can choose between different animations – fade, bottom, top, right and left.

Spotlight Image Spotlight Image

Custom Overlay (Bottom)

Spotlight Image

Custom Overlay (Right)

Spotlight Image

Spotlight Image

Spotlight Image

Custom Overlay (Top)

Spotlight Image

Custom Overlay (Left)

How To Use

Use the HTML5 custom data attribute data-spotlight to activate the spotlight.

<a data-spotlight="on" href="/mypage.html"> 	<img src="/image.jpg" width="180" height="120" alt="" /> </a>

To create a custom overlay use a div element with the CSS class overlay. You can set the effect parameter to the data attribute. For example:

<a data-spotlight="effect:bottom;" href="/mypage.html"> 	<img src="/image.jpg" width="180" height="120" alt="" /> 	<div class="overlay">Custom Overlay</div> </a>

You can set the effect parameter to fade, bottom, top, right and left.

  • Facebook
  • Twitter
  • Reddit
  • Pinterest
  • Google+
  • LinkedIn
  • E-Mail

About The Author

Comments are closed.

搜尋

近期文章

  • 2022 春季 第七屆青少年全學年禪修班
  • 更新社群帳號
  • 2022年 大悲菩提寺 第九屆 暑期青少年 卓越禪修營 報名簡章
  • 2022年 大悲菩提寺 第九屆暑期青少年卓越禪修營
  • 大悲菩提寺敬邀大眾供養鎏金莊嚴舍利塔
© Copyright 2022 Great Compassion Bodhi Prajna Temple    All Rights Reserved.