Merge pull request #1 from simularium/filament-bending-lit-examples

Add literature examples of bending actin filaments
simularium · Aug 19, 2024 · 95b50cf · 95b50cf
2 parents bcf771d + 634073b
commit 95b50cf
Show file tree

Hide file tree

Showing 8 changed files with 184 additions and 23 deletions.
diff --git a/img/bibeau2023twist_fig2A.png b/img/bibeau2023twist_fig2A.png
diff --git a/img/jasnin2013threedimensional_figS4G.png b/img/jasnin2013threedimensional_figS4G.png
diff --git a/img/jasnin2022elasticity_fig1C.png b/img/jasnin2022elasticity_fig1C.png
diff --git a/img/reynolds2022bending_fig3A.png b/img/reynolds2022bending_fig3A.png
diff --git a/img/serwas2022mechanistic_fig2B.png b/img/serwas2022mechanistic_fig2B.png
diff --git a/index.html b/index.html
@@ -8,12 +8,13 @@
     <script src="https://unpkg.com/d3-simple-slider"></script>
     <script type="text/javascript" src="scripts/figures.js"></script>
     <script type="text/javascript" src="scripts/utilities.js"></script>
+    <script type="text/javascript" src="scripts/slideshow.js"></script>
     <link rel="stylesheet" href="style/style.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Overpass:wght@200;400;600&display=swap">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 </head>
 
-<body>
+<body onload="showSlides(0)">
     <main>
         <section id="header">
             <a id="top"></a>
@@ -23,17 +24,17 @@ <h2>
                 computational cost and capturing detailed behaviors
             </h2>
             <h4>
-                Blair Lyons<sup>1, *</sup>, 
-                Saurabh S. Mogre<sup>1, *</sup>, 
-                Karthik Vegesna<sup>1, *</sup>, 
-                Jessica S. Yu<sup>1, *</sup>, 
-                Mark Hansen<sup>2</sup>, 
-                Aadarsh Raghunathan<sup>2</sup>, 
-                Graham T. Johnson<sup>1, §</sup>, 
-                Eran Agmon<sup>3, §</sup>, 
+                Blair Lyons<sup>1, *</sup>,
+                Saurabh S. Mogre<sup>1, *</sup>,
+                Karthik Vegesna<sup>1, *</sup>,
+                Jessica S. Yu<sup>1, *</sup>,
+                Mark Hansen<sup>2</sup>,
+                Aadarsh Raghunathan<sup>2</sup>,
+                Graham T. Johnson<sup>1, §</sup>,
+                Eran Agmon<sup>3, §</sup>,
                 Matthew Akamatsu<sup>2, §</sup><br/>
             </h4>
-            <p>                
+            <p>
                 <sup>1</sup>Allen Institute for Cell Science, Seattle, WA, USA<br/>
                 <sup>2</sup>Department of Biology, University of Washington, Seattle, WA, USA<br/>
                 <sup>3</sup>Center for Cell Analysis and Modeling, University of Connecticut School of Medicine, Farmington, CT, USA<br/>
@@ -51,7 +52,7 @@ <h4>
                     <div class="iframe">
                         <div class="placeholder-16-9"></div>
                         <iframe
-                            src="https://simularium.allencell.org/embed?trajUrl=https://subcell-working-bucket.s3.us-west-2.amazonaws.com/actin_compression_cytosim_readdy_0.simularium&t=200" 
+                            src="https://simularium.allencell.org/embed?trajUrl=https://subcell-working-bucket.s3.us-west-2.amazonaws.com/actin_compression_cytosim_readdy_0.simularium&t=200"
                             frameborder="0" allowfullscreen>
                         </iframe>
                     </div>
@@ -90,19 +91,45 @@ <h3>
                         This has implications for actin's function in force production and maintainance of subcellular structures.
                     </p>
                     <p class="todo">
-                        [TODO: more images and videos?]
+                        [TODO: write captions including references]
                     </p>
                 </div>
                 <div class="right">
-                    <p class="caption">
-                        Diagram illustrating the role of actin filament bending and twisting in endocytosis.
-                    </p>
-                    <div class="wrap">
-                        <img width="49%" src="img/actin_comparison_figure_a_diagram.png" />
-                        <img width="49%" src="img/actin_comparison_figure_a_diagram.png" />
-                        <img width="20%" src="img/actin_comparison_figure_a_diagram.png" />
-                        <img width="30%" src="img/actin_comparison_figure_a_diagram.png" />
-                        <img width="40%" src="img/actin_comparison_figure_a_diagram.png" />
+                    <div class="slideshow">
+                        <div class="slide fullfade">
+                            <img src="img/actin_comparison_figure_a_diagram.png" />
+                            <p>Caption here for image.</p>
+                        </div>
+                        <div class="slide fullfade">
+                            <img src="img/bibeau2023twist_fig2A.png" />
+                            <p>Caption here for image.</p>
+                        </div>
+                        <div class="slide fullfade">
+                            <img src="img/reynolds2022bending_fig3A.png" />
+                            <p>Caption here for image.</p>
+                        </div>
+                        <div class="slide fullfade">
+                            <img src="img/jasnin2013threedimensional_figS4G.png" />
+                            <p>Caption here for image.</p>
+                        </div>
+                        <div class="slide fullfade">
+                            <img src="img/jasnin2022elasticity_fig1C.png" />
+                            <p>Caption here for image.</p>
+                        </div>
+                        <div class="slide fullfade">
+                            <img src="img/serwas2022mechanistic_fig2B.png" />
+                            <p>Caption here for image.</p>
+                        </div>
+                        <a class="prev" onclick="prevSlide()">&#10094;</a>
+                        <a class="next" onclick="nextSlide()">&#10095;</a>
+                    </div>
+                    <div style="text-align:center">
+                        <div class="dot" onclick="showSlides(0, false)"></div>
+                        <div class="dot" onclick="showSlides(1, false)"></div>
+                        <div class="dot" onclick="showSlides(2, false)"></div>
+                        <div class="dot" onclick="showSlides(3, false)"></div>
+                        <div class="dot" onclick="showSlides(4, false)"></div>
+                        <div class="dot" onclick="showSlides(5, false)"></div>
                     </div>
                 </div>
             </div>
@@ -127,7 +154,7 @@ <h3>
                         (<a href="https://github.com/simularium/Cytosim" target="_blank">our Cytosim code version</a>).
                     </p>
                     <p>
-                        Our simulation, analysis, and visualization pipeline code is available 
+                        Our simulation, analysis, and visualization pipeline code is available
                         <a href="https://github.com/simularium/subcell-pipeline" target="_blank">here</a> and simulation data is available
                         <a href="" target="_blank">here</a>.
                     </p>
@@ -223,7 +250,7 @@ <h4>Simulation replicates</h4>
             </div>
 
             <div class="spacer"></div>
-    
+
             <div class="chunk">
                 <div class="left">
                     <h3>

diff --git a/scripts/slideshow.js b/scripts/slideshow.js
@@ -0,0 +1,47 @@
+let activeIndex = 0
+
+function showSlides(index, loop=true) {
+    index = showSlide(index, loop)
+
+    if (loop) {
+        timer = setTimeout(showSlides, 5000, index + 1)
+    } else {
+        clearTimeout(timer)
+    }
+}
+
+function showSlide(index, loop=false) {
+    let slides = document.getElementsByClassName("slide")
+    let dots = document.getElementsByClassName("dot")
+
+    if (index == -1) {
+        index = slides.length - 1
+    }
+
+    index = index % slides.length
+    activeIndex = index
+
+    for (i = 0; i < slides.length; i++) {
+        slides[i].style.display = "none"
+        if (!loop) {
+            slides[i].className = slides[i].className.replace(" fullfade", " fadein")
+        }
+    }
+
+    for (i = 0; i < dots.length; i++) {
+        dots[i].className = dots[i].className.replace(" active", "")
+    }
+
+    slides[index].style.display = "block"
+    dots[index].className += " active"
+
+    return index
+}
+
+function nextSlide() {
+    showSlides(activeIndex + 1, false)
+}
+
+function prevSlide() {
+    showSlides(activeIndex - 1, false)
+}
diff --git a/style/style.css b/style/style.css
@@ -314,3 +314,90 @@ td img {
 .zoom img:hover {
     transform: scale(1.2);
 }
+
+.slideshow {
+    position: relative;
+    height: 400px;
+}
+
+.slide {
+    display: none;
+}
+
+.prev:hover, .next:hover {
+    background-color: rgba(0,0,0,0.8);
+}
+
+.slide p {
+    color: white;
+    font-size: 80%;
+    position: absolute;
+    width: calc(100% - 40px);
+    bottom: 8px;
+    background-color: rgb(30, 27, 37, 0.8);
+    padding: 20px;
+}
+
+.slide img {
+    max-width: 100%;
+    max-height: 400px;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.prev, .next {
+    cursor: pointer;
+    position: absolute;
+    top: 50%;
+    margin-top: -30px;
+    padding: 16px;
+    color: rgb(211, 211, 211, 0.2);
+    font-weight: bold;
+    font-size: 200%;
+    transition: 0.6s ease;
+    user-select: none;
+}
+
+.next {
+    right: 0;
+}
+
+.prev:hover, .next:hover {
+    color: #d3d3d3;
+}
+
+.dot {
+    cursor: pointer;
+    height: 10px;
+    width: 10px;
+    margin: 5px;
+    background-color: rgb(211, 211, 211, 0.1);
+    border-radius: 50%;
+    display: inline-block;
+    transition: background-color 0.3s ease;
+  }
+
+.active, .dot:hover {
+    background-color: #d3d3d3;
+}
+
+.fullfade {
+    opacity: 1;
+    animation: fullfade 5s ease-in-out;
+}
+
+.fadein {
+    opacity: 1;
+    animation: fadein 5s ease-in-out;
+}
+
+@keyframes fullfade {
+    0%,100% { opacity: 0 }
+    10%,90% { opacity: 1 }
+}
+
+@keyframes fadein {
+    0% { opacity: 0 }
+    10%{ opacity: 1 }
+}