Thickbox add previous and next button on image like Lightbox

by Weijie JIN on

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:

image

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! Smile

  • http://www.norcalconstruction.com/projects/ Peter

    I’m trying to add navigation to the pop-up windows and will try your advice.
    How do you modify the tb_show function?
    Thanks
    Pete

  • http://jinweijie.myopenid.com/ jinweijie

    hello, what do you mean by how?

  • ruchi

    hi jin,
    its a pleasure to knw you… well just goolgling for some thickbox related queries i found ur profile.
    i am having one problem, could you plz hve luk and reply me as soon as possible…
    if you got to this link..
    http://jquery.com/demo/thickbox/
    in example theres a image gallery example like that only .. rather then image i want to show div contents in “next” and “previous” click .
    i hope you understand the peoblem…

    well i am able to show the pop up window and starting with the div which i want to show first (this is done just reffering the example for inline content in thickbox link)and when i click on the next or previous button i want to remove that div and want to show contents of another… div…

    so could you please tell me … what should be the code for next and previous button…

    hope to hear from you soon…

    regards
    ruchi

  • Michael

    Hi,

    great work. It was very annoying when the slides closes by clicking one millimeter beside the next or prev link. You have to start with the first image once again. But this is now history

    Many, many Thanx,
    Michael.

  • Marcos

    Hello. I didn’t get this to work and I have a feeling its because of the way I linked my images to open with thickbox. I added this code:

    [code]

    jQuery(document).ready(function() {
    jQuery(“.entry-content a img”).parent(“a[href*=layback]”).addClass(“thickbox”);
    });

    [/code]

    To my single.php file. This way, all the images in a post open up on thickbox. But I never got a caption on the thickbox window, and after the modified files you posted here, its still the same. just the one image, with a X ……………button on the bottom right corner. Any help is appreciated! Thanks.

  • Gregg

    Hi, First off, great tut, works awesome on my site. I was wondering if you know a way to include the image alt /title as well as the description. So show the image name, and if there is a description (+caption+), show that as well. That way, some text will always show, even if it is something so bland as ‘image064′. Thanks!

  • http://jinweijie.myopenid.com/ jinweijie

    I think you need to modify the upload module of the image.

  • Lou

    Awesome work jinweije! This is just what i was looking for.

    I’m now trying to make thick box go to the last image when clicking on the left portion of the first one, and go to the first one when cliking on the right part of the last one. Any help nor clue would be apreciated.

  • http://jinweijie.myopenid.com/ jinweijie

    Hi Lou,

    I think you can modify the function tb_show(caption, url, imageGroup) function in the thickbox.js file

  • http://www.ainsleyknott.com Ainsley

    Awesome stuff man!

    Makes it a lot easier to navigate through my pics.
    Thank you.

    Ains

  • http://jinweijie.myopenid.com/ jinweijie

    glad to hear that. :)

  • http://jinweijie.myopenid.com/ jinweijie

    checked out your site, great illustrations! i like them.

  • Naomi

    Hi! I stumbled upon your site when I’m searching for some solution on thickbox. Your tutorial is awesome and I think my client will like it very much compared to the old native way of navigating. One question though, not so sure if I should ask here. Well, I’m trying to add another button called “Learn More” just before the Close button. As the name suggests, it actually directs user to another page. How can I accomplish that?
    Any help is much, much appreciated.

  • http://jinweijie.myopenid.com/ jinweijie

    Hi Naomi,

    You can modify the following line in thickbox.js:

    jQuery(“#TB_window”).append(“<img id=’imgLeftArrow’ src='” +tb_leftArrow+ “‘ border=’0′ style=’display:none;’/><img id=’imgRightArrow’ src='” +tb_rightArrow+ “‘ border=’0′ style=’display:none;’/><div id=’divNavControl’><div id=’divPre’></div><div id=’divNext’></div></div><a href=’#’ id=’TB_nextPIC’ title='”+thickboxL10n.next+”‘><img id=’TB_Image’ src='”+url+”‘ width='”+imageWidth+”‘ height='”+imageHeight+”‘ alt='”+caption+”‘/></a>” + “<div id=’TB_caption’>”+caption+”<div id=’TB_secondLine’>” + TB_imageCount + TB_PrevHTML + TB_NextHTML + “</div></div><div id=’TB_closeWindow’><a href=’#’ id=’TB_closeWindowButton’ title='”+thickboxL10n.close+”‘><img src='” + tb_closeImage + “‘ /></a></div>”);

    add you code before the close button.

    Thanks.

    Weijie

  • Mike

    Hello,

    i dont can work with this. i try to open all images from wordpress in thixkbox but dont work.

  • Scott James

    Love the work Jin,

    I was wondering how I could modify this code to have the popups fade in/out?

    Thanks and keep up the great work!

    -Scott

  • Anna

    Hi,
    I don’t know if you have noticed, but the left arrow that suppose to flip to previous picture points to next picture ;) Even in your demo – the left side of the image is working as it should, but the left arrow is not.

  • http://jinweijie.myopenid.com/ jinweijie

    I’ll check this, thanks.

  • http://sarobu.netai.net Santiago

    Hello,

    I tried to apply the tuto but the configuration it’s different in joomla in the component Joomgalley, there any way to adjust this to this cms?.

    Thanks in advance

    Regards

    Santiago

  • http://jinweijie.myopenid.com/ jinweijie

    I think it can be done, you can compare my script to the original one and see the changes. I recommend fancybox to do the image view, it has the build in function like this.

    Thanks.

    Weijie

  • http://www.newyorkgraffiti.com Tom

    AWESOME Converter!!!

    I cant seem to get the next & previous images to show up but they are on the server all in the same location, left.gif, right.gif, pixel.png, pixel.gif

    http://newyorkgraffiti.com/blog/index.php/old-school/the-forgotten-boro-of-si/staten-island-walls/

    Thanks

Previous post:

Next post: