<?php
/*
Template Name: Maker
*/
?>
<?php get_header(); ?>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="<?php echo bloginfo('template_url'); ?>/js/jquery.mThumbnailScroller.min.js"></script>

<style type="text/css">
#my-thumbs-list{
  overflow: auto;
  width: 200px;
  height: 650px;
}
</style>

<div style="width:100%;">

<div style="width:200px;background-color:#fff;padding-left:20px;float: left;">


        <div id="my-thumbs-list">
          <ul>

        <?php
        $i = 0;
        $taxonomy = 'portfolio_category';
        $term_args=array(
          'orderby' => 'name',
          'order' => 'ASC',
          'slug' => 'art'
        );
        $terms = get_terms($taxonomy,$term_args);
        if ($terms) {
          foreach( $terms as $term ) {
            $args=array(
              'post_type' => 'portfolio_page',
              'post_status' => 'publish',
              'posts_per_page' => -1,
              'tax_query' => array(
                    array(
                        'taxonomy' => 'portfolio_category',
                        'terms' => array($term->term_id),
                        'include_children' => true,
                        'operator' => 'IN'
                    )
                )
              );
            $my_query = null;
            $my_query = new WP_Query($args);
            if( $my_query->have_posts() ) {  ?>
              <div class="category section">
                <ul class="clr">
                <?php
              while ($my_query->have_posts()) : $my_query->the_post(); ?>
        <li><a id="krevati<?php $i = $i + 1; echo $i; ?>" href="#"><?php

        if ( has_post_thumbnail() ) {
               the_post_thumbnail(array(180,135));
            }  ?>


        <?php $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID, 'thumbnail') ); ?>
<?php  ?>


        <br /><?php the_title(); ?>
        </a></li>




               <?php endwhile; ?>
              </ul>
              </div>

         <?php
            }
          }
        }
        wp_reset_query();
        ?>


        <script>
            (function($){
                $(window).load(function(){
                    $("#my-thumbs-list").mThumbnailScroller({
                      axis:"y", //change to "y" for vertical scroller
                    });
                });
            })(jQuery);
        </script>
        </ul>
        </div>


</div>

<div style="width:100%;background-color:#add47a;height:650px;">

<img src="<?php echo $url; ?>" class ="gallerythumbnail" />

    </div>

</div>

</div>


    <script>
$(document).ready(function() {
    $('.gallerythumbnail').on('click', function() {
        var img = $('<img />', {src    : this.src,
                                'class': 'fullImage'
                  });

        $('.showimagediv').html(img).show();
    });
});
    </script>



    <?php get_footer(); ?>