jQuery Plugin For Fullscreen Image Preview - Swoon

Swoon is a funny jQuery plugin that displays a fullscreen image for links that would display when you hover over the link.

How to use it:

1. Link to the jQuery library and the jQuery Swoon plugin.

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="swoon.js"></script>

2. Add an image to the webpage you want to preview in fullscreen mode.

<div class="hidden swoon-image" rel="demo">
  <img src="1.jpg" alt="Demo">
</div>

3. Create a link that will display the image on hover.

<p>
  <a href="#" class="swoon-link" data-image="demo">Hover</a>
</p>

4. Active the plugin.

Swoon.bind()

5. Don't forget add the following CSS snippets to your CSS file.

.swoon-image {
  z-index: -1;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity ease-in-out 0.15s;
}

.swoon-image img {
  min-width: 100%;
  min-height: 100%;
  height: auto;
}

.hidden { opacity: 0; }

p.hidden {
  opacity: 1;
  color: rgba(0, 0, 0, 0);
}

p.hidden * { opacity: 0; }

p.hidden a.active {
  opacity: 1;
  color: rgba(0, 0, 0, 1);
}

6. Config the plugin with the following options.

Swoon.configure({

  // contains all image togglers and image divs
  container:      'body',

  // top element to hide
  rootElement:    'main',

  // elements in the parent of the link to hide
  parentElement:  '*',

  // contains the image to show
  element:        'div.swoon-image',

  // the class to identify image togglers
  selector:       'a.swoon-link',

  // other elements to hide
  additional:     ''
  
})

---

This awesome jQuery plugin is developed by accommodavid. For more Advanced Usages, please check the demo page or visit the official website.