SlideDeck is a very powerful jQuery plugin to present your content on mobile phones and browsers is a very simple and clean slideshow. This jQuery powered plugin is easy to customize, powerful and able to deliver a better user experience to your readers.
Still remember our tutorial about jQuery Content Slider? SlideDeck brings all these slideshow and content slider to you in no time!
Photo Gallery, picture gallery, or slideshow are the best way to showcase your images/photos to your readers. There are a lot of different methods to create them and today we are going to look into different jQuery plugins that can be used to create a better photo gallery.
GalleryView aims to provide jQuery users with a flexible, attractive content gallery that is both easy to implement and a snap to customize.
Pikachoose is a lightweight Jquery plugin that allows easy presentation of photos with options for slideshows, navigation buttons, and auto play. Pikachoose is designed to be easily installed and easy to setup.
There are a lot of free scripts to create a content slider. One of the example is SmoothGallery by JonDesign. But, if you are using jQuery and don’t want to install another JavaScript library, then you may need to consider jQuery slider plugin.
Today, i am going to provide a tutorial on using jFlow, a minimalist jQuery plugin to create a content slider. Readers are required to have basic XHTML/CSS and JavaScript skills. I will provide a download link after this tutorial. This is the first tutorial post on WebDesignBooth, and i will write more tutorials in future.
So, let’s start to create our content-slider now. Download both jQuery and jFlow before you proceed.
#jFlowSlide{ background:#DBF3FD; font-family: Georgia; }
#myController { font-family: Georgia; padding:2px 0; width:610px; background:#3AB7FF; }
#myController span.jFlowSelected { background:#43A0D5;margin-right:0px; }
.slide-wrapper { padding: 5px; }
.slide-thumbnail { width:300px; float:left; }
.slide-thumbnail img {max-width:300px; }
.slide-details { width:290px; float:right; margin-left:10px;}
.slide-details h2 { font-size:1.5em; font-style: italic; font-weight:normal; line-height: 1; margin:0; }
.slide-details .description { margin-top:10px; }
.jFlowControl, .jFlowPrev, .jFlowNext { color:#FFF; cursor:pointer; padding-left:5px; padding-right:5px; padding-top:2px; padding-bottom:2px; }
.jFlowControl:hover, .jFlowPrev:hover, .jFlowNext:hover { background: #43A0D5; }
