WordPress : Combine Jquery slider and iphone touch swipe

in the process of building responsive themes, a challenge that's getting easier every day, you might encounter the need to satisfy your customer with touch reactivity : we describe here how to combine a nice and light slider plugin we donated 5$ to, bxslider, and the now famous jquery touchswipe plugin that brings touch reactivity to your web page if you look at it on your iphone, ipad, or any touch screen device . We have built a plugin and a custom code for gallery post format, specifically for wordpress default theme twentyeleven.


  • the plugin : bxslider , very easy : 
    • create the plugins/bxslider directory, and a bxslider.php file that contain
      Plugin Name: POLEOUEST-bxslider
      Author: erwan
      Version: 0.3
      Author URI: http://poleouest.Com/
      function my_init() {
          if (!is_admin()) {
            wp_enqueue_script('touchswipe', plugins_url('js/jquery.touchSwipe-1.2.5.js',__FILE__));       
            wp_enqueue_script('bsxslider', plugins_url('js/jquery.bxSlider.min.js',__FILE__));
           wp_enqueue_script('bsxslider', plugins_url('js/jquery.easing.1.3.js',__FILE__));     
      add_action('init', 'my_init');



    • put the appropriate javascript files in the js directory
  • the gallery post format code (loop code
                <div id="slider1"  >
    					$images = get_children( array( 'post_parent' => $post->ID, 'post_type' => 'attachment', 'post_mime_type' => 'image', 'orderby' => 'menu_order', 'order' => 'ASC', 'numberposts' => 999 ) );
    					if ( $images ) {
    						$total_images = count( $images );
    						foreach ($images as $image)
                                $image_img_tag = wp_get_attachment_image( $image->ID, 'large' );
    				<div>	 <?php echo $image_img_tag; ?></div>
    				 <!-- .gallery-thumb -->
                                           <?php }?>
                var slider="";
          slider =jQuery('#slider1').bxSlider({auto:true});   
         jQuery('#slider1').swipe( {swipeLeft:swipeLeft, swipeRight:swipeRight,threshold:0} ); 
       function swipeLeft(event){slider.goToNextSlide();}            
       function swipeRight(event){slider.goToPreviousSlide();     }        
               <?php          } ?>



and there you go.


mobile device screen resolution

Planning on developping websites for mobile devices and touch screens ? here is a list of devices and  screen resolution

Iphone 3 480 x 320
iphone 4 960 x 640
Ipad1 1024 x 768
ipad 2 2048 x 1536
Itouch 960 x 640
Samsung galaxy 800x480
HTC EVO 4G 800x480

Publish, write, on Ipad, Iphones

ever dreamed of the ideal development tool for Iphone, Ipad ? Well we've started to investigate the subject of going mobile in a cross hardware compatible manner. Today we go more precisely into mobile publishing, with the LAker technology that uses HTML5 to enable easy digital publishing on iphones and ipads.

Being specifically target for Apple, the Laker framework is a set of development features that allow

  • various content type publishing : text, photo galleries, videos
  • automatic content resizing for the devices

works without a web server, means the app you'll develop is autonomous on the device and does not require an internet  connection to read.


Another similar development tool is phoneGap (already mentionned), works on 6 platforms using web standards : http://www.phonegap.com/

Developp Iphone apps without – or with – mac

Obviously, the best way to develop iphone apps is to use the native development kit. But alternative tools offer possibilities that expand beyond the iphone and can offer multi device compatibility.

  • Mobincube is hosted service, has a free lite version, creates apps for iphone and java code for java compatible phones, blackberry, android apps
  • Phonegap is for web developers who'd have a go at iphone development via javascript : phonegap simply emulates html5. Iphone, Android, Blackberry compatible
  • Same for Appcelerator, distributor of the titanium for mobile development tool that enables developers with HTML skills to implement IPhone specific UI
  • Swebapps distribute pre defined iphone app template
  • JQtouch is  a jquery plugin that implements browser based web based applications
  • OPA is a single development platform and language that replaces PHP / MYSQL for  web based applications

More examples (13) on readwriteweb