Gauge Interactive Blog Read to understand
Find out what is on our minds and what corners of the industry we explore. Read about the latest news at Gauge Interactive and feel free to comment on our posts.
Custom JQuery Slider using JFlow and Wordpress
March 10, 2009
If you program using Java you have probably come across the Java Slider or JQuery Slider. There are many different applications for the slider. It is used either as an image or informational scroller, it is a great way to liven up your website, as well as increasing usability and overall effectiveness. I use JQuery for such functionality because it is has highly customizable built in functions. Plus it is very compatible and proven stable across browsers most people are using. It takes many shapes and sizes for different purposes. The Coda Slider is great, and where I first came across the slider, but is since out dated. What a great way to scroll information, and without panning the page you do not sacrifice the integrity of your design as a whole. Awesome right!?
I found a cleaner and more lightweight variation of this called jFlow. All the basic concepts are utilized and it performs in the same basic way. Upon looking through the code is seemed smarter and easier to modify. It initially lacked the functions we desired, and it seemed like there was a demand in the forum for certain auto-scroll, and pause-on-hover combinations. We wanted to do this, and add a manual advance for the slides.
So the gSlider was born.
Have Gauge professionally install this script on your site starting at $125
Get professional installation. We’d love to install this script on your site for you. First we need some info…
Sometimes you need a little more flexibility than most. On the HGBD website our goal was to display featured projects using a more advanced slider. Our gSlider auto scrolls on the homepage at a given interval. It can be manually advanced, plus it will pause on mouse over. All of these are the basic components of navigation, no need for a pause button, just let the user interact and not even have to think about the pause button. No need for a play button because the user will have the option to advance the slide when ready. And when they are not focusing on the slider with their cursor, it will resume intermittent advancement to advertise its existence. The reason they would have their cursor in the slide to begin with would be the fact that we have these nice elegant *transparent window slides pop out of the slider on top of the image. Each of the, popup windows houses a link and more text about these featured products, of which there are three per slide. Talk about getting the most out of your screen real estate. This kind of thinking is already being pushed to the maximum in our mobile devices like the Apple iPhone.
To finish things off, we publish the text and images of the slider through a content management system. We make all of our websites via Wordpress. So the slides are generated within the Wordpress Loop, cutting down on code and ramping up efficiency.
*All of our code is tested for browser compatibility, validation, we use a transparent PNG filter script for the IE6 transparency fix.
Here is the code for the modified slider. Note the dopause, and doresume functions are very simple. It just changes the timer on the slide to 5 minutes (basically a stop or a pause) upon mouse over, and on mouse out it puts it back to 4 seconds.
(function($) {
$.fn.jFlow = function(options) {
var opts = $.extend({}, $.fn.jFlow.defaults, options);
var cur = 0;
var timer;
var selected_class = "jFlowSelected";
var maxi = $(".jFlowControl").length;
$(this).find(".jFlowControl").each(function(i){
$(this).click(function(){
dotimer();
$(".jFlowControl").removeClass(selected_class);
$(this).addClass(selected_class);
//alert(cur);
//alert(i);
var dur = Math.abs(cur-i);
$(opts.slides).animate({
marginLeft: "-" + (i * $(opts.slides).find(":first-child").width() + "px")
}, opts.duration*(dur));
cur = i;
});
});
$(opts.slides).before('<div id="jFlowSlide"></div>').appendTo("#jFlowSlide");
$(opts.slides).find("div").each(function(){
$(this).before('<div class="jFlowSlideContainer"></div>').appendTo($(this).prev());
});
//initialize the controller
$(".jFlowControl").eq(cur).addClass(selected_class);
var resize = function (x){
$("#jFlowSlide").css({
position: "relative",
width: opts.width,
height: opts.height,
overflow: "hidden"
});
$(opts.slides).css({
position:"relative",
width: $("#jFlowSlide").width()*$(".jFlowControl").length+"px",
height: $("#jFlowSlide").height()+"px",
overflow: "hidden"
});
$(opts.slides).children().css({
position: "relative",
width: $("#jFlowSlide").width()+"px",
height: $("#jFlowSlide").height()+"px",
"float":"left"
});
$(opts.slides).css({
marginLeft: "-" + (cur * $(opts.slides).find(":first-child").width() + "px")
});
}
resize();
$(window).resize(function(){
resize();
});
$(".jFlowPrev").click(function(){
dotimer();
doprev();
});
var doprev = function (x){
if (cur > 0)
cur--;
else
cur = maxi -1;
$(".jFlowControl").removeClass(selected_class);
$(opts.slides).animate({
marginLeft: "-" + (cur * $(opts.slides).find(":first-child").width() + "px")
}, opts.duration);
$(".jFlowControl").eq(cur).addClass(selected_class);
}
$(".jFlowNext").click(function(){
donext();
dotimer();
});
$(".pause").click(function(){
dopause();
});
$(".resume").click(function(){
doresume();
});
var donext = function (x){
if (cur < maxi - 1)
cur++;
else
cur = 0;
$(".jFlowControl").removeClass(selected_class);
$(opts.slides).animate({
marginLeft: "-" + (cur * $(opts.slides).find(":first-child").width() + "px")
}, opts.duration);
$(".jFlowControl").eq(cur).addClass(selected_class);
}
var dotimer = function (x){
if(timer != null)
clearInterval(timer);
timer = setInterval(function() {
donext();
}, 4000);
}
dotimer();
var dopause = function (x){
if(timer != null)
clearInterval(timer);
timer = setInterval(function() {
donext();
}, 500000);
}
dotimer();
var doresume = function (x){
if(timer != null)
clearInterval(timer);
timer = setInterval(function() {
donext();
}, 4000);
}
dotimer();
$("div.jFlowSlideContainer").hover(function(){
dopause();
}, function(){
doresume();
});
};
$.fn.jFlow.defaults = {
easing: "swing",
duration: 400,
width: "100%"
};
})(jQuery);
Here is the code for the Popup Transparent Windows, gotta love JQuery for its simplicity!
$(function() {
$("div.slide_project_holder").hover(function(){
$(this).find("div.pop_box").animate({top:"-180px"},{queue:false,duration:500});
}, function(){
$("div.pop_box").animate({top:"-45"},{queue:false,duration:500});
});
});
Have Gauge professionally install this script on your site starting at $125
Get professional installation. We’d love to install this script on your site for you. First we need some info…
a working demo would be awesome?
thanks … it’s working
Jessica: You can just incorporate the wordpress loop to display 2 images (and/or text) and just edit the css and html accordingly to have everything fit within each slide. You might also check out my post: Rollover Gallery here. It will show you how to automatically pull images from you posts, very useful. Hope this helps
Matt: Code is free to use. Would love credit it you think it’s fair.
Ben: Glad we could help
hi. you do not mention if this code is free to use or $$? thanks. looks cool.
Thanks This works great!
I am looking to use your script with wordpress; however I would like to display two posts in each mySlide div. Do you have a suggestion of how I would implement that? Are each of your three pictures inserted via a post?
Ahh, sorry about that, I see the HGBD site link now…looks/works fantastic. Thanks.
Working demo? Thanks.