add css files

.gitignore

@@ -4,7 +4,7 @@ Homestead.yaml
 Homestead.json
 .env
 has_new_comment.js
-/public
+#/public
 /storage
 
 # Created by https://www.gitignore.io/api/hpstor,phpstorm

public/css/ContentFlowAddOn_carousel.css

@@ -0,0 +1,69 @@
+/*  ContentFlowAddOn_carousel, version 1.1 
+ *  (c) 2008 - 2010 Sebastian Kutsch
+ *  <http://www.jacksasylum.eu/ContentFlow/>
+ *
+ *  This file is distributed under the terms of the MIT license.
+ *  (see http://www.jacksasylum.eu/ContentFlow/LICENSE)
+ *
+ *--------------------------------------------------------------------------*/
+
+.ContentFlowAddOn_carousel {
+
+    /*border: 5px solid #767676;*/
+    margin: 0 25px;
+    padding: 25px 0px;
+    overflow: visible;
+    /*overflow: hidden;*/
+}
+
+.ContentFlowAddOn_carousel #preButton,
+.ContentFlowAddOn_carousel #nextButton {
+    position: absolute;
+    top: 50%;
+    margin-top: -25px;
+    width: 50px;
+    height: 50px;
+}
+
+.ContentFlowAddOn_carousel #preButton {
+    background: url(img/pre_h.png) center no-repeat;
+    left: -25px;
+    left: -28px;
+}
+
+* html .ContentFlowAddOn_carousel #preButton {
+    background-image: none;
+    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='img/pre_h.png');
+}
+
+.ContentFlowAddOn_carousel #preButton:hover {
+    background: url(img/pre_h.png) center no-repeat;
+}
+
+.ContentFlowAddOn_carousel #nextButton {
+    background: url(img/next_h.png) center no-repeat;
+    right: -25px;
+    right: -28px;
+}
+
+* html .ContentFlowAddOn_carousel #nextButton {
+    background-image: none;
+    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='img/next_h.png');
+}
+
+.ContentFlowAddOn_carousel #nextButton:hover {
+    background: url(img/next_h.png) center no-repeat;
+}
+
+/* ----- styling of items ----- */
+.ContentFlowAddOn_carousel .showCaption .item .caption {
+    display: block !important;
+}
+
+/* ----- global caption ----- */
+.ContentFlowAddOn_carousel .globalCaption {
+    margin-top: -3em;
+}
+
+/* ================================= */
+

public/css/ContentFlowAddOn_carousel.js

@@ -0,0 +1,131 @@
+/*  ContentFlowAddOn_carousel, version 1.1 
+ *  (c) 2008 - 2010 Sebastian Kutsch
+ *  <http://www.jacksasylum.eu/ContentFlow/>
+ *
+ *  This file is distributed under the terms of the MIT license.
+ *  (see http://www.jacksasylum.eu/ContentFlow/LICENSE)
+ */
+
+new ContentFlowAddOn ('carousel', {
+
+    conf: {
+        shownItems: 3,
+//        showCaption: true,
+        width: 100,
+        height: 100,
+        space:0.1
+    },
+
+
+    init: function() {
+        this.addStylesheet();
+    },
+
+    onloadInit: function (flow) {
+    },
+
+    afterContentFlowInit: function (flow) {
+       var SI = flow.getAddOnConf('carousel').shownItems;
+       var c = flow.Container;
+       var ac = flow.getAddOnConf('carousel')
+       if (ac.showCaption) {
+           $CF(flow.Flow).addClassName('showCaption');
+       }
+
+       var p = document.createElement('div');
+       p.id = "preButton";
+       var pre = function () {
+           var item = flow._activeItem;
+           for (var i=0; i< SI; i++) { item = item.pre; }
+           flow.moveToItem(item);
+       }
+       p.onclick = pre;
+       c.appendChild(p);
+
+       var n = document.createElement('div');
+       n.id = "nextButton";
+       var next = function () {
+           var item = flow._activeItem;
+           for (var i=0; i< SI; i++) { item = item.next; }
+           flow.moveToItem(item);
+       }
+       n.onclick = next;
+       c.appendChild(n);
+
+       flow.Flow.style.fontSize = 12*(flow.maxHeight / 150) +"px";
+       if (flow.Browser.IE) {
+           window.setTimeout(function () {flow.Flow.style.overflow = "hidden"}, 1000);
+       }
+       else {
+           flow.Flow.style.overflow = "hidden";
+       }
+
+       flow.setConfig({visibleItems: Math.ceil((flow.getAddOnConf('carousel').shownItems - 1)/2) + 1});
+    },
+
+	ContentFlowConf: {
+        scaleFactorLandscape: "max",      // scale factor of landscape images ('max' := height= maxItemHeight)
+        scaleFactorPortrait: "max",
+//        fixItemSize: true,
+        relativeItemPosition: "center", // align top/above, bottom/below, left, right, center of position coordinate
+        visibleItems: 2,               // how man item are visible on each side (-1 := auto)
+        reflectionHeight: 0,          // float (relative to original image height)
+
+
+        /* ==================== actions ==================== */
+        onclickInactiveItem : function (item) {
+            this.conf.onclickActiveItem(item);
+            return false;
+        },
+
+        /* ==================== calculations ==================== */
+
+        calcStepWidth: function(diff) {
+           var vI = this.conf.visibleItems;
+           var items = this.items.length;
+           items = items == 0 ? 1 : items;
+           var absDiff = Math.abs(diff);
+           if (absDiff > vI) {
+               if (diff > 0) {
+                   var stepwidth = diff - vI;
+               } else {
+                   var stepwidth = diff + vI;
+               }
+           } else if (vI >= items) {
+               var stepwidth = diff / items;
+           } else {
+               var c = this.getAddOnConf('carousel');
+               var f = 0.1 * 2/3 * c.shownItems * diff/absDiff;
+               var d = diff * ( vI / items);
+               var stepwidth = absDiff > 0.1 ? f : d*8; 
+           }
+           return stepwidth;
+        },
+
+
+       calcSize: function (item) {
+           var c = this.getAddOnConf('carousel');
+           var a = c.width / c.height;
+           //if (this.conf.verticalFlow) a = 1/a;
+           var h = 3/c.shownItems / a;
+           //if (this.conf.verticalFlow) h *= 2/3;
+           var w = h * a;
+           return {width: w, height: h};
+       },
+
+       calcCoordinates: function (item) {
+           var rP = item.relativePosition;
+           var c = this.getAddOnConf('carousel');
+           var w = item.size.width;
+           //if (this.conf.verticalFlow) w = item.size.height;
+           var x = rP*w/2*(1 + c.space) *this.conf.scaleFactor - w* (c.shownItems % 2 ? 0 : 0.5) / 1.4;
+           if (this.conf.verticalFlow) x *= 2*2/3;
+           var y = 0;
+
+           return {x: x, y: y};
+       }
+
+
+    }
+
+});