/* * Author: Marco Kuiper (http://www.marcofolio.net/) */ // Speed of the automatic slideshow var slideshowSpeed = 9000; // Variable to store the images we need to set as background // which also includes some text and url's. var photos = [ { "title" : "We believe that media can be an awesome tool for learning but can also serve to pollute our culture. At the Fountain Insights, instead of complaining about something we try to figure out how we can impact the problem. The Head food app will be released 1st quarter 2013 and will allow users to monitor their media consumuption in a fun and easy way. ", "image" : "headfood.jpg", "url" : "http://thefountainiss.com/agency/2011/..", "firstline" : "In Development", "secondline" : "HeadFood App" }, { "title" : "Looking for the definitive magazine of the 21st century? Look no further. THE FOUNTAIN MAGAZINE is due to hit newstands and digital devices this winter. We have Res. We have Hopalong Camanshii. We have music, film, art, technology, sex, food, and fashion. You know you want it. Come get some.", "image" : "res.jpg", "url" : "http://thefountainiss.com/agency/2011/11/fountain-mag-ish1/", "firstline" : "Yeah boyeee! Almost done!", "secondline" : "The Fountain Magazine 1.0" }, { "title" : "We all know that good conversation is hard to find in this town, so we're doing our part by bringing together brillliant people to share wine and food and to discuss what barriers there are to acheiving our creative dreams and how can we overcome them. ", "image" : "exposed.jpg", "url" : "http://thefountainiss.com/agency/2011/12/fis-wine-event-masks-lies-we-tell-ourselves/", "firstline" : "Community Event", "secondline" : "Masks/Lies" }, { "title" : "If it was not for our mentors we would not be here today. The F/is knows that it's our duty to pass our knowledge on to the next generation of young creatives. The WELLSPRING PROJECT provides multimedia training and incubation for young innovators.", "image" : "wellspring.jpg", "url" : "http://thefountainiss.com/agency/2011/12/the-wellspring-project/", "firstline" : "Educational Programs", "secondline" : "The Wellspring Project" }, { "title" : "LIFE IS ART. LET'S CREATE. Words told to an 8 year old girl by her father to always remind her that each day is an opportunity to create anew. Being Zyn chronicles the adventures of a quirky, creative little girl as she discovers the brilliant colors of life. ", "image" : "beingzyn.jpg", "url" : "http://thefountainiss.com/agency/..", "firstline" : "New in Publishing", "secondline" : "Being Zyn : SOCKS!" }, { "title" : "Join the Fountain Insights for the first of our bi-monthly MOVIE NIGHTS where we'll be watching the anime spectacular, SUMMER WARS, and discussing the impact that Social Media is having on our analog relationships. ", "image" : "summerwars.jpg", "url" : "http://thefountainiss.com/agency/2011/11/lmg-movie-night-summer-wars/", "firstline" : "Fountain Movie Night", "secondline" : "Summer Wars" }, { "title" : "While we're putting the finishing touches on the first issue, take a look at our two preview issues and get a taste of what's in store this year! ", "image" : "ftn.jpg", "url" : "http://www.magcloud.com/browse/issue/109073", "firstline" : "Available Now", "secondline" : "Fountain Preview" }, { "title" : "Starting a band is no easy tasks. Especially with your best friend. Read the early adventures of Hopalng Camanshii and Ivan Psilopybin and their band, SYNAPTIC KUSH! Get ready for a wild ride of sex, neural enhancers and rock and roll!", "image" : "sk.jpg", "url" : "http://thefountainiss.com/agency/2011/11/synaptic-kush/", "firstline" : "ROCK ROCKIN IT! Hey Nerds! It's,", "secondline" : "SYNAPTIC KUSH!" }, { "title" : "In addition to producing our own project, the F/is also does work for our numerous clients. Take a look at what we did for the Philadelphia Tourism and Visitors Bureau + The Mulicultural Affairs Congress.", "image" : "gff.jpg", "url" : "http://thefountainiss.com/agency/2011/12/global-fusion-festival/", "firstline" : "Recent Work", "secondline" : "Global Fusion Festival" } ]; $(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(http://thefountainiss.com/headerimages/" + 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); });