CSSBox -一个纯CSS Lightbox代替_html/css_WEB-ITnose

CSSBox

CSSBox -一个纯CSS Lightbox代替。An example page is available in the gh-pages branch, or online on GitHub Pages.

Why CSSBox?

• Actually lightweight (903b including comments, 607b excluding comments, unminified!)
• Centers the image
• Adds a nice, realistic shadow to the image
• Dims the background
• Completely responsive, works on any screen size
• Has a pretty fade in animation
• Absolutely no JavaScript

Usage

Upload cssbox.css to your server and add a stylesheet link to it in your CSS.

Add your images like this:

<img  class="cssbox_thumb lazy"  src="/static/imghwm/default1.png"  data-src="image_thumbnail.png"  tabindex=1 / alt="CSSBox -一个纯CSS Lightbox代替_html/css_WEB-ITnose" ><span class="cssbox_full"><img  src="/static/imghwm/default1.png"  data-src="image_full.png"  class="lazy" / alt="CSSBox -一个纯CSS Lightbox代替_html/css_WEB-ITnose" ></span>

When a visitor clicks the tumbnail, the fullsize preview will appear in the center of the screen.

License

Creative Commons Zero 1.0

项目地址： https://github.com/TheLastProject/CSSBox