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
      <?php
       /*
      Plugin Name: POLEOUEST-bxslider
       
      Description: 
      Author: erwan
      Version: 0.3
      Author URI: http://poleouest.Com/
      */
      
      function my_init() {
          if (!is_admin()) {
            wp_enqueue_script('jquery');
            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');

      s

 

    • put the appropriate javascript files in the js directory
  • the gallery post format code (loop code
                <div id="slider1"  >
    				<?php
    					$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 }?>
     </div>
                
                <script>
                var slider="";
    jQuery(document).ready(function(){                
          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();     }        
                </script>
               <?php          } ?>

    )

 

and there you go.

 

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

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