Skip to content

Commit dced8ad

Browse files
sunil-samuelsunil-samuel
committed
Adding code and sample codes with background images.
1 parent fceb591 commit dced8ad

11 files changed

+432
-0
lines changed

‎examples/example1.html

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<html>
2+
<head>
3+
<meta charset="UTF-8">
4+
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta name="description" content="JQuery Background Slideshow">
8+
<meta name="keywords" content="JQuery, background">
9+
<meta name="creator" content="Sunil Samuel">
10+
<meta name="copyright" content="Sunil Samuel">
11+
<meta name="version" content="$LastChangedRevision: 1122 $">
12+
13+
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
14+
<script src="../src/jquery-bg-slideshow.js"></script>
15+
<script type="text/javascript">
16+
$(function() {
17+
$(".bg").bgSlideShow({
18+
current : 1,
19+
debug : true,
20+
randomize : true
21+
});
22+
});
23+
</script>
24+
<style type="text/css">
25+
.bg {
26+
height: 200px;
27+
width: 100%;
28+
border: 1px solid rgb(200, 200, 200);
29+
background-color: white;
30+
color: white;
31+
font-size: 30pt;
32+
align-items: center;
33+
justify-content: center;
34+
display: flex;
35+
text-align: center;
36+
}
37+
38+
.wrap-bg-element {
39+
height: 200px;
40+
}
41+
</style>
42+
43+
<title>JQuery Background Slideshow Example 1 (Single Element)</title>
44+
</head>
45+
<body>
46+
<div style="height: 30px;">This is just a div without any
47+
background to show that this plugin does not impact any elements
48+
before it</div>
49+
<div class='bg' data-images="gfx/bar.jpg,gfx/clouds.jpg,gfx/swirls.jpg"
50+
data-debug="false">This is some data inside the element where
51+
the background changes.</div>
52+
<div style="height: 30px;">This is a div after the background div
53+
to show that this plugin does not impact any elements after it</div>
54+
</body>
55+
</html>

‎examples/example2.html

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<html>
2+
<head>
3+
<meta charset="UTF-8">
4+
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta name="description" content="JQuery Background Slideshow">
8+
<meta name="keywords" content="JQuery, background">
9+
<meta name="creator" content="Sunil Samuel">
10+
<meta name="copyright" content="Sunil Samuel">
11+
<meta name="version" content="$LastChangedRevision: 1122 $">
12+
13+
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
14+
<script src="../src/jquery-bg-slideshow.js"></script>
15+
<script type="text/javascript">
16+
$(function() {
17+
$(".bg").bgSlideShow({
18+
current : 1,
19+
randomize : true
20+
});
21+
});
22+
</script>
23+
<style type="text/css">
24+
body {
25+
text-align: center;
26+
}
27+
28+
.bg {
29+
height: 300px;
30+
width: 100%;
31+
border: 1px solid rgb(200, 200, 200);
32+
background-color: white;
33+
color: white;
34+
font-size: 30pt;
35+
align-items: center;
36+
justify-content: center;
37+
display: flex;
38+
text-align: center;
39+
text-shadow: 1px 1px 10px black;
40+
margin: 0;
41+
border-radius: 50vh;
42+
box-shadow: 3px 3px 17px 2px #716464;
43+
}
44+
45+
.wrap-bg-element {
46+
width: 40%;
47+
height: 300px;
48+
display: inline-block;
49+
}
50+
</style>
51+
52+
<title>JQuery Background Slideshow Example 2 (Multiple Elements)</title>
53+
</head>
54+
<body>
55+
<div style="height: 30px;">This is an exampl that show two
56+
different elements that have background images changing in different
57+
speed</div>
58+
<div class='bg' data-images="gfx/bar.jpg,gfx/clouds.jpg,gfx/swirls.jpg"
59+
data-transitionDelay="5000" data-initialBackground="2">Some data
60+
for widget one</div>
61+
<div class='bg' data-images="gfx/bar.jpg,gfx/clouds.jpg,gfx/swirls.jpg"
62+
data-debug="false" data-transitionDelay="7000"
63+
data-transitionSpeed="3000">Some data for widget two</div>
64+
<div style="height: 30px;">This is a div after the background div
65+
to show that this plugin does not impact any elements after it</div>
66+
</body>
67+
</html>

‎examples/example3.html

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<html>
2+
<head>
3+
<meta charset="UTF-8">
4+
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta name="description" content="JQuery Background Slideshow">
8+
<meta name="keywords" content="JQuery, background">
9+
<meta name="creator" content="Sunil Samuel">
10+
<meta name="copyright" content="Sunil Samuel">
11+
<meta name="version" content="$LastChangedRevision: 1122 $">
12+
13+
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
14+
<script src="../src/jquery-bg-slideshow.js"></script>
15+
<script type="text/javascript">
16+
$(function() {
17+
$(".bg").bgSlideShow({
18+
current : 0,
19+
randomize : false,
20+
images : [ "gfx/circles.jpg", "gfx/hash.jpg", "gfx/leaves.jpg" ]
21+
});
22+
});
23+
</script>
24+
<style type="text/css">
25+
body {
26+
text-align: center;
27+
height: 100%;
28+
background-color: white;
29+
color: white;
30+
font-size: 30pt;
31+
align-items: center;
32+
justify-content: center;
33+
display: flex;
34+
margin: 0;
35+
}
36+
37+
.wrap-bg-element {
38+
width: 100%;
39+
height: 100%;
40+
}
41+
42+
.bg {
43+
height: 100%;
44+
width: 100%;
45+
background-color: white;
46+
color: white;
47+
font-size: 30pt;
48+
align-items: center;
49+
justify-content: center;
50+
display: flex;
51+
text-align: center;
52+
text-shadow: 1px 1px 10px black;
53+
margin: 0;
54+
}
55+
</style>
56+
57+
<title>JQuery Background Slideshow Example 2 (Multiple Elements)</title>
58+
</head>
59+
<body>
60+
<div class="bg">This is it.</div>
61+
</body>
62+
</html>

‎examples/gfx/bar.jpg

55 KB
Loading

‎examples/gfx/circles.jpg

162 KB
Loading

‎examples/gfx/clouds.jpg

21 KB
Loading

‎examples/gfx/colors.jpg

47.5 KB
Loading

‎examples/gfx/hash.jpg

151 KB
Loading

‎examples/gfx/leaves.jpg

472 KB
Loading

‎examples/gfx/swirls.jpg

105 KB
Loading

0 commit comments

Comments
 (0)