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!

Recently I was put in charge of creating a product slider for a client’s website. There would be four products shown at a time, with one new product being revealed each time as the slider moved from the right to the left. I figured there was a jQuery slider out there that I could manipulate for this, and after a little hunting I found one.

The actual slider and website I created it for isn’t live yet. I used the base slider I created and used a few Apple images to show the general idea in the demo. So check out the demo, and then keep reading to see the details.

View Demo

So the original code for this slider is jCarousel. I figured I would put up this demo to show how with a few modifications to the code you can create a useful product slider. You’ll notice how it’s created with an unordered list. I also showed how you can use rollover effects, and link each image to a webpage; which is obviously the point of the slider in the first place.

The slider has an autoplay feature. I added some code to the original jCarousel to make the slider go only one product at a time. This is in the head of the index.html file. The line “scroll: 1“. If you want it to scroll 2 items, change it to 2, and so on.

Now I admit the code here isn’t the prettiest, but as I mentioned this was created strictly for the demo, to show some of the possibilities. I’m going to provide all these files in a .zip file for download, in case you want to play around with the slider. Enjoy!

Download the Files