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.
| 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
