Merge branch 'gallery-shortcode' into develop

sixteenbit · Oct 16, 2014 · 64e2710 · 64e2710
2 parents 18a94bf + cac9185
commit 64e2710
Show file tree

Hide file tree

Showing 13 changed files with 713 additions and 111 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -87,7 +87,8 @@ module.exports = function(grunt) {
 		uglify: {
 			min: {
 				files: {
-					"<%= config.assets %>/js/editor.min.js": ["<%= config.assets %>/js/editor.js"]
+					"<%= config.assets %>/js/editor.min.js": ["<%= config.assets %>/js/editor.js"],
+          "<%= config.assets %>/js/jquery.flexslider.min.js": ["<%= config.bower %>/flexslider/jquery.flexslider.js"]
 				}
 			}
 		},
@@ -111,7 +112,8 @@ module.exports = function(grunt) {
 				},
 				files: {
 					src: [
-						'<%= config.assets %>/js/*.js'
+						'<%= config.assets %>/js/*.js',
+            '!<%= config.assets %>/js/editor.js',
 					]
 				}
 			}
@@ -139,7 +141,7 @@ module.exports = function(grunt) {
 				tasks: ['stylesheets','scripts','usebanner']
 			},
 			markup: {
-				files: ["../*.php"],
+				files: ["*.php"],
 			},
 			compass: {
 				files: ['scss/**/*'],

diff --git a/README.md b/README.md
@@ -1,86 +1,58 @@
 # Device Mockups
 
-Contributors: mrdink
-
-Donate link: https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=9CZ54JHH93S2Y
-
-Tags: portfolio, shortcode, device, mockup, iphone, responsive
-
-Requires at least: 3.0.1
-
-Tested up to: 4.0
-
-Stable tag: 1.3.0
-
-License: GPLv2 or later
-
-License URI: http://www.gnu.org/licenses/gpl-2.0.html
-
 > Simplify your mockups. Device Mockups generates shortcodes that display screenshots of your content in a responsive device.
 
 ## Description
 
 Show your work in high resolution mockup shortcodes. Wrap your images or YouTube or Vimeo videos in different device wrappers. There's also a simple dropdown in the editor to help select what device you would like to use. The devices will respond to the container it's in and will look great on mobile.
 
-### Attributes:
+For more information, including code examples and more, check out (http://dm.byjust.in).
+
+### Available shortcodes
+* [device][/device]
+* [browser][/browser]
+* [dm-gallery]
+
+### Device Attributes
+* type
 * color: black/white
 * orientation: portrait/landscape
 * stacked: open/closed
 * position: left/right
 * link
 * width
-* hide
-
-### Recommended Image Sizes:
-* iPhone 5 - 640×1136
-* iPad - 2048×1536
-* iMac - 1920x1200
-* Macbook Pro (Retina) - 1440x900
-* Galaxy S3 - 720x1280
-* Nexus 7 - 1920x1200
-* Surface - 1920 x 1080
-* Lumia 920 - 768 x 1280
+* hide: left/right
 
-Note that these are only recommendations.
-
-### Stacking:
-For stacking the devices on top of each other, add `stacked="open"` to the first device and `stacked="closed"` to the last device. You'll also need to apply the position of the inner device with `position="left"` or `position="right"`.
-
-### Example:
-`[device type="macbook" stacked="open"]CONTENT[/device][device type="iphone5" position="right" stacked="closed"]CONTENT[/device]`
-
-### Usage:
-`[device type="iphone5"]
-iPhone Content
-[/device]`
-
-`[device type="ipad"]
-iPad Content
-[/device]`
-
-`[device type="imac"]
-iMac Content
-[/device]`
-
-`[device type="macbook"]
-Macbook Content
-[/device]`
-
-`[device type="s3"]
-Galaxy S3 Content
-[/device]`
-
-`[device type="nexus7"]
-Nexus 7 Content
-[/device]`
-
-`[device type="surface"]
-Surface Content
-[/device]`
+### Browser Attributes
+* type
+* link
+* width
 
-`[device type="lumia920"]
-Lumia 920 Content
-[/device]`
+## Slider Attributes
+* order
+* orderby
+* id (post)
+* size (thumbnail, medium, large, or full)
+* include (id)
+* exclude (id)
+* css (inline styles to apply to the container)
+* options (custom js options)
+
+## Recommended Image Sizes
+* iPhone 6 – 1334×750
+* iPhone 6 Plus – 1920×1080
+* iPhone 5s – 1136×640
+* iPhone 5 – 640×1136
+* iPad – 2048×1536
+* iMac – 1920×1200
+* Macbook Pro – 1440×900
+* Galaxy S3 – 720×1280
+* Nexus 7 – 1920×1200
+* Surface – 1920×1080
+* Lumia 920 – 768×1280
+* Chrome – 1440×900
+* Firefox – 1440×900
+* Safari – 1440×900
 
 Please help by reporting any bugs/feature request at the link below.
 

diff --git a/assets/css/dm-style.css b/assets/css/dm-style.css
@@ -3,7 +3,7 @@ Plugin Name: Device Mockups
 Plugin URI: https://wordpress.org/plugins/device-mockups/
 Author: Justin Peacock
 Author URI: http://byjust.in/
-Version: 1.3.1
+Version: 1.4.0
 License: GNU General Public License v2.0
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 */
@@ -828,3 +828,196 @@ License URI: http://www.gnu.org/licenses/gpl-2.0.html
     .dm-browser[data-device="safari"] > .device > .screen {
       top: 5.9%;
       border: 1px solid #eeeeee; }
+
+/*
+ * jQuery FlexSlider v2.2.0
+ * http://www.woothemes.com/flexslider/
+ *
+ * Copyright 2012 WooThemes
+ * Free to use under the GPLv2 license.
+ * http://www.gnu.org/licenses/gpl-2.0.html
+ *
+ * Contributing author: Tyler Smith (@mbmufffin)
+ */
+/* Browser Resets
+*********************************/
+.flex-container a:active, .flexslider a:active, .flex-container a:focus, .flexslider a:focus {
+  outline: none; }
+
+.slides, .flex-control-nav, .flex-direction-nav {
+  margin: 0;
+  padding: 0;
+  list-style: none; }
+
+/* FlexSlider Necessary Styles
+*********************************/
+.flexslider {
+  margin: 0;
+  padding: 0; }
+  .flexslider .slides > li {
+    display: none;
+    -webkit-backface-visibility: hidden; }
+  .flexslider .slides img {
+    width: 100%;
+    display: block; }
+
+/* Hide the slides before the JS is loaded. Avoids image jumping */
+.flex-pauseplay span {
+  text-transform: capitalize; }
+
+/* Clearfix for the .slides element */
+.slides:after {
+  content: ".";
+  display: block;
+  clear: both;
+  visibility: hidden;
+  line-height: 0;
+  height: 0; }
+
+html[xmlns] .slides {
+  display: block; }
+
+* html .slides {
+  height: 1%; }
+
+/* No JavaScript Fallback */
+/* If you are not using another script, such as Modernizr, make sure you
+ * include js that eliminates this class on page load */
+.no-js .slides > li:first-child {
+  display: block; }
+
+/* FlexSlider Default Theme
+*********************************/
+.flexslider {
+  margin: 0 0 60px;
+  position: relative;
+  zoom: 1; }
+
+.flex-viewport {
+  max-height: 2000px;
+  -webkit-transition: all 1s ease;
+  -o-transition: all 1s ease;
+  transition: all 1s ease; }
+
+.loading .flex-viewport {
+  max-height: 300px; }
+
+.flexslider .slides {
+  zoom: 1; }
+
+.carousel li {
+  margin-right: 5px; }
+
+/* Direction Nav */
+.flex-direction-nav {
+  *height: 0; }
+  .flex-direction-nav a {
+    text-decoration: none;
+    display: block;
+    width: 40px;
+    height: 40px;
+    margin: -24px 0 0;
+    position: absolute;
+    top: 50%;
+    z-index: 10;
+    overflow: hidden;
+    opacity: 0;
+    cursor: pointer;
+    -webkit-transition: all 0.3s ease;
+    -o-transition: all 0.3s ease;
+    transition: all 0.3s ease; }
+  .flex-direction-nav .flex-prev {
+    height: 0;
+    width: 0;
+    border-top: 12px solid transparent;
+    border-bottom: 12px solid transparent;
+    border-right: 12px solid rgba(0, 0, 0, 0.4);
+    left: -50px; }
+  .flex-direction-nav .flex-next {
+    height: 0;
+    width: 0;
+    border-top: 12px solid transparent;
+    border-bottom: 12px solid transparent;
+    border-left: 12px solid rgba(0, 0, 0, 0.4);
+    right: -50px;
+    text-align: right; }
+
+.flexslider:hover .flex-prev {
+  opacity: 0.7;
+  left: 10px; }
+.flexslider:hover .flex-next {
+  opacity: 0.7;
+  right: 10px; }
+  .flexslider:hover .flex-next:hover {
+    opacity: 1; }
+.flexslider:hover .flex-prev:hover {
+  opacity: 1; }
+
+/* Control Nav */
+.flex-control-nav {
+  width: 100%;
+  position: absolute;
+  bottom: -40px;
+  text-align: center; }
+  .flex-control-nav li {
+    margin: 0 6px;
+    display: inline-block;
+    zoom: 1;
+    *display: inline; }
+
+.flex-control-paging li a {
+  width: 11px;
+  height: 11px;
+  display: block;
+  background: #666666;
+  background: rgba(0, 0, 0, 0.5);
+  cursor: pointer;
+  text-indent: -9999px;
+  -o-border-radius: 20px;
+  border-radius: 20px;
+  -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
+  -o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
+  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); }
+  .flex-control-paging li a:hover {
+    background: #333333;
+    background: rgba(0, 0, 0, 0.7); }
+  .flex-control-paging li a.flex-active {
+    background: black;
+    background: rgba(0, 0, 0, 0.9);
+    cursor: default; }
+
+.flex-control-thumbs {
+  margin: 5px 0 0;
+  position: static;
+  overflow: hidden; }
+  .flex-control-thumbs li {
+    width: 25%;
+    float: left;
+    margin: 0; }
+  .flex-control-thumbs img {
+    width: 100%;
+    display: block;
+    opacity: 0.7;
+    cursor: pointer; }
+    .flex-control-thumbs img:hover {
+      opacity: 1; }
+  .flex-control-thumbs .flex-active {
+    opacity: 1;
+    cursor: default; }
+
+.flex-caption {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: 0;
+  padding: 10px;
+  background-color: rgba(0, 0, 0, 0.75); }
+
+@media screen and (max-width: 860px) {
+  .flex-direction-nav .flex-prev {
+    opacity: 1;
+    left: 10px; }
+  .flex-direction-nav .flex-next {
+    opacity: 1;
+    right: 10px; } }