Deze website maakt gebruik van cookies. Hoe zit dat?

How to port the jQuery Horizontal Image Scroller to WordPress

header image tutorial jquery horizontal image scroller

For one of my customer websites, I was looking for a multifunctional image gallery. I had the following requirements:

  • one horizontal row of images
  • configurable number of images displayed
  • configurable thumbnail and image size
  • scrollable without arrows on the sides
  • no flash (must work on iPad/iPhone also)
  • works in WordPress

This proved quite difficult to find! After a long search, I stumbled upon the jQuery Horizontal Image Scroller with Lightbox plugin offered by Code Canyon () and created by . A great plugin with many features and flexible configuration and design options. Only problem was, it wasn’t made for WordPress.
I went ahead and bought a licence, to test whether I could get it to work properly in WordPress, and I did! In this article, I will explain the steps I took to make Code Canyon’s jQuery Horizontal Image Scroller with Lightbox work in WordPress:

Note: All changes to PHP and CSS files where made within my child theme, unless stated specifically otherwise.

1) Create a folder in wp-content\themes\twentyeleven (or the parent theme of your child theme). The folder name can be anything, I called it ‘slider’, containing an exact copy of the plugin file and folder structure.

2) Add the following to the functions.php file:

<?php
// setup for use of jQuery Horizontal Image Scroller w/Lightbox by CodeCanyon
// first, use cdn version of jQuery
function my_custom_script() {
    wp_deregister_script('jquery');
    wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js', false, '1.6.1', false);
    wp_enqueue_script('jquery');
    // load a JS file from the parent theme of my custom theme:
    wp_enqueue_script('custom', get_bloginfo('template_url') . '/slider/js/jquery-ui-1.8.10.custom.min.js');
    wp_enqueue_script('lightbox', get_bloginfo('template_url') . '/slider/js/jquery.wt-lightbox.min.js');
    wp_enqueue_script('scroller', get_bloginfo('template_url') . '/slider/js/jquery.wt-scroller.min.js');
}
add_action('wp_enqueue_scripts', 'my_custom_script');
?>
Note: The name my_custom_script can be anything, as long as you call the same name later on in step 4. The CDN version of jQuery is also not a requirement, but one I personally prefer.

3) Create links to the plugin’s CSS files in the header.php, like so:

<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/slider/wt-scroller.css"/>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/slider/wt-lightbox.css"/>
Note: You can also configure everything within your child theme folder. In that case, adjust the paths everywhere and change template_directory in step 3 to stylesheet_directory.

4) Insert the following line in header.php, just before “wp_head”

<?php if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply', 'my_custom_script' ); ?>
5) Add the following code within the #content DIV to home.php and page.php files (so the gallery will be displayed on both homepage and all other pages):
Note: Don’t forget to add rel=”scroller” to each item, so the plugin is targeted by the gallery. As you can see, I greyed out the prev-btn and next-btn divs. This is because I didn’t want to see the scrolling arrows on the left and right of the gallery. For the example here, I left only five, but you can add any amount of images you want.
<div id="content" role="main">
    <div class="container">
        <div class="wt-scroller">
            <!-- <div class="prev-btn"></div> -->
            <div class="slides">
                <ul>
                    <li>
                        <a href="http://yourdomain.com/your-theme/wp-content/uploads/2011/11/thumb1.jpg" rel="scroller">
                            <img src="http://yourdomain.com/your-theme/wp-content/uploads/2011/11/image1.jpg"/></a>    
                        <p>Enter the text for the image here</p>
                    </li>
                    <li>
                        <a href="http://yourdomain.com/your-theme/wp-content/uploads/2011/11/thumb2.jpg" rel="scroller">
                            <img src="http://yourdomain.com/your-theme/wp-content/uploads/2011/11/image2.jpg"/></a>    
                        <p>Enter the text for the image here</p>
                    </li>
                    <li>
                        <a href="http://yourdomain.com/your-theme/wp-content/uploads/2011/11/thumb3.jpg" rel="scroller">
                            <img src="http://yourdomain.com/your-theme/wp-content/uploads/2011/11/image3.jpg"/></a>    
                     <p>Enter the text for the image here</p>
                    </li>
                    <li>
                        <a href="http://yourdomain.com/your-theme/wp-content/uploads/2011/11/thumb4.jpg" rel="scroller">
                            <img src="http://yourdomain.com/your-theme/wp-content/uploads/2011/11/image4.jpg"/></a>    
                     <p>Enter the text for the image here</p>
                    </li>
                    <li>
                        <a href="http://yourdomain.com/your-theme/wp-content/uploads/2011/11/thumb5.jpg" rel="scroller">
                            <img src="http://yourdomain.com/your-theme/wp-content/uploads/2011/11/image5.jpg"/></a>    
                        <p>Enter the text for the image here</p>
                    </li>
                </ul>
            </div> <!-- slides -->
            <!-- <div class="next-btn"></div> -->
            <div class="lower-panel"></div>
        </div><!-- wt-scroller -->
    </div> <!-- .container class -->
</div> <!-- #container id -->
6) Create a .JS file containing all plugin settings, and store it in the slider folder. I called the file “slider.js”:
jQuery(document).ready(function($) {
  //initialize scroller
    $(".container").wtScroller({
        num_display:3,
        slide_width:300,
        slide_height:200,
        slide_margin:1,
        button_width:35,
        ctrl_height:25,
        margin:10,    
        auto_scroll:true,
        delay:4000,
        scroll_speed:1000,
        easing:"",
        auto_scale:true,
        move_one:false,
        ctrl_type:"scrollbar",
        display_buttons:true,
        display_caption:true,
        mouseover_caption:false,
        caption_align:"bottom",
        caption_position:"inside",                    
        cont_nav:true,
        shuffle:false
    });
      
  //initialize lightbox for scroller
  $("a[rel='scroller']").wtLightBox({
        rotate:true,
        delay:4000,
        transition_speed:600,
        display_number:true,
        display_dbuttons:true,
        display_timer:true,
        display_caption:true,
        caption_align:"bottom",
        cont_nav:true,
        auto_fit:true,
        easing:""
    });
}
);
7) This step is not necessary to make the plugin work. It contains the custom settings I made to the wt-scroller.css file (in the slider folder) to make it fit my design and sizing requirements:
.wt-scroller{
    position:relative;	
    display:block;
    font-family:Arial,Helvetica,sans-serif;
    background-color:transparent;
    width:1000px;
    height:220px;
    padding-top:10px;
    padding-left:5px;
    padding-right:5px;
    margin:0 auto;
}

.wt-scroller .slides{
    position:relative;
    width:1000px;
    height:200px;
    float:left;
    overflow:hidden;
    z-index:1;
}

.wt-scroller .slides ul li{
    position:relative;
    display:block;
    float:left;
    overflow:hidden;
    width:300px;
    height:200px;
    padding-right: 5px;
}

.wt-scroller .scroll-bar{
        position:relative;
        background-color:#b7b7b7;
        background:-moz-linear-gradient(top, #ebebeb 0%, #b7b7b7 100%);
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#ebebeb), color-stop(100%,#b7b7b7)); 
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ebebeb', endColorstr='#b7b7b7', GradientType=0); 
        -moz-border-radius:2px;
        -webkit-border-radius:2px;
        border-radius:2px;
        width:100%;
        height:10px;
        cursor:pointer;
        overflow:hidden;
}

.wt-scroller .thumb{
        position:absolute;
        top:0;
        left:0;
        width:100px;
        height:10px;
        -moz-border-radius:2px;
        -webkit-border-radius:2px;
        border-radius:2px;
        background-color:#68c8fe;
        background:-moz-linear-gradient(top, #68c8fe 0%, #007dc3 100%);
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#68c8fe), color-stop(100%,#007dc3)); 
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#68c8fe', endColorstr='#007dc3', GradientType=0); 
}
And voilá, the plugin works! You can see it in action here, at the bottom of the pages:

I did have to drop some of the wishes I initially had, such as

  • the added feature of having the thumbnail bubble on hover
  • scrolling by mouse movement to left and right
  • not having a scrollbar
  • making it possible to administrate the images from within the WP-administrator

    • Perhaps these could be made to work as well, I would welcome any feedback on that!

    I also understood from the support forum on the Code Canyon website () that the creator of the plugin is working on a WordPress version. However, his response to questions has not been very good. At this moment his last response to any question is two months old. That’s disappointing for a paid plugin, which is mainly why I posted this tutorial. I hope it helps you out, and maybe you can help bring in the features I have not been able to realize yet.
    Cheers!


    foto Boris Hoekmeijer
    My name is Boris Hoekmeijer, I'm a webdesigner and graphic designer.
    I sometimes run into a problem for which I have to find my own solution because Google just won't tell me. That's when I climb behind my mechanical keyboard, and fire away until a tutorial materializes. One of the great things about the web: we can all help each other!
    If this article has helped you, or if you have anything to add or ask, please leave a comment or share the post.
    Cheers!

    © 2011 ★ Published: March 26, 2012 ★
    3 Comments

    • Philip says:
      15/11/2017 at 10:11

      What’s up, just wanted to mention, I liked this post.
      It was practical. Keep on posting!

      Reply
    • Cynthia says:
      13/11/2017 at 09:34

      We’re a group of volunteers and starting a new scheme in our community.

      Your site provided us with valuable info to work on. You have done a formidable
      job and our whole community will be thankful
      to you.

      Reply
    • אמנון יהלומי says:
      05/06/2012 at 11:04

      Great info. Lucky me I recently found your blog by chance (stumbleupon). I’ve saved it for later!

      Reply

    Leave a Reply

    Your email address will not be published. Required fields are marked *