Skip to content

Commit 310022c

Browse files
sunil-samuelsunil-samuel
committed
Adding slide controls.
1 parent f1dd438 commit 310022c

11 files changed

+305
-27
lines changed

‎README.md

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,10 @@ $(function () {
4545
afterInit: myAfterInitFunc,
4646
beforeChange : myBeforeChangeFunc,
4747
afterChange : myAfterChangeFunc
48+
},
49+
slideControls: {
50+
enabled: true,
51+
classes: 'something'
4852
}
4953
});
5054
});
@@ -121,6 +125,17 @@ The following are options used to define which background image and transitions
121125
>> ***true*** - Print debug messages to the console.log for debugging purposes.<br>
122126
>> ***false*** - No debug messages
123127
128+
### Slide Controls
129+
130+
Slide controls define whether to show the small 'ball' element in the middle of the image
131+
for the user to select which image to view.
132+
133+
> **enabled** or **data-slidecontrols.enabled** (default: true) [Boolean]
134+
>> Enable the slide controls so that the user will be able to see it.
135+
136+
> **classes** or **data-slidecontrols.classes** (default:null) [String]
137+
>> Define one or more class(es) to add to the div that sets the slide control.
138+
124139
### Event Handlers
125140

126141
Events handlers will be invoked for different events. All event handlers are defaulted to null.

‎examples/example1.html

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,17 @@
1111
<meta name="version" content="$LastChangedRevision: 1122 $">
1212

1313
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
14-
<script src="../src/jquery-bg-slideshow.js"></script>
14+
<script src="../src/js/jquery-bg-slideshow.js"></script>
15+
16+
<link rel="stylesheet" href="../src/css/jquery-bg-slideshow.css">
17+
1518
<script type="text/javascript">
1619
$(function() {
1720
$(".bg").bgSlideShow({
1821
current : 1,
1922
debug : false,
2023
randomize : true,
21-
initialBackground : 'random'
24+
initialBackground : 'random',
2225
});
2326
});
2427
</script>
@@ -36,9 +39,10 @@
3639
text-align: center;
3740
}
3841

39-
.wrap-bg-element {
42+
.jquery-bg-slideshow-wrap-bg-element {
4043
height: 200px;
4144
}
45+
4246
</style>
4347

4448
<title>JQuery Background Slideshow Example 1 (Single Element)</title>

‎examples/example2.html

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,9 @@
1111
<meta name="version" content="$LastChangedRevision: 1122 $">
1212

1313
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
14-
<script src="../src/jquery-bg-slideshow.js"></script>
14+
<script src="../src/js/jquery-bg-slideshow.js"></script>
15+
16+
<link rel="stylesheet" href="../src/css/jquery-bg-slideshow.css">
1517
<script type="text/javascript">
1618
$(function() {
1719
$(".bg").bgSlideShow({
@@ -42,7 +44,7 @@
4244
box-shadow: 3px 3px 17px 2px #716464;
4345
}
4446

45-
.wrap-bg-element {
47+
.jquery-bg-slideshow-wrap-bg-element {
4648
width: 40%;
4749
height: 300px;
4850
display: inline-block;
@@ -52,7 +54,7 @@
5254
<title>JQuery Background Slideshow Example 2 (Multiple Elements)</title>
5355
</head>
5456
<body>
55-
<div style="height: 30px;">This is an exampl that show two
57+
<div style="height: 30px;">This is an example that show two
5658
different elements that have background images changing in different
5759
speed</div>
5860
<div class='bg' data-images="gfx/bar.jpg,gfx/clouds.jpg,gfx/swirls.jpg"

‎examples/example3.html

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,9 @@
1111
<meta name="version" content="$LastChangedRevision: 1122 $">
1212

1313
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
14-
<script src="../src/jquery-bg-slideshow.js"></script>
14+
<script src="../src/js/jquery-bg-slideshow.js"></script>
15+
16+
<link rel="stylesheet" href="../src/css/jquery-bg-slideshow.css">
1517
<script type="text/javascript">
1618
$(function() {
1719
$(".bg").bgSlideShow({
@@ -36,7 +38,7 @@
3638
margin: 0;
3739
}
3840

39-
.wrap-bg-element {
41+
.jquery-bg-slideshow-wrap-bg-element {
4042
width: 100%;
4143
height: 100%;
4244
}
@@ -59,6 +61,6 @@
5961
<title>JQuery Background Slideshow Example 2 (Multiple Elements)</title>
6062
</head>
6163
<body>
62-
<div class="bg">This is it.</div>
64+
<div class="bg">Full Page Background</div>
6365
</body>
6466
</html>

‎examples/example4.html

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
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/js/jquery-bg-slideshow.js"></script>
15+
16+
<link rel="stylesheet" href="../src/css/jquery-bg-slideshow.css">
17+
<script type="text/javascript">
18+
$(function() {
19+
$(".bg").bgSlideShow({
20+
current : 0,
21+
randomize : false,
22+
images : [ "gfx/circles.jpg", "gfx/hash.jpg", "gfx/leaves.jpg" ],
23+
initialBackground : 'random',
24+
transitionDelay : 2000,
25+
slideControls : {
26+
enabled : false
27+
}
28+
});
29+
});
30+
</script>
31+
<style type="text/css">
32+
body {
33+
text-align: center;
34+
height: 100%;
35+
background-color: white;
36+
color: white;
37+
font-size: 30pt;
38+
align-items: center;
39+
justify-content: center;
40+
display: flex;
41+
margin: 0;
42+
}
43+
44+
.jquery-bg-slideshow-wrap-bg-element {
45+
width: 100%;
46+
height: 100%;
47+
}
48+
49+
.bg {
50+
height: 100%;
51+
width: 100%;
52+
background-color: white;
53+
color: white;
54+
font-size: 30pt;
55+
align-items: center;
56+
justify-content: center;
57+
display: flex;
58+
text-align: center;
59+
text-shadow: 1px 1px 10px black;
60+
margin: 0;
61+
}
62+
</style>
63+
64+
<title>JQuery Background Slideshow Example 2 (Multiple Elements)</title>
65+
</head>
66+
<body>
67+
<div class="bg">Full Page Background without Slide Controls</div>
68+
</body>
69+
</html>

‎examples/gfx/text.html

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
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 : false,
20+
randomize : true,
21+
initialBackground : 'random'
22+
});
23+
});
24+
</script>
25+
<style type="text/css">
26+
.bg {
27+
height: 200px;
28+
width: 100%;
29+
border: 1px solid rgb(200, 200, 200);
30+
background-color: white;
31+
color: white;
32+
font-size: 30pt;
33+
align-items: center;
34+
justify-content: center;
35+
display: flex;
36+
text-align: center;
37+
}
38+
39+
.wrap-bg-element {
40+
height: 200px;
41+
}
42+
</style>
43+
44+
<title>JQuery Background Slideshow Example 1 (Single Element)</title>
45+
</head>
46+
<body>
47+
<div style="height: 30px;">This is just a div without any
48+
background to show that this plugin does not impact any elements
49+
before it</div>
50+
<div class="wrap-bg-element" style="position: relative;">
51+
<div>
52+
hello
53+
<div class="bg"
54+
data-images="gfx/bar.jpg,gfx/clouds.jpg,gfx/swirls.jpg"
55+
data-debug="false"
56+
style="background-image: url(&quot;gfx/swirls.jpg&quot;); position: absolute;">This
57+
is some data inside the element where the background changes.</div>
58+
</div>
59+
</div>
60+
<div style="height: 30px;">This is a div after the background div
61+
to show that this plugin does not impact any elements after it</div>
62+
63+
</body>
64+
</html>

‎src/css/jquery-bg-slideshow-min.css

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

‎src/css/jquery-bg-slideshow.css

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
/*
2+
* This is the class for the wrapper around the element that
3+
* will have the slidshow background.
4+
*/
5+
.jquery-bg-slideshow-wrap-bg-element {
6+
position: relative;
7+
}
8+
9+
/*
10+
* This class is for the div that holds all of the small 'ball'
11+
* that can be used to traverse the images in the list control.
12+
*/
13+
.jquery-bg-slideshow-list-control-element {
14+
position: absolute;
15+
text-align: center;
16+
bottom: 0;
17+
width: 100%;
18+
}
19+
20+
/*
21+
* This is the class that defines the small 'ball' on the bottom
22+
* of the image for the user to click to view different images.
23+
* This is used if the user has the 'listControls.enabled=true'.
24+
* NOTE: listControls.size, listControls.backgroundColor,
25+
* listControls.borderSize, listControls.spaceBetween,
26+
* and listControls.borderColor will impact this class.
27+
*/
28+
.jquery-bg-slideshow-list-control-image-element {
29+
display: inline-block;
30+
border-radius: 5pt;
31+
height: 5pt;
32+
width: 5pt;
33+
margin-right: 5px;
34+
background: rgb(0, 0, 0);
35+
border: 2px rgb(255, 255, 255);
36+
box-shadow: 1px 1px 10px 1px white;
37+
cursor: pointer;
38+
}
39+
40+
/*
41+
* This is the class used to store the cloned element. This
42+
* will be in the background as the other one fades out.
43+
*/
44+
.jquery-bg-slideshow-cloned {
45+
z-index: -100;
46+
display: none;
47+
}

‎src/jquery-bg-slideshow-min.js

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎src/js/jquery-bg-slideshow-min.js

Lines changed: 6 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)