Skip to content

Commit f14f672

Browse files
i-like-robotsi-like-robots
committed
New example/doc format, load zoom image on demand.
1 parent 85c2a1e commit f14f672

File tree

6 files changed

+329
-313
lines changed

6 files changed

+329
-313
lines changed

‎Gruntfile.js

+17-9
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,28 @@ module.exports = function(grunt) {
33
grunt.initConfig({
44
pkg: grunt.file.readJSON('package.json'),
55
uglify: {
6-
my_target: {
7-
files: {
8-
'js/easyzoom.min.js': ['js/easyzoom.js']
9-
}
6+
dist: {
7+
files: [
8+
{
9+
src: 'src/easyzoom.js',
10+
dest: 'dist/easyzoom.js'
11+
}
12+
]
1013
}
1114
},
1215
jshint: {
13-
all: ['Gruntfile.js', 'js/easyzoom.js'],
16+
all: ['src/**/*.js'],
1417
options: {
18+
maxdepth: 4,
19+
curly: true,
20+
newcap: true,
21+
eqeqeq: true,
22+
browser: true,
1523
trailing: true,
16-
browser: true
17-
},
18-
globals: {
19-
jQuery: true
24+
globals: {
25+
jquery: true,
26+
define: false
27+
}
2028
}
2129
}
2230
});

‎css/example.css

+82-116
Original file line numberDiff line numberDiff line change
@@ -1,145 +1,111 @@
1-
/* Elements */
1+
/**
2+
* Author: Matt Hinchliffe <www.maketea.co.uk>
3+
* Modified: 18/17/2013
4+
* Description: Some crummy styles to lay out the example file
5+
*/
6+
27
html, body {
3-
min-height:100%;
8+
height: 100%;
9+
margin: 0;
10+
padding: 0;
411
}
5-
html {
6-
font-size:62.5%;
7-
}
812
body {
9-
overflow-y:scroll;
10-
font:normal 1.6em/1.5 Arial, sans-serif;
11-
color:#333;
12-
background:#eee;
13+
line-height: 1.5;
14+
font-family: Arial, sans-serif;
15+
color: #111;
16+
background: #eee;
1317
}
1418

19+
h1, h2, h3, h4, header > p {
20+
text-align: center;
21+
color: #555;
22+
}
1523
h1 {
16-
margin:0 0 0.5em;
17-
font-size:2em;
18-
line-height:1.25;
19-
letter-spacing:-1px;
20-
text-shadow:1px 1px 1px #fff;
24+
margin: 0 0 .2em;
25+
font-size: 2.5em;
26+
letter-spacing: -.075em;
2127
}
22-
23-
h2, h3, h4, dt {
24-
margin:0 0 0.25em;
25-
font-weight:bold;
26-
font-size:1em;
27-
letter-spacing:-0.5px;
28+
h2, header > p {
29+
margin: 0 0 .5em;
30+
font-weight: normal;
31+
font-size: 1.5em;
2832
}
29-
30-
p, ul, ol, dd {
31-
margin:0 0 1.5em;
33+
h3, h4 {
34+
margin: 0 0 .5em;
35+
font-size: 1em;
3236
}
3337

34-
ul, ol {
35-
margin-left:1.75em;
36-
padding:0;
38+
header > h1 {
39+
margin-bottom: 0;
3740
}
38-
li {
39-
margin:0;
40-
padding:0;
41-
}
42-
43-
dfn {
44-
cursor:help;
41+
header > p {
42+
margin-bottom: 1em;
4543
}
4644

47-
pre, code, kbd, var {
48-
font-size:1em;
49-
font:Consolas, "Lucida Console", Monaco, monospace;
50-
}
51-
pre {
52-
overflow:auto;
53-
max-height:15em;
54-
padding:5px;
55-
border:1px solid #ccc;
56-
color:#555;
57-
background:#fefefe;
45+
p, dl, ul, ol {
46+
margin: 0 0 1.5em;
47+
}
48+
dt {
49+
font-weight: bold;
5850
}
59-
code, kbd, var {
60-
line-height:1;
51+
dd {
52+
margin: 0 0 1em;
53+
font-size: 0.8125em;
54+
color: #555;
6155
}
6256

63-
a img {
64-
display:block;
65-
border:none;
57+
ul, ol {
58+
padding-left: 1.5em;
6659
}
6760

68-
/* Inline definition list */
69-
.inline-definitions {
70-
overflow:hidden;
61+
button,
62+
a.button {
63+
font-size: 1.5em;
64+
line-height: 1;
65+
padding: .25em .5em;
66+
border: none;
67+
text-decoration: none;
68+
color: #fff;
69+
background: #333;
70+
border-radius: 7px;
71+
cursor: pointer;
72+
}
73+
button:hover,
74+
a.button:hover {
75+
background-color: #111;
7176
}
72-
.inline-definitions dt,
73-
.inline-definitions dd {
74-
margin:0;
75-
}
76-
.inline-definitions dt {
77-
float:left;
78-
clear:left;
79-
padding-right:5px;
80-
}
81-
.inline-definitions dt::after {
82-
content:':'
83-
}
84-
85-
/* Layout */
86-
#container {
87-
width:780px;
88-
margin:0 auto;
89-
padding:2em 0;
90-
zoom:1; /* Clearfix for < IE7 */
91-
}
92-
/* Micro clearfix <http://nicolasgallagher.com/micro-clearfix-hack/> */
93-
#container:after {
94-
clear:both;
95-
content:"";
96-
display:table;
97-
}
9877

99-
#logo {
100-
font-size:4em;
101-
text-align:center;
78+
figure {
79+
margin: 0;
10280
}
103-
#logo small {
104-
display:block;
105-
font-size:0.5em;
106-
}
10781

108-
#introduction {
109-
float:right;
110-
width:370px;
82+
pre, code, var {
83+
font: normal 1em/1 Consolas, "Lucida Console", Monaco, monospace;
11184
}
112-
#example {
113-
float:left;
114-
width:390px;
85+
pre {
86+
overflow: auto;
87+
padding: 1em .5em;
88+
border: 1px solid #333;
89+
text-align: left;
90+
border-radius: 5px;
11591
}
116-
117-
/**
118-
* Gallery
119-
*/
120-
.easyzoom-gallery {
121-
overflow:hidden;
122-
margin:15px 0;
123-
padding:0;
124-
list-style:none;
92+
var {
93+
text-decoration: underline;
12594
}
12695

127-
/* thumbnails */
128-
.easyzoom-gallery > li > a {
129-
float:left;
130-
margin-left:15px;
131-
text-decoration:none;
132-
}
133-
.easyzoom-gallery > li:first-child > a {
134-
margin-left:0;
96+
hr {
97+
height: 1px;
98+
padding: 0;
99+
margin: 0 0 1.5em;
100+
border: 0;
101+
background: #ccc;
135102
}
136103

137-
/* thumbnails - loading (.is-loading class is not editable) */
138-
.easyzoom-gallery > li > a.is-loading {
139-
background:#fff url(img/loading.gif) no-repeat center center;
140-
}
141-
.easyzoom-gallery > li > a.is-loading > img {
142-
opacity:0.5;
143-
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
144-
filter:alpha(opacity=50);
104+
.container {
105+
width: 36em;
106+
margin: 0 auto;
107+
padding: 2em 2em 4em;
108+
background: #fff;
109+
-webkit-box-shadow: 0 0 5em rgba(0, 0, 0, 0.1);
110+
box-shadow: 0 0 5em rgba(0, 0, 0, 0.1);
145111
}

‎css/pygments.css

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
.syntax .hll { background-color: #49483e }
2+
.syntax { background: #272822; color: #f8f8f2 }
3+
.syntax .c { color: #75715e } /* Comment */
4+
.syntax .err { color: #960050; background-color: #1e0010 } /* Error */
5+
.syntax .k { color: #66d9ef } /* Keyword */
6+
.syntax .l { color: #ae81ff } /* Literal */
7+
.syntax .n { color: #f8f8f2 } /* Name */
8+
.syntax .o { color: #f92672 } /* Operator */
9+
.syntax .p { color: #f8f8f2 } /* Punctuation */
10+
.syntax .cm { color: #75715e } /* Comment.Multiline */
11+
.syntax .cp { color: #75715e } /* Comment.Preproc */
12+
.syntax .c1 { color: #75715e } /* Comment.Single */
13+
.syntax .cs { color: #75715e } /* Comment.Special */
14+
.syntax .ge { font-style: italic } /* Generic.Emph */
15+
.syntax .gs { font-weight: bold } /* Generic.Strong */
16+
.syntax .kc { color: #66d9ef } /* Keyword.Constant */
17+
.syntax .kd { color: #66d9ef } /* Keyword.Declaration */
18+
.syntax .kn { color: #f92672 } /* Keyword.Namespace */
19+
.syntax .kp { color: #66d9ef } /* Keyword.Pseudo */
20+
.syntax .kr { color: #66d9ef } /* Keyword.Reserved */
21+
.syntax .kt { color: #66d9ef } /* Keyword.Type */
22+
.syntax .ld { color: #e6db74 } /* Literal.Date */
23+
.syntax .m { color: #ae81ff } /* Literal.Number */
24+
.syntax .s { color: #e6db74 } /* Literal.String */
25+
.syntax .na { color: #a6e22e } /* Name.Attribute */
26+
.syntax .nb { color: #f8f8f2 } /* Name.Builtin */
27+
.syntax .nc { color: #a6e22e } /* Name.Class */
28+
.syntax .no { color: #66d9ef } /* Name.Constant */
29+
.syntax .nd { color: #a6e22e } /* Name.Decorator */
30+
.syntax .ni { color: #f8f8f2 } /* Name.Entity */
31+
.syntax .ne { color: #a6e22e } /* Name.Exception */
32+
.syntax .nf { color: #a6e22e } /* Name.Function */
33+
.syntax .nl { color: #f8f8f2 } /* Name.Label */
34+
.syntax .nn { color: #f8f8f2 } /* Name.Namespace */
35+
.syntax .nx { color: #a6e22e } /* Name.Other */
36+
.syntax .py { color: #f8f8f2 } /* Name.Property */
37+
.syntax .nt { color: #f92672 } /* Name.Tag */
38+
.syntax .nv { color: #f8f8f2 } /* Name.Variable */
39+
.syntax .ow { color: #f92672 } /* Operator.Word */
40+
.syntax .w { color: #f8f8f2 } /* Text.Whitespace */
41+
.syntax .mf { color: #ae81ff } /* Literal.Number.Float */
42+
.syntax .mh { color: #ae81ff } /* Literal.Number.Hex */
43+
.syntax .mi { color: #ae81ff } /* Literal.Number.Integer */
44+
.syntax .mo { color: #ae81ff } /* Literal.Number.Oct */
45+
.syntax .sb { color: #e6db74 } /* Literal.String.Backtick */
46+
.syntax .sc { color: #e6db74 } /* Literal.String.Char */
47+
.syntax .sd { color: #e6db74 } /* Literal.String.Doc */
48+
.syntax .s2 { color: #e6db74 } /* Literal.String.Double */
49+
.syntax .se { color: #ae81ff } /* Literal.String.Escape */
50+
.syntax .sh { color: #e6db74 } /* Literal.String.Heredoc */
51+
.syntax .si { color: #e6db74 } /* Literal.String.Interpol */
52+
.syntax .sx { color: #e6db74 } /* Literal.String.Other */
53+
.syntax .sr { color: #e6db74 } /* Literal.String.Regex */
54+
.syntax .s1 { color: #e6db74 } /* Literal.String.Single */
55+
.syntax .ss { color: #e6db74 } /* Literal.String.Symbol */
56+
.syntax .bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */
57+
.syntax .vc { color: #f8f8f2 } /* Name.Variable.Class */
58+
.syntax .vg { color: #f8f8f2 } /* Name.Variable.Global */
59+
.syntax .vi { color: #f8f8f2 } /* Name.Variable.Instance */
60+
.syntax .il { color: #ae81ff } /* Literal.Number.Integer.Long */

‎dist/easyzoom.js

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)