diff --git a/docs/css/docs.css b/docs/css/docs.css index 9b84854..80db9a0 100644 --- a/docs/css/docs.css +++ b/docs/css/docs.css @@ -4,8 +4,12 @@ .header { background-color: #2b2b2b; - background-image: linear-gradient(45deg, hsla(0,0%,0%,.25) 25%, transparent 25%, transparent 75%, hsla(0,0%,0%,.25) 75%, hsla(0,0%,0%,.25)), - linear-gradient(45deg, hsla(0,0%,0%,.25) 25%, transparent 25%, transparent 75%, hsla(0,0%,0%,.25) 75%, hsla(0,0%,0%,.25)); + background-image: -webkit-linear-gradient(bottom left, hsla(0, 0%, 0%, .25) 25%, transparent 25%, transparent 75%, hsla(0, 0%, 0%, .25) 75%, hsla(0, 0%, 0%, .25)), + -webkit-linear-gradient(bottom left, hsla(0, 0%, 0%, .25) 25%, transparent 25%, transparent 75%, hsla(0, 0%, 0%, .25) 75%, hsla(0, 0%, 0%, .25)); + background-image: -o-linear-gradient(bottom left, hsla(0, 0%, 0%, .25) 25%, transparent 25%, transparent 75%, hsla(0, 0%, 0%, .25) 75%, hsla(0, 0%, 0%, .25)), + -o-linear-gradient(bottom left, hsla(0, 0%, 0%, .25) 25%, transparent 25%, transparent 75%, hsla(0, 0%, 0%, .25) 75%, hsla(0, 0%, 0%, .25)); + background-image: linear-gradient(to top right, hsla(0, 0%, 0%, .25) 25%, transparent 25%, transparent 75%, hsla(0, 0%, 0%, .25) 75%, hsla(0, 0%, 0%, .25)), + linear-gradient(to top right, hsla(0, 0%, 0%, .25) 25%, transparent 25%, transparent 75%, hsla(0, 0%, 0%, .25) 75%, hsla(0, 0%, 0%, .25));; background-position: 0 0, 2px 2px; background-size: 4px 4px; } @@ -37,8 +41,6 @@ border-color: #aaa; } - - /* prettify style */ pre ul, diff --git a/docs/css/magnify-simple-theme.css b/docs/css/magnify-simple-theme.css new file mode 100644 index 0000000..ee653b5 --- /dev/null +++ b/docs/css/magnify-simple-theme.css @@ -0,0 +1,30 @@ +.magnify-modal { + box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.3); +} + +.magnify-header .magnify-toolbar { + background-color: rgba(0, 0, 0, .5); +} + +.magnify-stage { + top: 0; + left: 0; + bottom: 0; + right: 0; + border-width: 0; +} + +.magnify-footer .magnify-toolbar { + background-color: rgba(0, 0, 0, .5); + border-top-left-radius: 5px; + border-top-right-radius: 5px; +} + +.magnify-header, +.magnify-footer { + pointer-events: none; +} + +.magnify-button { + pointer-events: auto; +} diff --git a/docs/css/magnify-white-theme.css b/docs/css/magnify-white-theme.css new file mode 100644 index 0000000..143c6b6 --- /dev/null +++ b/docs/css/magnify-white-theme.css @@ -0,0 +1,62 @@ +.magnify-modal { + box-sizing: border-box; + background-color: rgba(255, 255, 255, .85); + box-shadow: 0 0 1px 1px #fff, 0 0 0 2px rgba(0, 0, 0, 0.3), 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 1px 10px 2px rgba(0, 0, 0, 0.3); + border-radius: 4px; +} + +.magnify-header { + height: 30px; +} + +.magnify-title { + padding: 8px 10px; +} + +.magnify-stage { + top: 30px; + right: 5px; + left: 5px; + background-color: #fff; + border-color: #666; +} + +.magnify-title { + color: #333 +} + +.magnify-header .magnify-toolbar { + margin-right: 5px; +} + +.magnify-header .magnify-button { + height: 22px; + padding: 0; + background-color: #eee; + color: #fff; + text-shadow: 0 0 1px #000; +} + +.magnify-header .magnify-button:hover { + background-color: #ccc; +} + +.magnify-header .magnify-button-close { + background-color: #ff6e6e; +} + +.magnify-header .magnify-button-close:hover { + background-color: #ff4545; +} + +.magnify-footer .magnify-button { + color: #666; +} + +.magnify-footer .magnify-button:hover { + color: #333; +} + +.magnify-loader { + background: transparent; +} diff --git a/docs/index.html b/docs/index.html index 1569519..4842ddd 100644 --- a/docs/index.html +++ b/docs/index.html @@ -36,294 +36,302 @@

Magnify

Examples

-

All the pictures come from Flickr website, copyright to the original author.

-

1.Example with default options

-
- - - - - - - - - -
-
-
Options Generator
-
-
-
-
- -
-
- - +

All the pictures come from Flickr website, copyright to the original author. You can play the following example by changing + themes and options in the playground. Besides, + examples collection can be found on CodePen. +

+
+
+ +
+
+ + + + + + + + + +
+
+
Options Generator
+
+
+
+
+ +
+
+ + +
-
-
- -
-
- - +
+ +
+
+ + +
-
-
- -
-
- - +
+ +
+
+ + +
-
-
- -
-
- - +
+ +
+
+ + +
-
-
- -
-
- - +
+ +
+
+ + +
-
-
- -
-
- - +
+ +
+
+ + +
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- +
+ +
+
+ + +
+
-
-
- -
- +
+ +
+
+ + +
+
-
-
- -
- +
+ +
+
+ + +
+
-
-
-
-
- -
-
- - +
+ +
+
-
- - +
+
+ +
+
-
- - +
+
+ +
+
-
- -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - +
+
+ +
+
-
- - -
-
- - +
+
+ +
+
-
-
- -
-
- - +
+ +
+
-
-
- -
-
- - +
+ +
+
+ + +
+
+ + +
+
+ + +
-
-
- -
-
- - +
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
-
-
- -
-
- - +
+ +
+
+ + +
-
-
- -
-
- - +
+ +
+
+ + +
-
-
- -
- + +
+ +
+ +
-
-
- -
- {...} +
+ +
+ {...} +
-
-
- -
- {...} +
+ +
+ {...} +
-

2.Example with simple UI style

-

Play with - this example on CodePen. -

-

3.Example with white UI style

-

Play with - this example on CodePen. -

Usage

The usage of magnify is very simple.

@@ -819,33 +827,46 @@

Bugs & Contributin window.prettyPrint && prettyPrint(); var defaultOpts = { - draggable: true, - resizable: true, - movable: true, - keyboard: true, - title: true, - modalWidth: 320, - modalHeight: 320, - fixedContent: true, - fixedModalSize: false, - initMaximized: false, - gapThreshold: 0.02, - ratioThreshold: 0.1, - minRatio: 0.1, - maxRatio: 16, - headToolbar: ['maximize', 'close'], - footToolbar: ['zoomIn', 'zoomOut', 'prev', 'fullscreen', 'next', 'actualSize', 'rotateRight'], - multiInstances: true, - initEvent: 'click', - initAnimation: true, - fixedModalPos: false - }; + draggable: true, + resizable: true, + movable: true, + keyboard: true, + title: true, + modalWidth: 320, + modalHeight: 320, + fixedContent: true, + fixedModalSize: false, + initMaximized: false, + gapThreshold: 0.02, + ratioThreshold: 0.1, + minRatio: 0.1, + maxRatio: 16, + headToolbar: ['maximize', 'close'], + footToolbar: ['zoomIn', 'zoomOut', 'prev', 'fullscreen', 'next', 'actualSize', 'rotateRight'], + multiInstances: true, + initEvent: 'click', + initAnimation: true, + fixedModalPos: false + }; var vm = new Vue({ - el: '#optionsGenerator', + el: '#playground', data: { options: defaultOpts }, + methods: { + changeTheme: function (e) { + if (e.target.value === '0') { + $('.magnify-theme').remove(); + } else if (e.target.value === '1') { + $('.magnify-theme').remove(); + $('head').append(''); + } else if (e.target.value === '2') { + $('.magnify-theme').remove(); + $('head').append(''); + } + } + }, updated: function () { $('[data-magnify]').magnify(this.options); }