Thickbox add previous and next button on image like Lightbox

Lightbox has a fancy effect that use can navigate image back and forth by clicking the left or the right side of the current image. This is nice for the Thickbox being used in NextGen Gallery which is a gallery plugin for wordpress.

I modified the Thickbox jQuery plugin  to implement the same thing.

First, let’s check out the result which we’re going to accomplish. Visit one of my photo album, for example: http://www.jinweijie.com/photo/?album=1&gallery=3 , clicking one of the image, after its loading, the image can be clicked to view the previous or the next one depending the side you clicking:

And there will be an arrow shown when your mouse move on the image to show the next or the previous.

Also, my modification includes preloading next two images.

Now let’s see the code:

1. First, you need three images: left.gif, right.gif, pixel.gif. They are enclosed in the zip file which you can download at the bottom.

2. Modify the thickbox.css, add the following code at the end of the file:

#divNavControl{
    position: absolute;
    z-index:999;
}

#divPre{
     height: 100%;
    left: 0;
    position: absolute;
    width: 50%;
    background:url(pixel.gif) repeat;
    cursor:pointer;
}

#divNext{
    height: 100%;
    position: absolute;
    right: 0;
    width: 50%;
    background-color:transparent;
    background:url(pixel.gif) repeat;
    cursor:pointer;
}

#imgLeftArrow{
    position:absolute;
    top:45%;
    left:0;
}

#imgRightArrow{
    position:absolute;
    top:45%;
    right:0;
}

3. Modify the thickbox.js, add the image variable at the top of the file:

if ( typeof tb_leftArrow != 'string' ) {
    var tb_leftArrow = "../wp-includes/js/thickbox/left.gif";
}

if ( typeof tb_rightArrow != 'string' ) {
    var tb_rightArrow = "../wp-includes/js/thickbox/right.gif";

Then modify the tb_show function, the code is too long so I zipped them, please Download the zip file.

Click here to download the modified Thickbox package for WordPress.

Click here to download standalone version.

Any question, please comment below, enjoy!

Tagged as: navigation, nextgen, thickbox