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.

  3. Call the QuickSlide() function, either in your existing code, or in a <script> tag after one above.

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.

As an AMD module

QuickSlide is AMD-compatible, so you can use it with loaders like RequireJS:

// some_module.js
define(["quickslide"], function (QS) {
  QS();
});

Configuration

There are a few options you can specify to control the behaviour of the popups. They are set by passing an object as the parameter to the QuickSlide function:

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

<script>
QuickSlide({
    max_width: 800,
    max_height: 600,
    use_dimmer: true,
    absolute_position: true,
    show_caption: true,
    navigation: true,
    auto_fit: false,
    auto_detect: true,
    no_wait: true
});
</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@andyf.me · site: andyf.me