Skip to content

Instantly share code, notes, and snippets.

@jmacias

jmacias/index.html

Forked from myguidingstar-zz/index.html
Last active August 29, 2015 14:15
Show Gist options
  • Save jmacias/cd0e771e1dcce7d6d2a2 to your computer and use it in GitHub Desktop.
Save jmacias/cd0e771e1dcce7d6d2a2 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<html>
<head>
<style type="text/css">
.slider{
margin:50px auto;
width:500px;
height:300px;
overflow:hidden;
position:relative;
border:5px solid #eaeaea;
/*box-shadow*/
-webkit-box-shadow:1px 1px 5px rgba(0,0,0,0.7);
-moz-box-shadow:1px 1px 5px rgba(0,0,0,0.7);
box-shadow:1px 1px 5px rgba(0,0,0,0.7);
}
/* HIDE ALL OUTSIDE OF THE SLIDER */
.photo{
position:absolute;
/*animation-timing-function*/
-webkit-animation-timing-function:ease;
-moz-animation-timing-function:ease;
-ms-animation-timing-function:ease;
-o-animation-timing-function:ease;
animation-timing-function:ease;
/*animation-iteration-count*/
-webkit-animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite;
-ms-animation-iteration-count:infinite;
-o-animation-iteration-count:infinite;
animation-iteration-count:infinite;
/*animation-name*/
-webkit-animation-name:round;
-moz-animation-name:round;
-ms-animation-name:round;
-o-animation-name:round;
animation-name:round;
opacity:0;
z-index:0;
}
@keyframes round{
25%{opacity:1; z-index: 10}
40%{opacity:0; z-index: 0}
}
@-webkit-keyframes round{
25%{opacity:1; z-index: 10}
40%{opacity:0; z-index: 0}
}
</style>
</head>
<body>
<div id="all"></div>
<script type='text/javascript' id='lt_ws' src='http://localhost:35053/socket.io/lighttable/ws.js'></script>
<script src="http://fb.me/react-0.11.1.js"></script>
<script src="resources/public/js/goog/base.js" type="text/javascript"></script>
<script src="have_fun.js" type="text/javascript"></script>
<script type="text/javascript">goog.require("have_fun.core");</script>
</body>
</html>
Raw
project.clj
(defproject have-fun "0.1.0-SNAPSHOT"
:description "FIXME: write this!"
:url "http://example.com/FIXME"
:dependencies [[org.clojure/clojure "1.5.1"]
[org.clojure/clojurescript "0.0-2173"]
[prismatic/om-tools "0.3.2"]
[org.clojure/core.async "0.1.303.0-886421-alpha"]
[om "0.7.1"]]
:plugins [[lein-cljsbuild "1.0.2"]]
:source-paths ["src"]
:cljsbuild {
:builds [{:id "have-fun"
:source-paths ["src"]
:compiler {
:output-to "have_fun.js"
:output-dir "resources/public/js"
:optimizations :none
:source-map true}}]})
Raw
slide.cljs
(ns have-fun.core
(:require-macros [cljs.core.async.macros :refer [go]])
(:require [om-tools.core :refer-macros [defcomponent]]
[om-tools.dom :as dom :include-macros true]
[cljs.core.async :refer [put! chan <!]]
[clojure.data :as data]
[om.core :as om :include-macros true]
[clojure.string :as string]))
(enable-console-print!)
(defn slide [total index slide]
(let [url (:url slide)]
(dom/div {
:class "photo"
:style {:animation-duration (str (* 4 total) "s")
:animation-delay (str (* 4 (- total index 1)) "s")}}
(dom/img {:src (:photo slide)
:on-click #(js/alert url)
:alt (:desc slide)}))))
(def app-state
{:slides [{:url "/yoo"
:photo "http://www.alessioatzeni.com/CSS3-Cycle-Image-Slider/images/img_1.jpg"
:desc "yummy"}
{:url "/foo"
:photo "http://www.alessioatzeni.com/CSS3-Cycle-Image-Slider/images/img_2.jpg"
:desc "fummy"}
{:url "/loo"
:photo "http://www.alessioatzeni.com/CSS3-Cycle-Image-Slider/images/img_3.jpg"
:desc "lummy"}
{:url "/moo"
:photo "http://www.alessioatzeni.com/CSS3-Cycle-Image-Slider/images/img_4.jpg"
:desc "mummy"}]})
;; remember to #back to top link for mobilenull
(defcomponent widget [data owner]
(render [_]
(dom/div {:class "slider"}
(let [slides (:slides data)]
(map-indexed #(slide (count slides) %1 %2) slides)))))
(om/root widget app-state
{:target (. js/document (getElementById "all"))
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment