How to port the jQuery Horizontal Image Scroller to WordPress
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.
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 actionthe 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
I did have to drop some of the wishes I initially had, such as
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!
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!
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
Boris Hoekmeijer webdesign and graphic design ★ Published: March 26, 2012 ★
What’s up, just wanted to mention, I liked this post.
It was practical. Keep on posting!
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.
Great info. Lucky me I recently found your blog by chance (stumbleupon). I’ve saved it for later!