")
- .css({
- width: "100%",
- visibility: "hidden",
- "font-size": 0,
- "line-height": 0
- })
- .append(a.find("li:first img:first")
- .clone()
- .css({
- width: "100%"
- }))
- .prependTo(a);
- l.css({
- position: "absolute",
- top: 0,
- animation: "none",
- "-moz-animation": "none",
- "-webkit-animation": "none"
- });
- var m = a.find("li");
- var v = m.length;
-
- function i(D) {
- return ((D || 0) + v) % v
- }
- var C = navigator.userAgent;
- if ((e.browser.msie && parseInt(e.browser.version, 10) < 8) || (/Safari/.test(C))) {
- var b = Math.pow(10, Math.ceil(Math.LOG10E * Math.log(v)));
- l.css({
- width: b + "00%"
- });
- m.css({
- width: 100 / b + "%"
- })
- } else {
- l.css({
- width: v + "00%",
- display: "table"
- });
- m.css({
- display: "table-cell",
- "float": "none",
- width: "auto"
- })
- }
- u(0);
- var k = [];
- m.each(function (D) {
- var F = e(">img:first,>a:first,>div:first", this)
- .get(0);
- var G = e("
");
- for (var E = 0; E < this.childNodes.length;) {
- if (this.childNodes[E] != F) {
- G.append(this.childNodes[E])
- } else {
- E++
- }
- }
- if (!e(this)
- .data("descr")) {
- e(this)
- .data("descr", G.html()
- .replace(/^\s+|\s+$/g, ""))
- }
- e(this)
- .css({
- "font-size": 0
- });
- k[k.length] = e(">a>img", this)
- .get(0) || e(">*", this)
- .get(0)
- });
- k = e(k);
- k.css("visibility", "visible");
-
- function f(F, D, E) {
- this.go = function (G) {
- E.find("ul")
- .stop(true)
- .animate({
- left: (G ? -G + "00%" : (/Safari/.test(navigator.userAgent) ? "0%" : 0))
- }, F.duration, "easeInOutExpo");
- return G
- }
- }
- var o = new f(d, k, a);
- var c = 0;
-
- function r(F, E, D) {
- if (isNaN(F)) {
- F = c + 1
- }
- F = i(F);
- if (c == F) {
- return
- }
- s(F, E, D)
- }
- function s(F, E, D) {
- var F = o.go(F, c, E, D);
- if (F < 0) {
- return
- }
- q(F);
- j(m[F]);
- c = F;
- z()
- }
- var B = h.find(".ws_bullets");
-
- function q(D) {
- if (B.length) {
- n(D)
- }
- }
- var p;
-
- function z(D) {
- w();
- if (d.autoPlay) {
- p = setTimeout(function () {
- r()
- }, d.delay + (D ? 0 : d.duration))
- }
- }
- function w() {
- if (p) {
- clearTimeout(p)
- }
- p = null
- }
- function y(G, F, E, D) {
- w();
- G.preventDefault();
- r(F, E, D);
- z()
- }
- if (d.controls) {
- var x = e('
' + d.next + " ");
- var g = e('
' + d.prev + " ");
- h.append(x);
- h.append(g);
- x.bind("click", function (D) {
- y(D, c + 1)
- });
- g.bind("click", function (D) {
- y(D, c - 1)
- })
- }
- function A() {
- h.find(".ws_bullets a")
- .click(function (L) {
- y(L, e(this)
- .index())
- });
- if (B.length) {
- var F = B.find(">div");
- var K = e("a", B);
- var I = K.find("IMG");
- if (I.length) {
- var H = e('
')
- .appendTo(F);
- var E = e("
")
- .css({
- width: I.length + 1 + "00%"
- })
- .appendTo(e("
")
- .appendTo(H));
- I.appendTo(E);
- e("
")
- .appendTo(H);
- var G = -1;
-
- function J(N) {
- if (N < 0) {
- N = 0
- }
- e(K.get(G))
- .removeClass("ws_overbull");
- e(K.get(N))
- .addClass("ws_overbull");
- H.show();
- var O = {
- left: K.get(N)
- .offsetLeft - H.width() / 2,
- "margin-top": K.get(N)
- .offsetTop - K.get(0)
- .offsetTop + "px",
- "margin-bottom": -K.get(N)
- .offsetTop + K.get(K.length - 1)
- .offsetTop + "px"
- };
- var M = I.get(N);
- var L = {
- left: -M.offsetLeft + (e(M)
- .outerWidth(true) - e(M)
- .outerWidth()) / 2
- };
- if (G < 0) {
- H.css(O);
- E.css(L)
- } else {
- if (!document.all) {
- O.opacity = 1
- }
- H.stop()
- .animate(O, "fast");
- E.stop()
- .animate(L, "fast")
- }
- G = N
- }
- K.hover(function () {
- J(e(this)
- .index())
- });
- var D;
- F.hover(function () {
- if (D) {
- clearTimeout(D);
- D = 0
- }
- J(G)
- }, function () {
- K.removeClass("ws_overbull");
- if (document.all) {
- if (!D) {
- D = setTimeout(function () {
- H.hide();
- D = 0
- }, 400)
- }
- } else {
- H.stop()
- .animate({
- opacity: 0
- }, {
- duration: "fast",
- complete: function () {
- H.hide()
- }
- })
- }
- });
- F.click(function (L) {
- y(L, e(L.target)
- .index())
- })
- }
- }
- }
- function n(D) {
- e("A", B)
- .each(function (E) {
- if (E == D) {
- e(this)
- .addClass("ws_selbull")
- } else {
- e(this)
- .removeClass("ws_selbull")
- }
- })
- }
- h.append("
");
-
- function j(E) {
- var G = e("img", E)
- .attr("title");
- var F = e(E)
- .data("descr");
- var D = e(".ws-title", h);
- D.stop(1, 1)
- .stop(1, 1)
- .fadeOut(1000 / 3, function () {
- if (G || F) {
- D.html((G ? "
" + G + " " : "") + (F ? "
" + F + "
" : ""));
- D.fadeIn(400, function () {
- if (e.browser.msie) {
- e(this)
- .get(0)
- .style.removeAttribute("filter")
- }
- })
- }
- })
- }
- if (B.length) {
- A()
- }
- q(c);
- j(m[c]);
- z(1);
- return this
-};
-jQuery.extend(jQuery.easing, {
- easeInOutExpo: function (e, f, a, h, g) {
- if (f == 0) {
- return a
- }
- if (f == g) {
- return a + h
- }
- if ((f /= g / 2) < 1) {
- return h / 2 * Math.pow(2, 10 * (f - 1)) + a
- }
- return h / 2 * (-Math.pow(2, - 10 * --f) + 2) + a
- }
-});
diff --git a/static/scss/_mixins.scss b/static/scss/_mixins.scss
new file mode 100644
index 0000000..a6102bc
--- /dev/null
+++ b/static/scss/_mixins.scss
@@ -0,0 +1,21 @@
+@mixin transition($prop, $time, $easing){
+ -webkit-transition: $prop $time $easing;
+ -moz-transition: $prop $time $easing;
+ -ms-transition: $prop $time $easing;
+ -o-transition: $prop $time $easing;
+ transition: $prop $time $easing;
+}
+
+@mixin rounded($value){
+ -webkit-border-radius: $value;
+ -moz-border-radius: $value;
+ border-radius: $value;
+}
+
+@mixin transform($prop){
+ -webkit-transition: $prop;
+ -moz-transition: $prop;
+ -ms-transition: $prop;
+ -o-transition: $prop;
+ transition: $prop;
+}
diff --git a/static/scss/_theme.scss b/static/scss/_theme.scss
new file mode 100644
index 0000000..ab1e191
--- /dev/null
+++ b/static/scss/_theme.scss
@@ -0,0 +1,63 @@
+
+.owl-theme {
+ // Styling Next and Prev buttons
+ .owl-nav {
+ margin-top: 10px;
+ text-align: center;
+ -webkit-tap-highlight-color: transparent;
+
+ [class*='owl-'] {
+ color: $nav-color;
+ font-size: $nav-font-size;
+ margin: $nav-margin;
+ padding: $nav-padding;
+ background: $nav-background;
+ display: inline-block;
+ cursor: pointer;
+ @include rounded($nav-rounded);
+
+ &:hover {
+ background: $nav-background-hover;
+ color:$nav-color-hover;
+ text-decoration: none;
+ }
+ }
+ .disabled {
+ opacity: $nav-disabled-opacity;
+ cursor: default;
+ }
+ }
+
+ // Styling dots
+ .owl-nav.disabled + .owl-dots {
+ margin-top: 10px;
+ }
+ .owl-dots {
+ text-align: center;
+ -webkit-tap-highlight-color: transparent;
+
+ .owl-dot {
+ display: inline-block;
+ zoom: 1;
+ *display: inline;
+
+ span {
+ width: $dot-width;
+ height: $dot-height;
+ margin: $dot-margin;
+ background: $dot-background;
+ display: block;
+ -webkit-backface-visibility: visible;
+ @include transition(opacity, 200ms, ease);
+ @include rounded($dot-rounded);
+ }
+
+ &.active,
+ &:hover {
+ span {
+ background: $dot-background-active;
+ }
+ }
+ }
+ }
+}
diff --git a/static/scss/owl.animate.scss b/static/scss/owl.animate.scss
new file mode 100644
index 0000000..b1ea872
--- /dev/null
+++ b/static/scss/owl.animate.scss
@@ -0,0 +1,40 @@
+/*
+ * Owl Carousel - Animate Plugin
+ */
+.owl-carousel{
+ .animated {
+ -webkit-animation-duration: 1000ms;
+ animation-duration: 1000ms;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ }
+ .owl-animated-in {
+ z-index: 0;
+ }
+ .owl-animated-out {
+ z-index: 1;
+ }
+ .fadeOut {
+ -webkit-animation-name: fadeOut;
+ animation-name: fadeOut;
+ }
+}
+
+@-webkit-keyframes fadeOut {
+ 0% {
+ opacity: 1;
+ }
+
+ 100% {
+ opacity: 0;
+ }
+}
+@keyframes fadeOut {
+ 0% {
+ opacity: 1;
+ }
+
+ 100% {
+ opacity: 0;
+ }
+}
diff --git a/static/scss/owl.autoheight.scss b/static/scss/owl.autoheight.scss
new file mode 100644
index 0000000..1375a16
--- /dev/null
+++ b/static/scss/owl.autoheight.scss
@@ -0,0 +1,9 @@
+/*
+ * Owl Carousel - Auto Height Plugin
+ */
+
+@import 'mixins';
+
+.owl-height {
+ @include transition(height, 500ms, ease-in-out)
+}
diff --git a/static/scss/owl.carousel.scss b/static/scss/owl.carousel.scss
new file mode 100644
index 0000000..1eff06c
--- /dev/null
+++ b/static/scss/owl.carousel.scss
@@ -0,0 +1,108 @@
+/*
+ * Core Owl Carousel CSS File
+ */
+.owl-carousel {
+ display: none;
+ width: 100%;
+ -webkit-tap-highlight-color: transparent;
+ /* position relative and z-index fix webkit rendering fonts issue */
+ position: relative;
+ z-index: 1;
+
+ .owl-stage {
+ position: relative;
+ -ms-touch-action: pan-Y;
+ }
+
+ .owl-stage:after {
+ content: ".";
+ display: block;
+ clear: both;
+ visibility: hidden;
+ line-height: 0;
+ height: 0;
+ }
+
+ .owl-stage-outer {
+ position: relative;
+ overflow: hidden;
+ /* fix for flashing background */
+ -webkit-transform: translate3d(0px, 0px, 0px);
+ }
+
+ .owl-item {
+ position: relative;
+ min-height: 1px;
+ float: left;
+ -webkit-backface-visibility: hidden;
+ -webkit-tap-highlight-color: transparent;
+ -webkit-touch-callout: none;
+ }
+ .owl-item img {
+ display: block;
+ width: 100%;
+ -webkit-transform-style: preserve-3d;
+ }
+
+ .owl-nav.disabled,
+ .owl-dots.disabled {
+ display: none;
+ }
+
+ .owl-nav .owl-prev,
+ .owl-nav .owl-next,
+ .owl-dot {
+ cursor: pointer;
+ cursor: hand;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ }
+
+ &.owl-loaded {
+ display: block;
+ }
+
+ &.owl-loading {
+ opacity: 0;
+ display: block;
+ }
+
+ &.owl-hidden {
+ opacity: 0;
+ }
+
+ &.owl-refresh .owl-item {
+ display: none;
+ }
+
+ &.owl-drag .owl-item {
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ }
+
+ &.owl-grab {
+ cursor: move;
+ cursor: -webkit-grab;
+ cursor: -o-grab;
+ cursor: -ms-grab;
+ cursor: grab;
+ }
+
+ &.owl-rtl {
+ direction: rtl;
+ }
+
+ &.owl-rtl .owl-item {
+ float: right;
+ }
+}
+
+/* No Js */
+.no-js .owl-carousel {
+ display: block;
+}
diff --git a/static/scss/owl.lazyload.scss b/static/scss/owl.lazyload.scss
new file mode 100644
index 0000000..0a5405b
--- /dev/null
+++ b/static/scss/owl.lazyload.scss
@@ -0,0 +1,18 @@
+/*
+ * Owl Carousel - Lazy Load Plugin
+ */
+
+@import 'mixins';
+
+.owl-carousel {
+ .owl-item {
+ .owl-lazy {
+ opacity: 0;
+ @include transition(opacity, 400ms, ease);
+ }
+ img{
+ transform-style: preserve-3d;
+ }
+ }
+}
+
diff --git a/static/scss/owl.theme.default.scss b/static/scss/owl.theme.default.scss
new file mode 100644
index 0000000..815dd0a
--- /dev/null
+++ b/static/scss/owl.theme.default.scss
@@ -0,0 +1,31 @@
+/*
+ * Default theme - Owl Carousel CSS File
+ */
+
+$color-base: #869791;
+$color-white: #FFF;
+$color-gray: #D6D6D6;
+
+//nav
+
+$nav-color: $color-white;
+$nav-color-hover: $color-white;
+$nav-font-size: 14px;
+$nav-rounded: 3px;
+$nav-margin: 5px;
+$nav-padding: 4px 7px;
+$nav-background: $color-gray;
+$nav-background-hover: $color-base;
+$nav-disabled-opacity: 0.5;
+
+//dots
+
+$dot-width: 10px;
+$dot-height: 10px;
+$dot-rounded: 30px;
+$dot-margin: 5px 7px;
+$dot-background: $color-gray;
+$dot-background-active: $color-base;
+
+@import 'mixins';
+@import 'theme';
diff --git a/static/scss/owl.theme.green.scss b/static/scss/owl.theme.green.scss
new file mode 100644
index 0000000..ef6783f
--- /dev/null
+++ b/static/scss/owl.theme.green.scss
@@ -0,0 +1,31 @@
+/*
+ * Green theme - Owl Carousel CSS File
+ */
+
+$color-base: #4DC7A0;
+$color-white: #FFF;
+$color-gray: #D6D6D6;
+
+//nav
+
+$nav-color: $color-white;
+$nav-color-hover: $color-white;
+$nav-font-size: 14px;
+$nav-rounded: 3px;
+$nav-margin: 5px;
+$nav-padding: 4px 7px;
+$nav-background: $color-gray;
+$nav-background-hover: $color-base;
+$nav-disabled-opacity: 0.5;
+
+//dots
+
+$dot-width: 10px;
+$dot-height: 10px;
+$dot-rounded: 30px;
+$dot-margin: 5px 7px;
+$dot-background: $color-gray;
+$dot-background-active: $color-base;
+
+@import 'mixins';
+@import 'theme';
diff --git a/static/scss/owl.video.scss b/static/scss/owl.video.scss
new file mode 100644
index 0000000..833ee85
--- /dev/null
+++ b/static/scss/owl.video.scss
@@ -0,0 +1,51 @@
+/*
+ * Owl Carousel - Video Plugin
+ */
+
+@import 'mixins';
+
+.owl-carousel{
+ .owl-video-wrapper {
+ position: relative;
+ height: 100%;
+ background: #000;
+ }
+ .owl-video-play-icon {
+ position: absolute;
+ height: 80px;
+ width: 80px;
+ left: 50%;
+ top: 50%;
+ margin-left: -40px;
+ margin-top: -40px;
+ background: url("owl.video.play.png") no-repeat;
+ cursor: pointer;
+ z-index: 1;
+ -webkit-backface-visibility: hidden;
+ @include transition(scale, 100ms, ease);
+ }
+ .owl-video-play-icon:hover {
+ @include transform(scale(1.3, 1.3));
+ }
+ .owl-video-playing .owl-video-tn,
+ .owl-video-playing .owl-video-play-icon {
+ display: none;
+ }
+ .owl-video-tn {
+ opacity: 0;
+ height: 100%;
+ background-position: center center;
+ background-repeat: no-repeat;
+ -webkit-background-size: contain;
+ -moz-background-size: contain;
+ -o-background-size: contain;
+ background-size: contain;
+ @include transition(opacity, 400ms, ease);
+ }
+ .owl-video-frame {
+ position: relative;
+ z-index: 1;
+ height: 100%;
+ width: 100%;
+ }
+}
diff --git a/views/product_images.xml b/views/product_images.xml
index 1cae8d0..ba5114f 100644
--- a/views/product_images.xml
+++ b/views/product_images.xml
@@ -12,7 +12,7 @@
-
+
@@ -30,7 +30,7 @@
-
+
diff --git a/views/theme.xml b/views/theme.xml
new file mode 100644
index 0000000..6130598
--- /dev/null
+++ b/views/theme.xml
@@ -0,0 +1,84 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/views/website_product_image_carousel.xml b/views/website_product_image_carousel.xml
index 05cdf80..210fb29 100644
--- a/views/website_product_image_carousel.xml
+++ b/views/website_product_image_carousel.xml
@@ -3,11 +3,17 @@
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
TODO: master
===================
-Add multiple image slideshow to over-ride current single image display on product view and category view pages.