Merge pull request #514 from Alexanderlacuna/replace-colorbox

Replace colorbox lib

2 files changed, 240 insertions, 2 deletions

diff --git a/wqflask/wqflask/static/new/css/colorbox.css b/wqflask/wqflask/static/new/css/colorbox.css
new file mode 100644
index 00000000..8b9fb388
--- /dev/null
+++ b/wqflask/wqflask/static/new/css/colorbox.css
@@ -0,0 +1,238 @@
+/*
+    Colorbox Core Style:
+    The following CSS is consistent between example themes and should not be altered.
+*/
+#colorbox,
+#cboxOverlay,
+#cboxWrapper {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 9999;
+    overflow: hidden;
+}
+
+#cboxOverlay {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+}
+
+#cboxMiddleLeft,
+#cboxBottomLeft {
+    clear: left;
+}
+
+#cboxContent {
+    position: relative;
+}
+
+#cboxLoadedContent {
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+}
+
+#cboxTitle {
+    margin: 0;
+}
+
+#cboxLoadingOverlay,
+#cboxLoadingGraphic {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+#cboxPrevious,
+#cboxNext,
+#cboxClose,
+#cboxSlideshow {
+    cursor: pointer;
+}
+
+.cboxPhoto {
+    float: left;
+    margin: auto;
+    border: 0;
+    display: block;
+    max-width: none;
+    -ms-interpolation-mode: bicubic;
+}
+
+.cboxIframe {
+    width: 100%;
+    height: 100%;
+    display: block;
+    border: 0;
+}
+
+#colorbox,
+#cboxContent,
+#cboxLoadedContent {
+    box-sizing: content-box;
+    -moz-box-sizing: content-box;
+    -webkit-box-sizing: content-box;
+}
+
+/* 
+    User Style:
+    Change the following styles to modify the appearance of Colorbox.  They are
+    ordered & tabbed in a way that represents the nesting of the generated HTML.
+*/
+#cboxOverlay {
+    background: #fff;
+}
+
+#colorbox {
+    outline: 0;
+}
+
+#cboxTopLeft {
+    width: 25px;
+    height: 25px;
+    background: url(images/border1.png) no-repeat 0 0;
+}
+
+#cboxTopCenter {
+    height: 25px;
+    background: url(images/border1.png) repeat-x 0 -50px;
+}
+
+#cboxTopRight {
+    width: 25px;
+    height: 25px;
+    background: url(images/border1.png) no-repeat -25px 0;
+}
+
+#cboxBottomLeft {
+    width: 25px;
+    height: 25px;
+    background: url(images/border1.png) no-repeat 0 -25px;
+}
+
+#cboxBottomCenter {
+    height: 25px;
+    background: url(images/border1.png) repeat-x 0 -75px;
+}
+
+#cboxBottomRight {
+    width: 25px;
+    height: 25px;
+    background: url(images/border1.png) no-repeat -25px -25px;
+}
+
+#cboxMiddleLeft {
+    width: 25px;
+    background: url(images/border2.png) repeat-y 0 0;
+}
+
+#cboxMiddleRight {
+    width: 25px;
+    background: url(images/border2.png) repeat-y -25px 0;
+}
+
+#cboxContent {
+    background: #fff;
+    overflow: hidden;
+}
+
+.cboxIframe {
+    background: #fff;
+}
+
+#cboxError {
+    padding: 50px;
+    border: 1px solid #ccc;
+}
+
+#cboxLoadedContent {
+    margin-bottom: 20px;
+}
+
+#cboxTitle {
+    position: absolute;
+    bottom: 0px;
+    left: 0;
+    text-align: center;
+    width: 100%;
+    color: #999;
+}
+
+#cboxCurrent {
+    position: absolute;
+    bottom: 0px;
+    left: 100px;
+    color: #999;
+}
+
+#cboxLoadingOverlay {
+    background: #fff url(images/loading.gif) no-repeat 5px 5px;
+}
+
+/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
+#cboxPrevious,
+#cboxNext,
+#cboxSlideshow,
+#cboxClose {
+    border: 0;
+    padding: 0;
+    margin: 0;
+    overflow: visible;
+    width: auto;
+    background: none;
+}
+
+/* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
+#cboxPrevious:active,
+#cboxNext:active,
+#cboxSlideshow:active,
+#cboxClose:active {
+    outline: 0;
+}
+
+#cboxSlideshow {
+    position: absolute;
+    bottom: 0px;
+    right: 42px;
+    color: #444;
+}
+
+#cboxPrevious {
+    position: absolute;
+    bottom: 0px;
+    left: 0;
+    color: #444;
+}
+
+#cboxNext {
+    position: absolute;
+    bottom: 0px;
+    left: 63px;
+    color: #444;
+}
+
+#cboxClose {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    display: block;
+    color: #444;
+}
+
+/*
+  The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
+  when an alpha filter (opacity change) is set on the element or ancestor element.  This style is not applied to or needed in IE9.
+  See: http://jacklmoore.com/notes/ie-transparency-problems/
+*/
+.cboxIE #cboxTopLeft,
+.cboxIE #cboxTopCenter,
+.cboxIE #cboxTopRight,
+.cboxIE #cboxBottomLeft,
+.cboxIE #cboxBottomCenter,
+.cboxIE #cboxBottomRight,
+.cboxIE #cboxMiddleLeft,
+.cboxIE #cboxMiddleRight {
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF, endColorstr=#00FFFFFF);
+}
\ No newline at end of file
diff --git a/wqflask/wqflask/templates/base.html b/wqflask/wqflask/templates/base.html
index faa59deb..95a2c39e 100644
--- a/wqflask/wqflask/templates/base.html
+++ b/wqflask/wqflask/templates/base.html
@@ -17,7 +17,7 @@
     <link REL="stylesheet" TYPE="text/css" href="/static/packages/bootstrap/css/bootstrap.css" />
     <link REL="stylesheet" TYPE="text/css" href="/static/packages/bootstrap/css/non-responsive.css" />
     <link REL="stylesheet" TYPE="text/css" href="/static/packages/bootstrap/css/docs.css" />
-    <link rel="stylesheet" type="text/css" href="/static/packages/colorbox/example4/colorbox.css"  />
+    <link rel="stylesheet" type="text/css" href="/static/new/css/colorbox.css"  />
     <!--<link rel="stylesheet" type="text/css" href="/static/new/css/main.css"  />-->
     <link rel="stylesheet" type="text/css" href="/static/new/css/parsley.css"  />
 
@@ -254,7 +254,7 @@
     <script type="text/javascript" src="/static/new/js_external/json2.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js" type="text/javascript"></script>
 
-    <script language="javascript" type="text/javascript" src="/static/packages/colorbox/jquery.colorbox.js"></script>
+    <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='colorbox/jquery.colorbox-min.js') }}"></script>
     <!--<script type="text/javascript" src="/static/new/javascript/login.js"></script>-->
 
     <script type="text/javascript" src="/static/new/js_external/parsley.min.js"></script>