Categories: Tutorials

How to port the jQuery Horizontal Image Scroller to WordPress

Link Naar Tutorial Jquery Horizontal Slider

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 (see link here) and created by Webtako. 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: jQuery Horizontal Image Scroller with Lightbox in action

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 (see link here) 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!

This post was last modified on 26/06/2018 10:30

Boris Hoekmeijer

Next NIPT consortium »

Previous « Koopwoningen Oostenrijk

View 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!
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.
אמנון יהלומי 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!