Skip to content

Commit 3530b70

Browse files
wingkwongwingkwong
committed
## 1.3.0 - 2018-12-24
### Added - Header Container - Video Title ### Changed - Moved Download Container to Header Container - Revised markers container structure to allow slide images in it - Revised theme color - Revised the portion for video container and slide container from 6:6 to 5:7 in responsive design ### Removed - Download button text
1 parent e178ed1 commit 3530b70

13 files changed

+575
-451
lines changed

‎CHANGELOG.md

+14
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,19 @@
11
# Changelog
22

3+
## 1.3.0 - 2018-12-24
4+
### Added
5+
- Header Container
6+
- Video Title
7+
8+
### Changed
9+
- Moved Download Container to Header Container
10+
- Revised markers container structure to allow slide images in it
11+
- Revised theme color
12+
- Revised the portion for video container and slide container from 6:6 to 5:7 in responsive design
13+
14+
### Removed
15+
- Download button text
16+
317
## 1.2.0 - 2018-10-24
418
### Added
519
- Demo pages

‎README.md

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# jquery-chameleon
22

3-
Synchronizing slide images with videos
3+
A jQuery plugin to synchronize slide images with videos in JWPlayer 7, HTML5 or YouTube Player
44

55
[![NPM version](https://img.shields.io/npm/v/jquery-chameleon.svg)](https://www.npmjs.com/package/jquery-chameleon) [![License](https://img.shields.io/npm/l/jquery-chameleon.svg)](https://github.com/wingkwong/jquery-chameleon/blob/master/LICENSE) [![Total NPM Download](https://img.shields.io/npm/dt/jquery-chameleon.svg)](https://www.npmjs.com/package/jquery-chameleon)
66
[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fwingkwong%2Fjquery-chameleon.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2Fwingkwong%2Fjquery-chameleon?ref=badge_shield)
@@ -13,6 +13,8 @@ Synchronizing slide images with videos
1313
Synchronzing slide images with videos based on the preset rules.
1414
* **Markers:**
1515
Showing the highlighted slide, i.e. the one you are currently viewing. Navigated to a specific moment with a simple click.
16+
* **Carousel Navigatior:**
17+
Showing N slides in a carousel where N can be configured with the variable numOfCarouselSlide
1618
* **Responsive:**
1719
Rendering in a responsive way or not is your choice.
1820
* **Multiple Video Player Support:**
@@ -54,7 +56,7 @@ The documentation is available at [https://wingkwong.gitbooks.io/jquery-chameleo
5456

5557
## Authors
5658

57-
* **Wing Kam WONG** - [@wingkwong](https://github.com/wingkwong)
59+
* **WONG, Wing Kam** - [@wingkwong](https://github.com/wingkwong)
5860

5961
## License
6062

‎docs/chameleon.css

+53-14
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,13 @@
88
* \_____|_| |_/_/ \_\_| |_|______|______|______\____/|_| \_|
99
*
1010
*
11-
* chameleon.css
12-
* @author Wing Kam Wong - [email protected]
11+
* chameleon.css - A jQuery plugin to synchronize slide images with videos in JWPlayer 7, HTML5 or YouTube Player
12+
* @author WONG, Wing Kam - [email protected]
1313
* @version - 1.3.0
1414
*/
1515

1616

17-
.chameleon{
17+
.chameleon{
1818
font-family: Verdana;
1919
min-width: 320px;
2020
}
@@ -23,10 +23,15 @@
2323
color: #ffffff;
2424
}
2525

26+
.header-container {
27+
background-color: #000000;
28+
}
29+
2630
.header-container .video-title{
2731
color: #ffffff;
2832
font-size: 16px;
29-
padding: 10px 20px;
33+
padding: 0px 20px;
34+
font-weight: bold;
3035
}
3136

3237
.video-container{
@@ -46,10 +51,10 @@
4651

4752
.slide-container img{
4853
display: block;
54+
width: 100%;
4955
max-width: 100%;
5056
margin-left: auto;
5157
margin-right: auto;
52-
height: 300px;
5358
}
5459

5560
.download-container{
@@ -89,7 +94,7 @@
8994
.download-btn{
9095
display: inline-block;
9196
padding-left: 15px;
92-
color: #ffffff;
97+
color: #000000;
9398
text-decoration: none;
9499
background-repeat: no-repeat;
95100
background-position-y: 10px;
@@ -178,10 +183,10 @@
178183
.info-panel{
179184
width: 100%;
180185
float: left;
181-
color: #ffffff;
186+
color: #000000;
182187
padding: 10px 0px;
183188
text-align: center;
184-
background-color: black;
189+
background-color: #333333;
185190
}
186191

187192
.info-panel .dropdown-header{
@@ -197,9 +202,7 @@
197202
}
198203

199204
.info-panel .dropdown-content{
200-
padding: 10px 20px;
201-
max-height: 300px;
202-
overflow-y: scroll;
205+
margin: 0px;
203206
}
204207

205208

@@ -224,8 +227,15 @@
224227
text-align: left;
225228
}
226229

227-
.info-panel .info-panel-slide{
228-
display: block;
230+
.slide-number {
231+
margin-right: 5px;
232+
}
233+
234+
.info-panel .info-panel-slide {
235+
/*display : flex;*/
236+
align-items : center;
237+
margin: 10px 0px;
238+
text-decoration: none;
229239
}
230240

231241
.info-panel .slide-number,
@@ -239,5 +249,34 @@
239249

240250
.info-panel-slide.chameleon-hightlighted,
241251
.info-panel-slide.chameleon-hightlighted .slide-title{
242-
color: #FFFF33;
252+
background-color: #ffffff;
253+
color: #000000;
243254
}
255+
256+
.chameleon-responsive .info-panel .slide-number,
257+
.chameleon-responsive .info-panel .slide-time,
258+
.chameleon-responsive .info-panel .slide-thumbnail {
259+
position: relative;
260+
}
261+
262+
.chameleon-responsive .info-panel .info-panel-slide {
263+
display: block;
264+
}
265+
266+
267+
@media only screen and (min-width: 992px) {
268+
.chameleon-responsive .slide-container img{
269+
height: 452px;
270+
width: auto;
271+
}
272+
273+
.chameleon-responsive .info-panel .info-panel-slide {
274+
display: flex;
275+
}
276+
277+
.chameleon-responsive .info-panel .slide-number,
278+
.chameleon-responsive .info-panel .slide-time {
279+
padding: 0px;
280+
}
281+
}
282+

‎docs/chameleon.js

+19-22
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@
88
* \_____|_| |_/_/ \_\_| |_|______|______|______\____/|_| \_|
99
*
1010
*
11-
* chameleon.js - synchronizing slides with videos
12-
* @author Wing Kam Wong - [email protected]
11+
* chameleon.js - A jQuery plugin to synchronize slide images with videos in JWPlayer 7, HTML5 or YouTube Player
12+
* @author WONG, Wing Kam - [email protected]
1313
* @version - 1.3.0
1414
*/
1515
;
@@ -98,7 +98,7 @@
9898
/*
9999
Download Buttons
100100
*/
101-
if (!$.isEmptyObject(o.chameleonContext.download)) {
101+
if (o.showDownloadPanel && !$.isEmptyObject(o.chameleonContext.download)) {
102102
$chameleon.find('.header-container').append($downloadContainer);
103103

104104
if (typeof o.chameleonContext.download.slides != "undefined" &&
@@ -164,12 +164,6 @@
164164
*/
165165
$chameleon.append($slideContainer);
166166

167-
168-
/*
169-
Download Container
170-
*/
171-
$chameleon.append($downloadContainer);
172-
173167
if (!o.responsive)
174168
$chameleon.css("width", o.width).css("height", o.height);
175169

@@ -287,7 +281,7 @@
287281
/*
288282
Building Info Panel Container
289283
*/
290-
if(o.showMarkers) {
284+
if(o.showMarkers && o.responsive) {
291285
$chameleon.append($infoPanelContainer);
292286

293287
// Building Info Panel
@@ -498,12 +492,13 @@
498492

499493
function _responsify() {
500494
if (o.responsive) {
501-
$chameleon.find('.video-container').addClass("col-md-6 col-xs-12");
495+
$chameleon.addClass("chameleon-responsive");
496+
$chameleon.find('.video-container').addClass("col-md-5 col-xs-12");
502497
$chameleon.find('.video-container').css({
503498
'padding': '0px',
504-
'height': '300px'
499+
'height': '400px'
505500
});
506-
$chameleon.find('.slide-container').addClass("col-md-6 col-xs-12");
501+
$chameleon.find('.slide-container').addClass("col-md-7 col-xs-12");
507502

508503
$chameleon.find('.slide-container img').css({
509504
'margin-left': 'auto',
@@ -521,11 +516,11 @@
521516
'margin': '10px 0px'
522517
});
523518

524-
$chameleon.find('.info-panel-slide').addClass("col-xs-12 col-sm-6 col-md-4");
525-
$chameleon.find('.info-panel-slide .slide-number').addClass("col-xs-12 col-sm-1");
526-
$chameleon.find('.info-panel-slide .slide-thumbnail').addClass("col-xs-12 col-sm-6 col-md-4");
527-
$chameleon.find('.info-panel-slide .slide-time').addClass("col-xs-12 col-md-2");
528-
$chameleon.find('.info-panel-slide .slide-title-wrapper').addClass("col-xs-12 col-md-6");
519+
$chameleon.find('.info-panel-slide').addClass("col-xs-12 col-sm-6 col-lg-4");
520+
$chameleon.find('.info-panel-slide .slide-number').addClass("col-xs-12 col-md-1");
521+
$chameleon.find('.info-panel-slide .slide-thumbnail').addClass("col-xs-12 col-sm-6 col-lg-4");
522+
$chameleon.find('.info-panel-slide .slide-time').addClass("col-xs-2");
523+
$chameleon.find('.info-panel-slide .slide-title-wrapper').addClass("col-xs-12 col-lg-6");
529524

530525

531526
} else {
@@ -542,14 +537,15 @@
542537
});
543538

544539
$chameleon.find('.download-container').css({
545-
'width': '100%',
540+
'width': '50%',
546541
'height': '40px',
547542
'float': 'left',
548543
'line-height': '40px'
549544
});
550545

551-
$chameleon.find('.download-btn').css({
552-
'width': '30%'
546+
$chameleon.find('.video-title').css({
547+
'width': '50%',
548+
'float': 'left'
553549
})
554550

555551
$chameleon.find('.info-panel .slide-number, .info-panel .slide-time').css({
@@ -658,6 +654,7 @@
658654
responsive: false,
659655
player: 'html5',
660656
showMarkers: false,
661-
showCarousel: false
657+
showCarousel: false,
658+
showDownloadPanel: false,
662659
};
663660
}));

‎docs/chameleon.min.css

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

0 commit comments

Comments
 (0)