Tag: jquery

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: 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: 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" 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. 6) Create a .JS file containing all plugin settings, and store it in the slider folder. I called the file "slider.js": 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: 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!

Tag: jquery

How to port the jQuery Horizontal Image Scroller to WordPress