Need a nice looking product slider for you website?

Introducing FancyMoves, a new jQuery Product slider for your website or blog. This slider is built off the Moving Boxes slider, with FancyBox for expanding images.

View Demo

FancyMoves is a great slider to show off services, products, or whatever you can dream up. The main image is enlarged to attract your focus. There are three ways to navigate to the next / last item: using your keyboard arrows, using the left and right arrows on the sides of the slider, or simply clicking on the next or last item in the slider.

FancyBox is built in so you can have images enlarge with an overlay effect on the screen. Hovering over the enlarged photo shows arrows, allowing you to navigate to other images within the group. Any of the FancyBox features can be added to the code of course, for different effects including: speed, overlay styles, expanding transitions, etc.

This slider is brought to you for free thanks to good old open source on the web. If you use it, shoot me a message and I’ll link your site here for others to see.

Don’t forget to check out Ugmonk, where you can actually buy the products from the demo slider.

Want to set the slider to autoplay? Check out my demo here for info.

Download FancyMoves

I was making a product slider for a clients website; and was using the CSS-Tricks Moving Boxes slider. I chose this slider because it had an effect that most other jQuery sliders don’t have, the main image is larger than the images leaving or entering the screen.

The one problem I found with it was that there is no setting for autoplay, so the user always needs to manually press the arrow to navigate to the next photo. I wanted it to autoplay, so it starts to play as soon as you load the webpage. I found the code to make this work however, check out the demo to see the slider autoplay, and keep reading for the code / instructions.

View Demo

All you need to do to set the Moving Boxes jQuery slider to autoplay is add the following code right after line 110 in the slider.js file:

So the above code goes right after the line: $(“.left”).click(function(){ change(false); });

Change the number to adjust the time of delay, and it will autoplay all the way to the end of the slider.

I was coding a page the other day and needed to have a button that could refresh the webpage when pressed. Turns out jQuery can take care of this rather easily. Check out the demo below, and keep reading for the code.

View Demo

First hook your page to jQuery in the head of your page.

Then add the following code below that (still in the head of your document).

Hook your button up with the same id that you have in the above code.

That’s all there is to it!

In a previous post I showed possibly the easiest way to embed a Twitter feed on your website. This brought up a couple of questions from some users.

1. Can you make a background behind individual Tweets?
2. Can you put the date on it’s own separate line?

As the case goes with a lot of things these days jQuery to the rescue! Check out the demo to see both of these things in action, and then continue reading to see how to accomplish these things with jQuery and download the source files.

View Demo

The jQuery and CSS code to make this happen came from Chris over at CSS-Tricks. I slimmed down and edited it to make it work for me. Here is a zip of the files used for the demo so you can download and edit it as you want.

Download Files

You’ll see in the head of the index page the jQuery which makes it work. The line you need to change is the following:

First replace the part I highlighted in Blue “ilz_” with your Twitter user name.

Next, replace “count=5″ with the number of tweets you want to show up on your page.

Other than that, you should be able to style the rest of the text, links, etc. as long as you know basic CSS. Enjoy!

Well the day finally came

… the re-design of my personal website BeantownDesign.com is complete! Well, complete enough to launch I should say. A TON of hours went into this latest version of my site, and I can truly say I’m pleased with the results. I liked my old site, but I had too many new features that I wanted to try out, as well as a new look.

Some notable features of the new BeantownDesign.com include:

• JQuery pop-up boxes
• JQuery images sliders
• Live Facebook style chat
• Twitter feed pulled onto site
• CSS drop nav with image replacement
• Smooth Scroll for “TOP of page” links
• Animated Favicon
• Google Map

There is still some work to be done with the site. There are problems with transparency of the pop-up boxes in Internet Explorer, the Twitter Feed has some problems with Explorer, etc. Did I mention how great the Firefox Browser is lately? Download Firefox here!

So there it is! I hope you’ll go check out the site.. BeantownDesign.com, And as always, I appreciate any comments, advice, suggestions, etc.

ilz out