New Blog Address: http://blog.grayjunior.com/

Archive for the ‘Scripts & Resources’ Category

JQuery Slideshow V1.2: Automated

Jquery and CSS slideshow By Gray Junior

Previously, I had made some corrections and changes to the slideshow v1.1. Now, I would like to release another version, v1.2 where new feature: Automated Slideshow, is included. It allows the slideshow to automatically change its slides on a given set of time. “Resume” and “Timer” settings are added to give more control and customization to the slideshow.

For more detailed explanation and demonstration, please take a look at my new official blog address: http://www.grayjunior.com/

This is the link to the post:  http://blog.grayjunior.com/2011/01/25/step-by-step-automated-jquery-slideshow/

Alternatively, you may wish to take a look at it or download it right away.

Demo Download

GitHub Repository: Slideshow Scripts

Sliding-Gallery With JQuery and CSS By Gray Junior

I figured it would be easier to manage and distribute the script with GitHub version control, where everyone shares their codes. So I have setup a repository for future script releasing on my blog, and you may download them from there. The link for the download in the original post has been updated as well, but as a precaution I shall also paste the link here for your references:

Download Script v1.0 ↓

JQuery & CSS3 Slideshow

Sliding-Gallery With JQuery and CSS By Gray Junior
You probably have seen a slideshow appearing at many blogs or website, that actually served to help promoting featured products, discounts, etc. In this article, I will be sharing with you a simple slideshow that makes use of JQuery and CSS 3, with various customization for you. This current version features a simple “next” and “previous” link to preview the slides. As the name suggests, each slide is presented in a sliding motion upwards and downwards. For other purposes or usage that requires a small description, I have also included a small section for each slide where you may add in texts.

To initialize the slideshow script, just insert this codes into your page:

Initializing The Slideshow

$(document).ready(function() {

$(‘#main’).slider({ // SELECT YOUR CONTAINER/ELEMENT TO USE FOR THE SLIDESHOW

speed: 1500, // SPEED OF THE SLIDING ANIMATION

actions: false, // TO TOGGLE FOR INITIAL DISPLAY OF THE “NEXT” AND “PREVIOUS” LINKS

width: 900, // THE WIDTH OF THE SLIDESHOW

height: 500 // THE HEIGHT OF THE SLIDESHOW

});

});

You may customize your slideshow with the various options stated above, speed of the slides, display of the action links and the size of the slideshow you want. This script has been tested on the major browsers (firefox, safari, chrome) and I have also debugged most of the issues. Should you encounter any problems with it, do leave me a message or e-mail and I will be glad to assist you out. It is also available free of charge for both personal and commercial projects under the creative common license. (I’m unable to provide any demo of it as I do not have my own server yet, apology!)

Download Script v1.1 ↓Snapshot→