title: Justified-Gallery with Swipebox for Wordpress
body: <p>at the moment I'm trying to upgrade my custom template for wordpress with a new gallery. I want to use the <a href="https://github.com/miromannino/Justified-Gallery/" rel="nofollow">Justified-Gallery</a> with the swipebox extension.</p>
  
  <p>I already included the necessary .js and .css files and my functions.php looks like that:</p>
  
  <pre><code>add_filter( 'post_gallery', 'wpse8170_gallery_shortcode', 10, 2 );
  function wpse8170_gallery_shortcode( $output, $attr ) {
  $post = get_post();
  
  static $instance = 0;
  $instance++;
  
  // override default link settings
  if ( empty(  $attr['link'] ) ) {
      $attr['link'] = 'none'; // set your default value here
  }
  
  if ( !empty( $attr['ids'] ) ) {
      // 'ids' is explicitly ordered, unless you specify otherwise.
      if ( empty( $attr['orderby'] ) )
          $attr['orderby'] = 'post__in';
      $attr['include'] = $attr['ids'];
  }
  
  // We're trusting author input, so let's at least make sure it looks like a valid orderby statement
  if ( isset( $attr['orderby'] ) ) {
      $attr['orderby'] = sanitize_sql_orderby( $attr['orderby'] );
      if ( !$attr['orderby'] )
          unset( $attr['orderby'] );
  }
  
  extract(shortcode_atts(array(
      'order'      =&gt; 'ASC',
      'orderby'    =&gt; 'menu_order ID',
      'id'         =&gt; $post ? $post-&gt;ID : 0,
      'itemtag'    =&gt; 'dl',
      'icontag'    =&gt; 'dt',
      'captiontag' =&gt; 'dd',
      'columns'    =&gt; 3,
      'size'       =&gt; 'thumbnail',
      'include'    =&gt; '',
      'exclude'    =&gt; ''
  ), $attr, 'gallery'));
  
  $id = intval($id);
  if ( 'RAND' == $order )
      $orderby = 'none';
  
  if ( !empty($include) ) {
      $_attachments = get_posts( array('include' =&gt; $include, 'post_status' =&gt; 'inherit', 'post_type' =&gt; 'attachment', 'post_mime_type' =&gt; 'image', 'order' =&gt; $order, 'orderby' =&gt; $orderby) );
  
      $attachments = array();
      foreach ( $_attachments as $key =&gt; $val ) {
          $attachments[$val-&gt;ID] = $_attachments[$key];
      }
  } elseif ( !empty($exclude) ) {
      $attachments = get_children( array('post_parent' =&gt; $id, 'exclude' =&gt; $exclude, 'post_status' =&gt; 'inherit', 'post_type' =&gt; 'attachment', 'post_mime_type' =&gt; 'image', 'order' =&gt; $order, 'orderby' =&gt; $orderby) );
  } else {
      $attachments = get_children( array('post_parent' =&gt; $id, 'post_status' =&gt; 'inherit', 'post_type' =&gt; 'attachment', 'post_mime_type' =&gt; 'image', 'order' =&gt; $order, 'orderby' =&gt; $orderby) );
  }
  
  if ( empty($attachments) )
      return '';
  
  if ( is_feed() ) {
      $output = "\n";
      foreach ( $attachments as $att_id =&gt; $attachment )
          $output .= wp_get_attachment_link($att_id, $size, true) . "\n";
      return $output;
  }
  
  $itemtag = tag_escape($itemtag);
  $captiontag = tag_escape($captiontag);
  $icontag = tag_escape($icontag);
  $valid_tags = wp_kses_allowed_html( 'post' );
  if ( ! isset( $valid_tags[ $itemtag ] ) )
      $itemtag = 'dl';
  if ( ! isset( $valid_tags[ $captiontag ] ) )
      $captiontag = 'dd';
  if ( ! isset( $valid_tags[ $icontag ] ) )
      $icontag = 'dt';
  
  $columns = intval($columns);
  $itemwidth = $columns &gt; 0 ? floor(100/$columns) : 100;
  $float = is_rtl() ? 'right' : 'left';
  
  $selector = "gallery-{$instance}";
  
  $gallery_style = $gallery_div = '';
  if ( apply_filters( 'use_default_gallery_style', true ) )
      $gallery_style = "
      &lt;style type='text/css'&gt;
          #{$selector} {
              margin: auto;
          }
          #{$selector} .gallery-item {
              float: {$float};
              margin-top: 10px;
              text-align: center;
              width: {$itemwidth}%;
          }
          #{$selector} img {
              border: 2px solid #cfcfcf;
          }
          #{$selector} .gallery-caption {
              margin-left: 0;
          }
          /* see gallery_shortcode() in wp-includes/media.php */
      &lt;/style&gt;";
  $size_class = sanitize_html_class( $size );
  $gallery_div = "&lt;div class='swipeboxEx'&gt;";
  $output = apply_filters( 'gallery_style', $gallery_style . "\n\t\t" . $gallery_div );
  
  $i = 0;
  foreach ( $attachments as $id =&gt; $attachment ) {
      if ( ! empty( $attr['link'] ) &amp;&amp; 'file' === $attr['link'] )
          $image_output = wp_get_attachment_link( $id, $size, false, false );
      elseif ( ! empty( $attr['link'] ) &amp;&amp; 'none' === $attr['link'] )
          $image_output = wp_get_attachment_image( $id, $size, false );
      else
          $image_output = wp_get_attachment_link( $id, $size, true, false );
  
      $image_meta  = wp_get_attachment_metadata( $id );
  
      $orientation = '';
      if ( isset( $image_meta['height'], $image_meta['width'] ) )
          $orientation = ( $image_meta['height'] &gt; $image_meta['width'] ) ? 'portrait' : 'landscape';
  
      $output .= $image_output;
  }
  
  $output .= "&lt;/div&gt;\n";
  
  return $output; }
  </code></pre>
  
  <p>I also included some script into the footer of the template, which I think probably must be right, because the gallery layout is styled right, but the swipebox is missing. With google I tried and tried, but I can't find a solution.</p>
  
  <p><a href="http://landhousemedia.bplaced.net/wordpress/gallery-test-2/" rel="nofollow">Here</a> you can view a test page.</p>