Commits

Denis Darii committed 0afd2e6

added templates

  • Participants
  • Parent commits c521279

Comments (0)

Files changed (2)

bisnavi/templates/bisnavi/base.html

+<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}bisnavi/css/style.css"/>
+<script type="text/javascript">{% include "bisnavi/script.js" %}</script>
+<div id="header">
+   <!-- jQuery handles to place the header background images -->
+   <div id="headerimgs">
+      <div id="headerimg1" class="headerimg"></div>
+      <div id="headerimg2" class="headerimg"></div>
+   </div>
+   <!-- Top navigation on top of the images -->
+   <div id="nav-outer">
+      <div id="navigation">
+         <div id="search">
+            <form>
+               <input type="text" id="searchtxt" />
+               <input type="submit" value="search" id="searchbtn" />
+            </form>
+         </div>
+         <div id="menu">
+            <ul>
+               <li><a href="http://www.marcofolio.net/">Marcofolio</a></li>
+               <li><a href="http://www.twitter.com/marcofolio">Twitter</a></li>
+               <li><a href="http://feeds2.feedburner.com/marcofolio">RSS</a></li>
+               <li><a href="http://jquery.com/">jQuery</a></li>
+               <li><a href="http://en.wikipedia.org/wiki/Cascading_Style_Sheets">CSS</a></li>
+               <li><a href="http://buysellads.com/buy/detail/956">Advertisements</a>
+            </ul>
+         </div>
+      </div>
+   </div>
+   <!-- Slideshow controls -->
+   <div id="headernav-outer">
+      <div id="headernav">
+         <div id="back" class="btn"></div>
+         <div id="control" class="btn"></div>
+         <div id="next" class="btn"></div>
+      </div>
+   </div>
+   <!-- jQuery handles for the text displayed on top of the images -->
+   <div id="headertxt">
+      <p class="caption">
+         <span id="firstline"></span>
+         <a href="#" id="secondline"></a>
+      </p>
+      <p class="pictured">
+         Pictured:
+         <a href="#" id="pictureduri"></a>
+      </p>
+   </div>
+</div>

bisnavi/templates/bisnavi/script.js

+/*
+* Author:      Marco Kuiper (http://www.marcofolio.net/)
+*/
+
+// Speed of the automatic slideshow
+var slideshowSpeed = 6000;
+
+// Variable to store the images we need to set as background
+// which also includes some text and url's.
+var photos = [ {
+        "title" : "Stairs",
+        "image" : "vacation.jpg",
+        "url" : "http://www.sxc.hu/photo/1271909",
+        "firstline" : "Going on",
+        "secondline" : "vacation?"
+    }, {
+        "title" : "Office Appartments",
+        "image" : "work.jpg",
+        "url" : "http://www.sxc.hu/photo/1265695",
+        "firstline" : "Or still busy at",
+        "secondline" : "work?"
+    }, {
+        "title" : "Mountainbiking",
+        "image" : "biking.jpg",
+        "url" : "http://www.sxc.hu/photo/1221065",
+        "firstline" : "Get out and be",
+        "secondline" : "active"
+    }, {
+        "title" : "Mountains Landscape",
+        "image" : "nature.jpg",
+        "url" : "http://www.sxc.hu/photo/1271915",
+        "firstline" : "Take a fresh breath of",
+        "secondline" : "nature"
+    }, {
+        "title" : "Italian pizza",
+        "image" : "food.jpg",
+        "url" : "http://www.sxc.hu/photo/1042413",
+        "firstline" : "Enjoy some delicious",
+        "secondline" : "food"
+    }
+];
+
+
+
+$(document).ready(function() {
+
+    // Backwards navigation
+    $("#back").click(function() {
+        stopAnimation();
+        navigate("back");
+    });
+
+    // Forward navigation
+    $("#next").click(function() {
+        stopAnimation();
+        navigate("next");
+    });
+
+    var interval;
+    $("#control").toggle(function(){
+        stopAnimation();
+    }, function() {
+        // Change the background image to "pause"
+        $(this).css({ "background-image" : "url(images/btn_pause.png)" });
+
+        // Show the next image
+        navigate("next");
+
+        // Start playing the animation
+        interval = setInterval(function() {
+            navigate("next");
+        }, slideshowSpeed);
+    });
+
+
+    var activeContainer = 1;
+    var currentImg = 0;
+    var animating = false;
+    var navigate = function(direction) {
+        // Check if no animation is running. If it is, prevent the action
+        if(animating) {
+            return;
+        }
+
+        // Check which current image we need to show
+        if(direction == "next") {
+            currentImg++;
+            if(currentImg == photos.length + 1) {
+                currentImg = 1;
+            }
+        } else {
+            currentImg--;
+            if(currentImg == 0) {
+                currentImg = photos.length;
+            }
+        }
+
+        // Check which container we need to use
+        var currentContainer = activeContainer;
+        if(activeContainer == 1) {
+            activeContainer = 2;
+        } else {
+            activeContainer = 1;
+        }
+
+        showImage(photos[currentImg - 1], currentContainer, activeContainer);
+
+    };
+
+    var currentZindex = -1;
+    var showImage = function(photoObject, currentContainer, activeContainer) {
+        animating = true;
+
+        // Make sure the new container is always on the background
+        currentZindex--;
+
+        // Set the background image of the new active container
+        $("#headerimg" + activeContainer).css({
+            "background-image" : "url(images/" + photoObject.image + ")",
+            "display" : "block",
+            "z-index" : currentZindex
+        });
+
+        // Hide the header text
+        $("#headertxt").css({"display" : "none"});
+
+        // Set the new header text
+        $("#firstline").html(photoObject.firstline);
+        $("#secondline")
+            .attr("href", photoObject.url)
+            .html(photoObject.secondline);
+        $("#pictureduri")
+            .attr("href", photoObject.url)
+            .html(photoObject.title);
+
+
+        // Fade out the current container
+        // and display the header text when animation is complete
+        $("#headerimg" + currentContainer).fadeOut(function() {
+            setTimeout(function() {
+                $("#headertxt").css({"display" : "block"});
+                animating = false;
+            }, 500);
+        });
+    };
+
+    var stopAnimation = function() {
+        // Change the background image to "play"
+        $("#control").css({ "background-image" : "url(images/btn_play.png)" });
+
+        // Clear the interval
+        clearInterval(interval);
+    };
+
+    // We should statically set the first image
+    navigate("next");
+
+    // Start playing the animation
+    interval = setInterval(function() {
+        navigate("next");
+    }, slideshowSpeed);
+
+});