jQuery Plugin For Fullscreen Image Preview Swoon - Download jQuery Plugin For Fullscreen Image Preview - Swoon

Download jQuery Plugin For Fullscreen Image Preview – Swoon

Posted on

This time I will share jQuery Plugin and tutorial about jQuery Plugin For Fullscreen Image Preview – Swoon, hope it will help you in programming stack.

jQuery Plugin For Fullscreen Image Preview Swoon - Download jQuery Plugin For Fullscreen Image Preview - Swoon
File Size: 6.76 KB
Views Total: 919
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   



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.

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

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

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

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

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

4. Active the plugin.

1 Swoon.bind()

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

01 .swoon-image {
02   z-index: -1;
03   position: fixed;
04   top: 0;
05   left: 0;
06   width: 100%;
07   height: 100%;
08   transition: opacity ease-in-out 0.15s;
09 }
10  
11 .swoon-image img {
12   min-width: 100%;
13   min-height: 100%;
14   height: auto;
15 }
16  
17 .hidden { opacity: 0; }
18  
19 p.hidden {
20   opacity: 1;
21   color: rgba(0, 0, 0, 0);
22 }
23  
24 p.hidden * { opacity: 0; }
25  
26 p.hidden a.active {
27   opacity: 1;
28   color: rgba(0, 0, 0, 1);
29 }

6. Config the plugin with the following options.

01 Swoon.configure({
02  
03   // contains all image togglers and image divs
04   container:      'body',
05  
06   // top element to hide
07   rootElement:    'main',
08  
09   // elements in the parent of the link to hide
10   parentElement:  '*',
11  
12   // contains the image to show
13   element:        'div.swoon-image',
14  
15   // the class to identify image togglers
16   selector:       'a.swoon-link',
17  
18   // other elements to hide
19   additional:     ''
20    
21 })

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




source : jqueryscript.net