Jon Gaulin » Tutorials

Firefly Jquery Plugin

admin — Wed, 07 Mar 2012 08:30:39 +0000

Noise is an important part of most designs when it comes to websites. It helps direct the user’s attention to certain parts of the site without overwhelming them. I’ve recently started seeing sites use a type of Javascript animation that is really appealing to me. It’s subtle and at the same time has a huge impact on the design.

The plugin is called Firefly by Motyar. It’s incredibly easy to add to your site and can really bring the design to life.

To add it on your website you will first need to include your jquery file, you can download the recent version of jquery from the site http://jquery.com/.

Once you have that installed head over to the plugin page on GitHub and download the plugin https://github.com/motyar/firefly.

Once you have both javascript files, simply include them in your code like so:

And then call the plugins function with this:

$(document).ready(function() {
	$.firefly(); 	
});

The plugin allows for customization with two options ‘images’ and ‘total’. Images, lets you call whichever image you want to float on the screen. Total, allows you to define the amount of images to pull onto the screen at a time.

$(document).ready(function() {
	$.firefly({images : ['1.jpg', '2.jpg'],total : 40}); 	
});

And that’s it, you now have floating pixels on your website. You can use this plugin to add particles to a photography site, add fireflies to a field background image, add water debris, stars… the list goes on, its use is only limited by your imagination. Here are a couple example sites:

Quazar Web Design

FireFly

Free Minimalist Portfolio

admin — Thu, 24 Nov 2011 08:30:33 +0000

Best viewed in Chrome and Safari
Basic HTML knowledge required
Includes HTML, CSS and javascript files
Also includes photoshop file

When it comes to web design I’m a huge fan of both minimalism as well as heavy imagery. If you’re a photographer, artist or designer, minimalism is a great way to emphasize your work.It allows the user to focus on a single aspect of the site at a time while still remaining visually pleasing.

I recently put together a minimalist portfolio design which I haven’t yet been able to use. I started with just the design and decided to chop it up and code it to feature on the blog.

The design itself is fairly simple but also very easy on the eyes. As for the code, I used Codrops’ ‘Slicebox’. A great slideshow plugin that utilizes the CSS3 3D transform property. You can read up on some of the documentation on their site. I’m also using the bxslider along with fancybox for the subfeature thumbnail image slides.

Feel free to download the source files and use them for your project. They’re very easy to customize, simply replace the image paths in the array:

var thumbImages = [
     "image/large-1.jpg",
     "image/large-2.jpg",
     "image/large-3.jpg",
     "image/large-4.jpg",
     "image/large-5.jpg",
     "image/large-6.jpg"
];

with you’re own images and you’re good to go.

For the thumbnails you can use your full sized images and it will resize it accordingly. Just replace the image paths:

About Page

The about page is pretty straight forward, you can replace the text and image to customize it.

Portfolio Page

The portfolio page is similar to the home page, with regards to the image replacement. Simply replace the images in the array:

var portfolioImage = [
     "image/large-1.jpg",
     "image/large-2.jpg",
     "image/large-3.jpg",
     "image/large-4.jpg",
     "image/large-5.jpg",
     "image/large-6.jpg"
];

with you’re own images.

Contact Page

The contact page form is set up visually but you will need to add phpmailer or some form of mailer for the functionality.

If you have any questions feel free to send me a message or post in the comments.

Enjoy

EDIT:

There was a bug with the Slicebox plugin that made it break in Firefox 10. I’ve made a quick modification to the plugin for now until I can find a better solution to the problem. Here’s the fix:

On line 93 of the plugin (jquery.slicebox.js) replace:

if( Modernizr.csstransforms3d )

With:

if( Modernizr.csstransforms3d && navigator.userAgent.indexOf("Firefox") == -1 )

And on line 101 of the index.html page replace:

if( !Modernizr.csstransforms3d )

With

if( !Modernizr.csstransforms3d || navigator.userAgent.indexOf("Firefox") != -1 )

Fullscreen slider

admin — Thu, 17 Nov 2011 08:00:57 +0000

Often times when a client asks for special customizations or animations to their site, I will dig for a jQuery plugin that accomplishes my goal. However, on occasion, when the customizations become overly original, I will need to put something together on my own. At least with the help of multiple plugins.

Recently I was asked to put together a micro site for a company and in the requirements they asked for the following:

A full screen image scroller, with proportionate images.
Scrolling content that corresponds with each of the images.
The ability to flip through content pages on a per slide basis.
Image thumbnail navigation for each of the images.
And i think thats it…. oh, and to make it compatible in IE7 and up…

I searched high and low for a simple plugin that could achieve all of these things and found many candidates. But the customizations were too vast and specific for any one plugin to accomplish. I decided to pick the project apart and find solutions for each of the tasks at hand.

Here are the plugins I used for the project:

I’ve divided this tutorial into three sections each one adding a new plugin to the page.

We’ll begin by putting together a page with the full screen slider.

Step 1 – Full Screen Image Slider

Demo Download

Let’s start by setting up the fullscreen slider. In the demo you’ll notice i’m using a combination of Backstretch and a simple image preloader. Without the preloader, a new visitor may not see the images before the slider transitions to the next slide. So to be safe we preload all the images before initiating the slider.
First we’ll include the scripts:

To make things a little easier I put the preloader into its own file and called it onto the page. Download the preloader here.
And here’s how I did it:

Javascript:

$(document).ready(function(){
$(function() {

var images = [
	"images/img_1.jpg",
	"images/img_2.jpg",
	"images/img_3.jpg",
	"images/img_4.jpg"
];
var index = 0;
var transitionSpeed = 500;
var imageIntervals = 5000;
var startIntervals;
var intervalSetTime;

$.preload(images, {
    init: function(loaded, total) {
     $("#indicator").html("");
    },
	
   loaded_all: function(loaded, total) {
    $('#indicator').fadeOut('slow', function() {
	
     var index = 0;
     $.backstretch(images[index], {speed: transitionSpeed });
			
     startIntervals = function (){
        intervalSetTime = setInterval(function() {
        index = (index >= images.length - 1) ? 0 : index + 1;
        $.backstretch(images[index]);
        }, imageIntervals)};
					
        startIntervals();
			
    });
   }
  });
});
});

CSS:

  #logo{
    width:273px; 
    height:100px; 
    margin:40px 0px 0px 40px;
  }
  #indicator{
    width:48px; 
    position:absolute; 
    left:50%; 
    margin:200px 0px 0px -24px;
  }

HTML:

Setting up the backstretch javascript is very simple. Just copy the javascript code and replace the image array paths according to the images you want pulled to the page.

Replace image paths:

var images = [
	"images/img_1.jpg",
	"images/img_2.jpg",
	"images/img_3.jpg",
	"images/img_4.jpg"
];

You can set the transition speed and pause time by changing the ‘transitionSpeed’ and ‘imageIntervals’ variables

Replace speed variable:

var transitionSpeed = 500;

And the pause time:

var imageIntervals = 5000;

That’s about it for step 1, you should now have a fully functional Full Screen Image slider… that’s a mouth full

Step 2 – Full Screen Image Slider with content

Demo Download

The following instructions are in addition to step 1.

Now that we have our full screen image slider up and running, we can start with the content. For this example I’m using hipster ipsum as filler text, you can only look at so much lorem ipsum before it bores you to tears. First off we need to include our ‘bxslider’ file:

Once we have that we’ll need to add 2 variables to the mix ‘slider’ and ‘contentOpen’. Here’s how they’ll look:

var slider;
var contentOpen = false;

Now we can initialize the bxslider which will contain the content relevant to the slide. You can read the documentation for the bxslider on their site. Here’s how it looks:

slider = $('#slider1').bxSlider({
    mode: 'fade',
    controls: false,
    pause: imageIntervals
});

Next we will need to generate the thumbnails. To do this I pull the regular sized images from the ‘images’ array, size them to 75px width and append them into the ‘thumb-container’, which i placed at the bottom right of the site. Here’s how it looks:

for (i=0;i<=images.length - 1;i++){
    $('#thumb-container').append('');
}

Note: the '?size=thumb' needs to be added to the image name to work properly in IE. Strange? I know.

Once we have the thumbnails generated we can fade it in with the rest of the content after the preloader does its thing:

$('#thumb-container').fadeIn('slow');

This part is pretty cool, the bx slider was built with some public functions that allow us to go to the next slide, previous slider, a specified slide, and a bunch of other options. What's good about this is we can use the goToNextSlide() function to work seamlessly with our image slider intervals:

slider.goToNextSlide()

Insert that into the startIntervals function and we now have the content transitioning at the same intervals as the image slider.

Next we add our function that links our thumbnails to our slides. This function is called in our thumbnail 'For' loop:

function goToContent(slideNum){
    clearInterval(intervalSetTime);
    index = slideNum;
    $.backstretch(images[index]);
    slider.goToSlide(slideNum);
    if (contentOpen == false){
        startIntervals();
    }
};

And last but not least, our content show and content hide functions. I added the show function to a button under the logo and the hide function to the close graphic within the content box:

function showContent(){
    $('.content-bg').fadeIn('slow');
    clearInterval(intervalSetTime);
    contentOpen = true;
};
function closeContent(){
    $('.content-bg').fadeOut('slow');
    startIntervals();
    contentOpen = false;
};

Here's the HTML for the page:


	
	



 
     
     <--! Content 1 -->
          
     
  
  
     
     <--! Content 2 -->
          
     
  
  
     
     <--! Content 3 -->
          
     
  
  
     
     <--! Content 4 -->

And the css:

body{color:#fff; font-family:Arial, Helvetica, sans-serif;}
h1, h2, h3{padding:0px; margin:0px;}
#left-side{width:274px; height:400px; float:left; margin:40px 0px 0px 40px; display:none; z-index:10; position:relative;}
.content-button{width:273px; height:64px; float:left; margin-top:10px; background:url(images/content-button.png); outline:none;}
.content-button:hover{background-position:0px -64px;}
#slider1 .content-container{width:780px; height:540px; float:left; margin:40px 0px 0px 5px;}
.content-container h2{color: #ccc;font-weight: bold;text-transform: uppercase; font-size:30px; padding-bottom:20px;}
.content-container p{color:#ccc; font-size:12px; line-height:18px;}
.content-bg{width:700px; height:420px; float:left; background:url(images/content-bg.png); padding:40px; display:none;}
.close-button{width:20px; height:20px; float:left; background:url(images/close.png); position:absolute; cursor:pointer; top:0px; right:0px; margin:10px 15px 0px 0px;}
#thumb-container{position:absolute; bottom:0px; right:20px; background:url(images/content-bg.png); padding:15px 15px 0px 5px; margin-left:20px; display:none;}
#thumb-container img{float:left; width:75px; padding:0px 0px 15px 10px; opacity:.8; border:0px;}
#thumb-container img:hover{opacity:1;}
.bx-wrapper{float:left;}

Onto step three...

Step 3 - Full Screen Image Slider with content flipper

Demo Download

The following instructions are in addition to step 1 and step 2.

For the final step we're going to add a flip effect to the content box. Using ajax we'll change the content in the box while the flip animation is running.

First off lets insert the necessary scripts for the flip animation

Now let's see the variables

var content = [
     "content/content-1.html",
     "content/content-2.html",
     "content/content-3.html",
     "content/content-4.html"
];
var flipSpeed = 300;

Note: Keep in mind the content number is used in the following loop to populate the initial content.

Once we have our variables set we can add in our loop. This will pull the html content from our content files into the content container... I feel like I should say content again.

for (i=1;i<=content.length;i++){
    $("#content-" + i).load(content[i - 1]);
};

Now that the for loop has populated the content containers we can add our flip effect to pull alternate content on click.

Here's the script that populates the 'More' content:

function contentMore(contentNum){
    $("#content-" + contentNum).flip({
        direction:'rl',
        color:'#000',
        speed:flipSpeed,
        onAnimation: function(){
            $("#content-" + contentNum).load('content/content-more-'+ + contentNum +'.html');
        },
        onEnd: function(){
            $("#content-" + contentNum).css('background-color','transparent');
        },
    });
};

Note: The file name structure for the 'More' content files must contain a number to coincide with the initial content.

You can read more about the flip plugin on their site.

Next we'll add a public function that allows us to return to the previous flip.

function contentBack(contentNum){
    $("#content-" + contentNum).revertFlip()
};

Now we only have to add the corresponding html and css:

CSS:

.content-container a:link,
.content-container a:visited{color:#fff; font-size:12px; text-decoration:none;}
.content-container a:hover{color:#ccc;}
.content-wrap{height:400px;}
.more{width:89px; float:right; height:31px; background-image:url(images/more.png); text-indent:-9999px;}
.more:hover{background-position:0px -31px;}
.back{width:89px; float:left; height:31px; background-image:url(images/back.png); text-indent:-9999px;}
.back:hover{background-position:0px -31px;}

HTML:

And that's it, we have a working Full Screen Image and Content Slider. If you have any questions feel free to send me a message or post a comment.