# MediaViewer
Open me!
Demo View | Source Code (opens new window) | Download all widgets
Assets:
Images:
JavaScripts:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Index</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../core/lib/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/modal-window.min.js"></script>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<link href="css/modal-window.css" type="text/css" rel="stylesheet" />
</head>
<body>
<h1>MediaViewer</h1>
<div id="content">
Hello, I'm widget MediaViewer - <a href="media-viewer.html" onclick="$(this).modal({width: 900, height: 640}).open(); return false;">Please Open Me!</a>
</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Media Viewer</title>
<script type="text/javascript" src="../core/lib/jquery-1.6.2.min.js"></script>
</head>
<body>
<div style="width: 15%; margin: 0px auto;">
<div style="float:left;">Photos</div>
<div style="float:left;"> | </div>
<div style="float:left;">Videos</div>
<div style="clear: both;"></div>
</div>
<br />
<div style="text-align: center;">
<img src="pictures/example.jpg" alt="car" width="880" />
</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
body {
font-weight: bold;
font-size: 14px;
line-height: 45px;
font-family: Helvetica;
}
#content {
border-color: black;
text-align: left;
height: 100%;
padding: 0 0 0 0;
font-weight: 600;
}
#content a {
color: black;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.modal-overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background: #131313;
opacity: .85;
filter: alpha(opacity=85);
z-index: 101;
}
.modal-window {
position: fixed;
top: 50%;
left: 50%;
margin: 0;
padding: 0;
z-index: 102;
background: #fff;
border: solid 8px #000;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
}
.close-window {
position: absolute;
width: 47px;
height: 47px;
right: -23px;
top: -23px;
background: transparent url(../images/close-button.png) no-repeat scroll right top;
text-indent: -99999px;
overflow: hidden;
cursor: pointer;
}
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
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
var modalWindow = {
parent:"body",
windowId:null,
content:null,
width:null,
height:null,
close:function()
{
$(".modal-window").remove();
$(".modal-overlay").remove();
},
open:function()
{
var modal = "";
modal += "<div class=\"modal-overlay\"></div>";
modal += "<div id=\"" + this.windowId + "\" class=\"modal-window\" style=\"width:" + this.width + "px; height:" + this.height + "px; margin-top:-" + (this.height / 2) + "px; margin-left:-" + (this.width / 2) + "px;\">";
modal += this.content;
modal += "</div>";
$(this.parent).append(modal);
$(".modal-window").append("<a class=\"close-window\"></a>");
$(".close-window").click(function(){modalWindow.close();});
$(".modal-overlay").click(function(){modalWindow.close();});
}
};
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
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
// Make sure to add code blocks to your code group