The Images
Before I get into the code, I'd like to show you the images I've used. There are only 3 in total because this was a very simple exercise I wanted to try. The first is the base image for the other two:
This image is actually set as a background when we get to the code. This is to prevent any flickering later on.
The next one is the first position for the bird's wings:
I could have made the file size smaller by just having the wings, but I used the whole bird as you can see. The last image is the wings in position 2:
Some of you might wonder why I chose only to have the two positions. I did originally create a middle image for the wings where both positions were shown, but in practice it didn't look good. Plus like I said I wanted to keep this as simple as could be.
Setting up the HTML
First I'd like to say if you haven't yet, open up your favorite HTML editor (I prefer Notepad++) and start with a basic HTML5 layout. Inside the body add this code:
<div id="feature_list">
<ul id="output">
<li><a href="http://www.blogger.com/post-create.g?blogID=9077459671769117090#" target="_parent"><img alt="" src="hummingbird1.png" /> </a></li>
<li><a href="http://www.blogger.com/post-create.g?blogID=9077459671769117090#" target="_parent"><img alt="" src="hummingbird3.png" /> </a></li>
</ul>
<ul id="tablist">
<li><a href="javascript:;"></a></li>
<li><a href="javascript:;"></a></li>
</ul>
</div>
As you can see this is just two basic lists. The first one is the images that will rotate, the second are tabs that you can click to select which image you want to see. I have used display:none on the second tab so it does not interfere with what we are doing, but so that if you want to go back later and make like a list of clickable frames you can.
The fun stuff
Ok at this point I bet half of you have scrolled down to read this part. That's ok I'm guilty of liking to dive head first into the sections jQuery too. For those of you that took a look at the LIVE DEMO check out the head sections now.The first thing you see is:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
This is a standard starting point in any file that uses jQuery. This next part I cannot take credit for, but I've been using it so long now that I don't recall where I got it from. I'm using it because frankly its cleaner and runs smoother than the version I tried making:
<script type="text/javascript">
(function($) {
$.fn.featureList = function(options) {
var tabs = $(this);
var output = $(options.output);
new jQuery.featureList(tabs, output, options);
return this;
};
$.featureList = function(tabs, output, options) {
function slide(nextli) {
if (typeof nextli == "undefined") {
nextli = visible_item + 1;
nextli = nextli >= total_items ? 0 : nextli;
}
tabs.removeClass('current').filter(":eq(" + nextli + ")").addClass('current');
output.stop(true, true).filter(":visible").css({zIndex:10}).fadeOut();
output.filter(":eq(" + nextli + ")").css({zIndex:15}).fadeIn(function() {
visible_item = nextli;
});
}
var options = options || {};
var total_items = tabs.length;
var visible_item = options.start_item || 0;
options.pause_on_hover = options.pause_on_hover || true;
options.transition_interval = options.transition_interval || 150;
output.hide().eq( visible_item ).show();
tabs.eq( visible_item ).addClass('current');
tabs.click(function() {
if ($(this).hasClass('current')) {
return false;
}
slide( tabs.index(this) );
});
if (options.transition_interval > 0) {
var timer = setInterval(function () {
slide();
}, options.transition_interval);
if (options.pause_on_hover) {
tabs.mouseenter(function() {
clearInterval( timer );
}).mouseleave(function() {
clearInterval( timer );
timer = setInterval(function () {
slide();
}, options.transition_interval);
});
}
}
};
})(jQuery);
</script>
<script language="javascript">
$(document).ready(function() {
$.featureList(
$("#tablist li a"),
$("#output li"), {
start_item : 0
}
);
});
</script>
Ok that might seem like a lot, but I'll break it down a bit. If you are already familiar with jQuery I suggest reading the code yourself and figuring it out as I am just going to give a general overview of what each sections does.
The first function (fn.featureList) grabs the required variables. In this case it is the ID of the first list, the list items, and the href tag (#tablist li a). It also gets the ID of the second list and the list items (#output li). All we have to worry about is the #output, but not yet.
The second part finds the next list item, making sure its not the current on is not the last one in the list, and assigns the current class to it (in this case the photo with the wings forward). This current class will be the only image seen. It then changes the Z-index on the current item and fades it in while fading the previous one out.
Skipping down to the bottom part of this script section, this part handles the timing for the images swapping in and out. The main area you need to pay attention to is this:
var options = options || {};I have bolded the 3 main parts of this. The top variable options is important because it sets up for the the bottom two. The total items tell jQuery how many list items there are. The visible item to start the image rotation needs to be set to 0. Pause on hover I have as true, but I would suggest changing this false unless you have links surrounding each image. Finally the transition interval should be set as low as possible. I believe this depends on how quickly the browser interprets the jQuery request to edit the css. I have 150 milliseconds set which might seem slow, but its enough for this little humming bird.
var total_items = tabs.length;
var visible_item = options.start_item || 0;
options.pause_on_hover = options.pause_on_hover || true;
options.transition_interval = options.transition_interval || 150;
Now the final section of code in the second script tags.
$.featureList(Very self explanatory, this is the execution of the top code with the required ID's and such as mentioned before. The start item does not need to be set, but I think its just a good practice to do so anyway. Plus then you guys get to see you can start your frames in the middle of the list and it will still work just fine. From here just throw in a little CSS (like list-style: none;) and you will have a nice little flapping bird like I made here for you today. I hope you enjoyed this and can find some way to make it useful in the future! Feel free to use any of this and all feedback is welcome, especially the constructive kind. Thanks for reading!
$("#tablist li a"),
$("#output li"), {
start_item : 0
}
);
No comments:
Post a Comment