Skip to content
This repository was archived by the owner on Apr 19, 2019. It is now read-only.

Commit 1fe24d0

Browse files
GianlucaGuariniGianlucaGuarini
committed
small fixes
1 parent af0c073 commit 1fe24d0

File tree

6 files changed

+140
-98
lines changed

6 files changed

+140
-98
lines changed

‎ajax-contents.html‎

Lines changed: 45 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -1,94 +1,45 @@
1-
<!DOCTYPE html>
2-
<html>
3-
<head>
4-
<meta charset="UTF-8" />
5-
<title>Gianluca Guarini - black and white image jQuery plug-in</title>
6-
<meta name="Description" content="This jQuery plug-in can easly convert every colored image (in an html page) into a B&W greyscale image." />
7-
<meta name="Keywords" content="JavaScript,HTML5,jQuery.BlackAndWhite.js,jQuery plugin" />
8-
<link href='http://fonts.googleapis.com/css?family=Rosario' rel='stylesheet' type='text/css'>
9-
<style type="text/css">
10-
body {
11-
margin: 20px auto;
12-
padding: 0;
13-
color:#999;
14-
font-family: 'Rosario', sans-serif;
15-
width:960px;
16-
}
17-
a {
18-
color:#0072ca;
19-
}
20-
img {
21-
border:none;
22-
}
23-
iframe {
24-
display:inline;
25-
float: left;
26-
}
27-
#wrapper {
28-
list-style:none;
29-
margin:10px 0;
30-
float:left;
31-
padding:0;
32-
}
33-
#wrapper li {
34-
float:left;
35-
margin: 15px 30px 15px 0;
36-
}
37-
#wrapper li a {
38-
opacity:0;
39-
filter:alpha(opacity=0);
40-
}
41-
#wrapper li.last {
42-
float:left;
43-
margin: 15px 0 15px;
44-
}
45-
</style>
46-
47-
<link href="css/BlackAndWhite.css" rel="stylesheet">
48-
49-
<script src="src/jquery.min.js"></script>
50-
<script src="jquery.BlackAndWhite.js"></script>
51-
52-
</head>
53-
<body>
54-
<h1>Crossbrowser Html5 Black and white jQuery plug in</h1>
55-
<h2>Responsive demo</h2>
56-
57-
<h3>Demo</h3>
58-
<ul id="wrapper">
59-
</ul>
60-
<button class="ajaxTrigger">Load Images</button>
61-
<br />
62-
<small>
63-
&copy;
64-
<a href="http://www.gianlucaguarini.com" target="_blank">Gianluca Guarini</a>
65-
</small>
66-
<script>
67-
//init
68-
$(".ajaxTrigger").on("click",function() {
69-
$.ajax({
70-
url:"demo.html",
71-
success: function ( data ) {
72-
var $list = $(data).filter("#wrapper").find("li"),
73-
$images = $list.find("img");
74-
$("#wrapper").append($list);
75-
76-
$('.bwWrapper').BlackAndWhite({
77-
hoverEffect:true,
78-
webworkerPath: 'src/',
79-
intensity:1,
80-
onImageReady:function(img){
81-
$(img).parent().animate({
82-
opacity:1
83-
});
84-
}
85-
});
86-
87-
}
88-
});
89-
});
90-
91-
92-
</script>
93-
</body>
94-
</html>
1+
<li>
2+
<a target="_blank" href="http://twitter.com/gianlucaguarini" class="bwWrapper">
3+
<img src="files/twitter.jpg" width="300" height="225" />
4+
</a>
5+
</li>
6+
<li>
7+
<a href="#" class="bwWrapper">
8+
<img src="files/Hydrangeas.jpg" width="300" height="225" />
9+
</a>
10+
</li>
11+
<li class="last">
12+
<a href="#" class="bwWrapper">
13+
<img src="files/Desert.jpg" width="300" height="225" />
14+
</a>
15+
</li>
16+
<li>
17+
<a href="#" class="bwWrapper">
18+
<img src="files/Chrysanthemum.jpg" width="300" height="225" />
19+
</a>
20+
</li>
21+
<li>
22+
<a href="#" class="bwWrapper">
23+
<img src="files/Jellyfish.jpg" width="300" height="225" />
24+
</a>
25+
</li>
26+
<li class="last">
27+
<a href="#" class="bwWrapper">
28+
<img src="files/Koala.jpg" width="300" height="225" />
29+
</a>
30+
</li>
31+
<li>
32+
<a href="#" class="bwWrapper">
33+
<img src="files/Lighthouse.jpg" width="300" height="225" />
34+
</a>
35+
</li>
36+
<li>
37+
<a href="#" class="bwWrapper">
38+
<img src="files/Penguins.jpg" width="300" height="225" />
39+
</a>
40+
</li>
41+
<li class="last">
42+
<a href="#" class="bwWrapper">
43+
<img src="files/Tulips.jpg" width="300" height="225" />
44+
</a>
45+
</li>

‎ajax-demo.html‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Gianluca Guarini - black and white image jQuery plug-in</title>
6+
<meta name="Description" content="This jQuery plug-in can easly convert every colored image (in an html page) into a B&W greyscale image." />
7+
<meta name="Keywords" content="JavaScript,HTML5,jQuery.BlackAndWhite.js,jQuery plugin" />
8+
<link href='http://fonts.googleapis.com/css?family=Rosario' rel='stylesheet' type='text/css'>
9+
<style type="text/css">
10+
body {
11+
margin: 20px auto;
12+
padding: 0;
13+
color:#999;
14+
font-family: 'Rosario', sans-serif;
15+
width:960px;
16+
}
17+
a {
18+
color:#0072ca;
19+
}
20+
img {
21+
border:none;
22+
}
23+
iframe {
24+
display:inline;
25+
float: left;
26+
}
27+
#wrapper {
28+
list-style:none;
29+
margin:10px 0;
30+
float:left;
31+
padding:0;
32+
}
33+
#wrapper li {
34+
float:left;
35+
margin: 15px 30px 15px 0;
36+
}
37+
#wrapper li a {
38+
opacity:0;
39+
filter:alpha(opacity=0);
40+
}
41+
#wrapper li.last {
42+
float:left;
43+
margin: 15px 0 15px;
44+
}
45+
</style>
46+
47+
<link href="css/BlackAndWhite.css" rel="stylesheet">
48+
49+
<script src="src/jquery.min.js"></script>
50+
<script src="src/jquery.BlackAndWhite.js"></script>
51+
52+
</head>
53+
<body>
54+
<h1>Crossbrowser Html5 Black and white jQuery plug in</h1>
55+
<h2>Responsive demo</h2>
56+
57+
<h3>Demo</h3>
58+
<ul id="wrapper">
59+
</ul>
60+
<button class="ajaxTrigger">Load Images</button>
61+
<br />
62+
<small>
63+
&copy;
64+
<a href="http://www.gianlucaguarini.com" target="_blank">Gianluca Guarini</a>
65+
</small>
66+
<script>
67+
//init
68+
$(".ajaxTrigger").on("click",function() {
69+
$.ajax({
70+
url:"ajax-contents.html",
71+
success: function ( data ) {
72+
$("#wrapper").append(data);
73+
$('.bwWrapper').BlackAndWhite({
74+
hoverEffect:true,
75+
webworkerPath: 'src/',
76+
intensity:1,
77+
onImageReady:function(img){
78+
$(img).parent().animate({
79+
opacity:1
80+
});
81+
}
82+
});
83+
84+
}
85+
});
86+
});
87+
88+
89+
</script>
90+
</body>
91+
</html>

‎demo.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -150,7 +150,7 @@ <h3>Features</h3>
150150
<ul>
151151
<li><a href="responsive.html">Responsive Demo</a></li>
152152
<li><a href="invertHoverEffect.html">Hover effect inverted</a></li>
153-
<li><a href="ajax-contents.html">Ajax contents</a></li>
153+
<li><a href="ajax-demo.html">Ajax demo</a></li>
154154
</ul>
155155

156156
<p>

‎jquery.BlackAndWhite.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -235,7 +235,7 @@
235235
if (!$img[0].complete || (typeof $img[0].naturalWidth !== "undefined" && !$img[0].naturalWidth)) {
236236
$img.on('load', function() {
237237
_injectTags($img, $imageWrapper);
238-
});
238+
}).load();
239239
} else {
240240
_injectTags($img, $imageWrapper);
241241
}

‎src/jquery.BlackAndWhite.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -235,7 +235,7 @@
235235
if (!$img[0].complete || (typeof $img[0].naturalWidth !== "undefined" && !$img[0].naturalWidth)) {
236236
$img.on('load', function() {
237237
_injectTags($img, $imageWrapper);
238-
});
238+
}).load();
239239
} else {
240240
_injectTags($img, $imageWrapper);
241241
}

‎src/jquery.BlackAndWhite.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)