-
Notifications
You must be signed in to change notification settings - Fork 0
/
popup.html
123 lines (103 loc) · 4.6 KB
/
popup.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
body{
text-align:center;
}
a{
text-align:center;
display:inline-block;
margin: 20px auto ;
}
.popup-youtube img{
height:auto;
width: 200px;
margin: 20px;
-webkit-box-shadow: 0px 0px 128px 0px rgba(128,126,128,1);
-moz-box-shadow: 0px 0px 128px 0px rgba(128,126,128,1);
box-shadow: 0px 0px 128px 0px rgba(128,126,128,1);
}
.play {
background: url('http://cdn1.iconfinder.com/data/icons/iconslandplayer/PNG/64x64/CircleBlue/Play1Pressed.png') center center no-repeat;
margin: -170px 10px 0 0;
height: 140px;
position: relative;
z-index: 10;
opacity: 0.5;
}
.play:hover{
opacity: 1;
}
.album a {
margin: 20px;}
img{
height:auto;
width: 200px;
padding: 20px;
display: inline-block;
-webkit-box-shadow: 0px 0px 128px 0px rgba(128,126,128,1);
-moz-box-shadow: 0px 0px 128px 0px rgba(128,126,128,1);
box-shadow: 0px 0px 128px 0px rgba(128,126,128,1);
}
</style>
</head>
<body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css">
<script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.js">
</script>
<h1> ......Popup From Jquery......</h1>
<h2> Videos</h2>
<a class="popup-youtube" href="https://www.youtube.com/watch?v=5VAIA-DM6cY">
<img src="https://i.ytimg.com/vi/5VAIA-DM6cY/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=IkkvIHO_Q1ROVxZMvc1C5rTwisU" alt="InTouch HMI Design For Instrumentation Systems and Automation DP 3"> <div class="play"></div></a>
<a class="popup-youtube" href="https://www.youtube.com/watch?v=_5BhSyq9aAA">
<img src="https://i.ytimg.com/vi/_5BhSyq9aAA/hqdefault.jpg?custom=true&w=168&h=94&stc=true&jpg444=true&jpgq=90&sp=68&sigh=ZrcjbaIwlfkDOPvQQkygExQ5DZc" alt="InTouch HMI Design For Instrumentation Systems and Automation DP 4"><div class="play"></div></a>
<a class="popup-youtube" href="https://www.youtube.com/watch?v=7_O8aBv6rqI">
<img src="https://i.ytimg.com/vi/7_O8aBv6rqI/hqdefault.jpg?custom=true&w=336&h=188&stc=true&jpg444=true&jpgq=90&sp=68&sigh=-DULZZbWT7Yeij9QpKWdRiuzH7I" alt="InTouch HMI Design For Instrumentation Systems and Automation" ><div class="play"></div></a>
<a class="popup-youtube" href="https://www.youtube.com/watch?v=Un0AnoUrO9c">
<img src="https://i.ytimg.com/vi/Un0AnoUrO9c/hqdefault.jpg?custom=true&w=336&h=188&stc=true&jpg444=true&jpgq=90&sp=68&sigh=PuZI5swyXAzWhsM6bKAklH5xR8I" alt="InTouch HMI Design For Instrumentation Systems and Automation DP 2"><div class="play"></div></a>
<h2>Photos</h2>
<div class="album">
<a href="http://cdn.electric-cloud.com/wp-content/uploads/2015/04/end_to_end_automation.jpeg">
<img src="http://cdn.electric-cloud.com/wp-content/uploads/2015/04/end_to_end_automation.jpeg" alt="img1"/>
</a>
<a href="http://blogs.vmware.com/management/files/2016/07/Automation-Market.jpg">
<img src="http://blogs.vmware.com/management/files/2016/07/Automation-Market.jpg" alt="img2" />
</a>
<a href="https://www.stickyminds.com/sites/default/files/article/2015/automation.png">
<img src="https://www.stickyminds.com/sites/default/files/article/2015/automation.png" alt="img3" />
</a>
</div>
<script>
$(function() {
$('div.album').magnificPopup({delegate: 'a', type: 'image' });
});
</script>
</body>
<script>
$(document).ready(function() {
$('.popup-youtube, .popup-vimeo, .popup-gmaps').magnificPopup({
disableOn: 700,
type: 'iframe',
mainClass: 'mfp-fade',
removalDelay: 160,
preloader: false,
fixedContentPos: false
});
$.extend(true, $.magnificPopup.defaults, {
iframe: {
patterns: {
youtube: {
index: 'youtube.com/',
id: 'v=',
src: 'http://www.youtube.com/embed/%id%?autoplay=1'
}
}
}
});
});
</script>
</html>