QuickSlide

QuickSlide is a basic popup image viewer. Adding it to a page is easy:

  1. Include the quickslide.js file at the bottom of your page:

    <script src="quickslide.js"></script>
  2. Add rel="quickslide" to any links you want converted to popups:

    <a href="images/buslane_b.jpg" rel="quickslide">
      <img src="images/buslane_t.jpg">Bus Lane
    </a>
    

    Make sure these links point to images, otherwise QuickSlide will get confused.

That’s it! QuickSlide is designed to be an unobtrusive, progressive enhancement to existing pages: it won’t interfere with other JavaScript widgets or libraries, and your page won’t break if for some reaon the code fails to load. It will also work on any links added to a page dynamically via JavaScript.

Configuration

There are a few options you can specify to control the behaviour of the popups. They are set using a <script> tag anywhere before the inclusion of the main quickslide.js file, like so:

<script>
QuickSlideConfig = {
  max_width: 800,
  max_height: 600,
  use_dimmer: true,
  absolute_position: true,
  show_caption: true,
  auto_fit: false,
  auto_detect: true,
  no_wait: true };
</script>

<script src="quickslide.js"></script>

An explanation of the options:

You can (and should) use CSS to customise the appearance of the popup and associated elements – see the demo CSS file for more examples.

Download

QuickSlide is also on GitHub; the repo contains some additional files that let QuickSlide work as a Chrome extension, although this is only experimental at present.

Example

Click thumbnails to show larger image; click large image or press Esc to hide it again.

contact: quickslide@caerphoto.com · site: caerphoto.com