index.ctp

<?php echo $this->Html->css(array('slider-pro.min','index','style'));
    echo $this->fetch('css');?>

<h1 class="main_h1">つくたび</h1>
  <p class="main_p">do travel, share it</p>
    <div id="example1" class="slider-pro">
    <div class="sp-slides">
      <div class="sp-slide">
        <img class="sp-image" src="img/blank.gif"
          data-src="http://bqworks.com/slider-pro/images/image1_medium.jpg"
          data-retina="http://bqworks.com/slider-pro/images/image1_large.jpg"/>

        <p class="sp-layer sp-white sp-padding"
          data-horizontal="50" data-vertical="50"
          data-show-transition="left" data-hide-transition="up" data-show-delay="400" data-hide-delay="200">
          ニューヨーク
        </p>

        <p class="sp-layer sp-black sp-padding hide-small-screen"
          data-horizontal="180" data-vertical="50"
          data-show-transition="left" data-hide-transition="up" data-show-delay="600" data-hide-delay="100">
          ロサンゼルス
        </p>

        <p class="sp-layer sp-white sp-padding hide-medium-screen"
          data-horizontal="315" data-vertical="50"
          data-show-transition="left" data-hide-transition="up" data-show-delay="800">
          シアトル
        </p>
      </div>

          <div class="sp-slide">
            <img class="sp-image" src="./img/blank.gif"
              data-src="http://bqworks.com/slider-pro/images/image2_medium.jpg"
              data-retina="http://bqworks.com/slider-pro/images/image2_large.jpg"/>

        <h3 class="sp-layer sp-black sp-padding"
          data-horizontal="40" data-vertical="10%"
          data-show-transition="left" data-hide-transition="left">
          ヨーロッパ
        </h3>

        <p class="sp-layer sp-white sp-padding hide-medium-screen"
          data-horizontal="40" data-vertical="22%"
          data-show-transition="left" data-show-delay="200" data-hide-transition="left" data-hide-delay="200">
          イタリア
        </p>

        <p class="sp-layer sp-black sp-padding hide-small-screen"
          data-horizontal="40" data-vertical="34%"
          data-show-transition="left" data-show-delay="400" data-hide-transition="left" data-hide-delay="500">
          フランス
        </p>
      </div>

      <div class="sp-slide">
        <img class="sp-image" src="./img/blank.gif"
          data-src="http://bqworks.com/slider-pro/images/image3_medium.jpg"
          data-retina="http://bqworks.com/slider-pro/images/image3_large.jpg"/>

        <p class="sp-layer sp-white sp-padding"
          data-position="leftCenter" data-vertical="-50"
          data-show-transition="right" data-hide-transition="left" data-show-delay="500" >
          アジア:ベトナム
        </p>

        <p class="sp-layer sp-black sp-padding hide-small-screen"
          data-position="leftCenter" data-vertical="50"
          data-show-transition="left" data-show-delay="700" data-hide-transition="right" data-hide-delay="200">
          中国、韓国、台湾
        </p>
      </div>

      <div class="sp-slide">
        <img class="sp-image" src="img/blank.gif"
          data-src="http://bqworks.com/slider-pro/images/image4_medium.jpg"
          data-retina="http://bqworks.com/slider-pro/images/image4_large.jpg"/>

        <p class="sp-layer sp-black sp-padding"
          data-position="bottomLeft"
          data-show-transition="up" data-hide-transition="down">
          良質な旅行情報を <span class="hide-small-screen">まとめたwebサービスです。これから旅行に行く人は</span> <span class="hide-medium-screen">行き先への情報収集 すでに行かれた方には情報を共有して楽しんで下さい。</span>
        </p>
      </div>

      <div class="sp-slide">
        <img class="sp-image" src="img/blank.gif"
          data-src="http://bqworks.com/slider-pro/images/image5_medium.jpg"
          data-retina="http://bqworks.com/slider-pro/images/image5_large.jpg"/>

        <p class="sp-layer sp-white sp-padding"
          data-vertical="10" data-horizontal="2%" data-width="96%"
          data-show-transition="down" data-show-delay="400" data-hide-transition="up">
          Lorem ipsum dolor sit amet <span class="hide-small-screen">, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span> <span class="hide-medium-screen">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
        </p>
      </div>

      <div class="sp-slide">
        <img class="sp-image" src="img/blank.gif"
          data-src="http://bqworks.com/slider-pro/images/image6_medium.jpg"
          data-retina="http://bqworks.com/slider-pro/images/image6_large.jpg"/>

        <p class="sp-layer sp-white sp-padding"
          data-horizontal="10" data-vertical="10" data-width="35%">
          Lorem ipsum dolor sit amet <span class="hide-small-screen">, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span> <span class="hide-medium-screen">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
        </p>
      </div>

      <div class="sp-slide">
        <img class="sp-image" src="img/blank.gif"
          data-src="http://bqworks.com/slider-pro/images/image7_medium.jpg"
          data-retina="http://bqworks.com/slider-pro/images/image7_large.jpg"/>

        <p class="sp-layer sp-black sp-padding"
          data-position="bottomLeft" data-vertical="10" data-horizontal="2%" data-width="96%"
          data-show-transition="up" data-show-delay="400" data-hide-transition="down">
          Lorem ipsum dolor sit amet <span class="hide-small-screen">, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span> <span class="hide-medium-screen">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
        </p>
      </div>

      <div class="sp-slide">
        <img class="sp-image" src="img/blank.gif"
          data-src="http://bqworks.com/slider-pro/images/image8_medium.jpg"
          data-retina="http://bqworks.com/slider-pro/images/image8_large.jpg"/>
      </div>

      <div class="sp-slide">
        <img class="sp-image" src="img/blank.gif"
          data-src="http://bqworks.com/slider-pro/images/image9_medium.jpg"
          data-retina="http://bqworks.com/slider-pro/images/image9_large.jpg"/>

        <p class="sp-layer sp-black sp-padding"
          data-position="bottomLeft" data-horizontal="50" data-vertical="100"
          data-show-transition="down" data-show-delay="500" data-hide-transition="up">
          Lorem ipsum dolor sit amet
        </p>

        <p class="sp-layer sp-white sp-padding hide-small-screen"
          data-position="bottomLeft" data-horizontal="50" data-vertical="50"
          data-show-transition="up" data-show-delay="500" data-hide-transition="down">
          consectetur adipisicing elit <span class="hide-medium-screen">, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
        </p>
      </div>

      <div class="sp-slide">
        <img class="sp-image" src="img/blank.gif"
          data-src="http://bqworks.com/slider-pro/images/image10_medium.jpg"
          data-retina="http://bqworks.com/slider-pro/images/image10_large.jpg"/>
      </div>
    </div>

    <div class="sp-thumbnails">
      <div class="sp-thumbnail">
        <div class="sp-thumbnail-title">アメリカ</div>
        <div class="sp-thumbnail-description">アメリカ本土から南アメリカ大陸</div>
      </div>

      <div class="sp-thumbnail">
        <div class="sp-thumbnail-title">ヨーロッパ</div>
        <div class="sp-thumbnail-description">様々な文化を紹介しています。 イタリア フランス</div>
      </div>

      <div class="sp-thumbnail">
        <div class="sp-thumbnail-title">東アジア</div>
        <div class="sp-thumbnail-description">中国・韓国・台湾</div>
      </div>

      <div class="sp-thumbnail">
        <div class="sp-thumbnail-title">about us</div>
        <div class="sp-thumbnail-description">私たちのサービスについて</div>
      </div>

      <div class="sp-thumbnail">
        <div class="sp-thumbnail-title">上海</div>
        <div class="sp-thumbnail-description">新たな風を感じに行きましょう。</div>
      </div>

      <div class="sp-thumbnail">
        <div class="sp-thumbnail-title">東南アジア</div>
        <div class="sp-thumbnail-description">タイ/ベトナム/ミャンマー</div>
      </div>

      <div class="sp-thumbnail">
        <div class="sp-thumbnail-title">ロンドン</div>
        <div class="sp-thumbnail-description"></div>
      </div>

      <div class="sp-thumbnail">
        <div class="sp-thumbnail-title">Deserunt</div>
        <div class="sp-thumbnail-description">Mollit anim id est laborum sed ut perspiciatis</div>
      </div>

      <div class="sp-thumbnail">
        <div class="sp-thumbnail-title">Unde omnis</div>
        <div class="sp-thumbnail-description">Iste natus error sit voluptatem doloremque</div>
      </div>

      <div class="sp-thumbnail">
        <div class="sp-thumbnail-title">Laudantium</div>
        <div class="sp-thumbnail-description">Totam rem aperiam, eaque ipsa quae ab illo</div>
      </div>
    </div>
    </div>


</div>
<header>
  <nav>
  <ul class="left">
    <li><?php echo $this->Html->link('ログイン画面', '/users/login/'); ?></li>
    <li><?php echo $this->Html->link('新規ユーザ登録', '/users/add/'); ?></li>
    <li><?php echo $this->Html->link('旅行記作成', '/posts/add/'); ?></li>

  </ul>

  <ul class="right">
    <li><a href="">facebook</a></li>
    <li><a href="">twitter</a></li>
  </ul>
  </nav>
  </header>
<!--
<?php echo $this->Html->link('ログアウト', '/users/logout/'); ?>
<br>
<?php echo $this->Html->link('アカウント情報更新', '/users/edit/'); ?>
<br>
 -->

                             <!--  <ol class="wrapper"><?php
                                   echo $this->Html->link('会員登録',
                                        array('controller'=>'users','action'=>'signup',
                                        )
                                        );
                                   ?></ol>
                                   <ol><?php
                                   echo $this->Html->link('ログイン',array('controller'=>'users','action'=>'login'));
                                   ?></ol>-->
<!-- <ol><?php echo $this->Html->link('旅行記 作成',array('controller'=>'posts','action'=>'add'));?></ol>
                    </li> -->
                    <!-- <li id="top_sns">
                         <a href=""  ><img src="img/twitter-b.png" alt="twitter" class="twitter" ></a>
                          <a href="">
                          <img src="img/facebook-a.png" alt="facebook" class="facebook">
                         </a>
                    </li> -->
<ul class="tiles">
      <?php foreach ($posts as $post) :?>
<a href="/testnews/posts/view/<?php echo h($post['Post']['id'])?>" >
  <li class="posts">
  <p class="title"><?php echo h($post['Post']['title']);?></p>
  <?php echo $this->Html->link($post['Post']['title'],'/posts/view/'.$post['Post']['id']);?>
  <img src="/testnews/img/<?php echo h($post['Post']['mainimg']); ?>" alt="">
<p class="body"><?php echo h($post['Post']['body']);?></p>
  </li></a>
     <?php endforeach; ?>
     </ul>



<footer id="footer">
  <p>all right reserved by たにはた こうすけ</p>
</footer>


     <?php echo $this->Html->script('jquery.sliderPro.min.js');
    echo $this->fetch('script');?>

    <script type="text/javascript">
$( document ).ready(function( $ ) {
    $( '#example1' ).sliderPro({
      width: 2000,
      height: 750,
      arrows: true,
      buttons: false,
      waitForLayers: true,
      thumbnailWidth: 200,
      thumbnailHeight: 100,
      thumbnailPointer: true,
      autoplay: false,
      autoScaleLayers: false,
      breakpoints: {
        500: {
          thumbnailWidth: 120,
          thumbnailHeight: 50
        }
      }
    });
  });
</script>