Tag Archive initialize

slick: responsive และ ความกว้าง

เจอปัญหาว่า slick เวลาวางต่อไปอีก block ต่อจากตัวอื่น มันจะตกลงมา หรือแสดงไม่ครบแล้วแต่กรณี เพราะว่า block มันจะยาวเท่าหน้า windows เลย ไม่ใช่ container หรือ div ที่ห่อมันเอาไว้เหมือน slideshow ตัวอื่นๆ

ลองหลายวิธีจนพบว่าวิธีของคุณ kirana Slick Carousel Center Padding Demo นั้นดีที่สุด

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>kenwheeler.slick: responsive</title>
    <link href="../vendor/components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="../vendor/kenwheeler/slick/slick/slick.css" rel="stylesheet" type="text/css" />
    <link href="../vendor/kenwheeler/slick/slick/slick-theme.css" rel="stylesheet" type="text/css" />
    <link href="../vendor/twbs/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="theme.css" rel="stylesheet" type="text/css" />
    <style>
        .slickContainer {
            background: #1f6d38;
            color: #333;
            margin: 0 auto;
            padding: 40px;
            width: 80%;
        }
    </style>
</head>

<body>

    <div class="container">
        <div class="row">
            <div class="col-1 col-sm-2 col-md-3 col-lg-4 col-xl-5">
                <h1>sidebar</h1>
            </div>
            <div class="col-11 col-sm-10 col-md-9 col-lg-8 col-xl-7">
                <div class="slickContainer">
                    <div id="slideshowA">
                        <div><b>Acrobat</b><img alt="Acrobat" src="http://www.avatarsdb.com/avatars/acrobat.gif">
                            <p>แสดง acrobat.gifจาก http://www.avatarsdb.com</p>
                        </div>
                        <div><b>Cat Rain</b><img alt="Cat Rain" src="http://www.avatarsdb.com/avatars/cat_rain.gif">
                            <p>แสดง cat_rain.gifจาก http://www.avatarsdb.com</p>
                        </div>
                        <div><b>Dota Windranger</b><img alt="Dota Windranger" src="http://www.avatarsdb.com/avatars/dota_windranger.jpg">
                            <p>แสดง dota_windranger.jpgจาก http://www.avatarsdb.com</p>
                        </div>
                        <div><b>Fighting Funny</b><img alt="Fighting Funny" src="http://www.avatarsdb.com/avatars/fighting_funny.gif">
                            <p>แสดง fighting_funny.gifจาก http://www.avatarsdb.com</p>
                        </div>
                        <div><b>Fire 01</b><img alt="Fire 01" src="http://www.avatarsdb.com/avatars/fire_01.gif">
                            <p>แสดง fire_01.gifจาก http://www.avatarsdb.com</p>
                        </div>
                        <div><b>German Shepherd Puppy</b><img alt="German Shepherd Puppy" src="http://www.avatarsdb.com/avatars/german_shepherd_puppy.jpg">
                            <p>แสดง german_shepherd_puppy.jpgจาก http://www.avatarsdb.com</p>
                        </div>
                        <div><b>Girl With Cigarette</b><img alt="Girl With Cigarette" src="http://www.avatarsdb.com/avatars/girl_with_cigarette.jpg">
                            <p>แสดง girl_with_cigarette.jpgจาก http://www.avatarsdb.com</p>
                        </div>
                        <div><b>Hidden Cat</b><img alt="Hidden Cat" src="http://www.avatarsdb.com/avatars/hidden_cat.jpg">
                            <p>แสดง hidden_cat.jpgจาก http://www.avatarsdb.com</p>
                        </div>
                        <div><b>Im Fabulous</b><img alt="Im Fabulous" src="http://www.avatarsdb.com/avatars/im_fabulous.jpg">
                            <p>แสดง im_fabulous.jpgจาก http://www.avatarsdb.com</p>
                        </div>
                        <div><b>One Direction</b><img alt="One Direction" src="http://www.avatarsdb.com/avatars/One_Direction.jpg">
                            <p>แสดง One_Direction.jpgจาก http://www.avatarsdb.com</p>
                        </div>
                        <div><b>Panda Kiss</b><img alt="Panda Kiss" src="http://www.avatarsdb.com/avatars/panda_kiss.gif">
                            <p>แสดง panda_kiss.gifจาก http://www.avatarsdb.com</p>
                        </div>
                        <div><b>PC User</b><img alt="PC User" src="http://www.avatarsdb.com/avatars/pc_user.gif">
                            <p>แสดง pc_user.gifจาก http://www.avatarsdb.com</p>
                        </div>
                        <div><b>Riri Queen</b><img alt="Riri Queen" src="http://www.avatarsdb.com/avatars/riri_queen.gif">
                            <p>แสดง riri_queen.gifจาก http://www.avatarsdb.com</p>
                        </div>
                        <div><b>Tennessee</b><img alt="Tennessee" src="http://www.avatarsdb.com/avatars/tennessee.jpg">
                            <p>แสดง tennessee.jpgจาก http://www.avatarsdb.com</p>
                        </div>
                        <div><b>Tuxedo M</b><img alt="Tuxedo M" src="http://www.avatarsdb.com/avatars/Tuxedo_m.jpg">
                            <p>แสดง Tuxedo_m.jpgจาก http://www.avatarsdb.com</p>
                        </div>
                        <div><b>Tuxedo Mask</b><img alt="Tuxedo Mask" src="http://www.avatarsdb.com/avatars/tuxedo_mask.jpg">
                            <p>แสดง tuxedo_mask.jpgจาก http://www.avatarsdb.com</p>
                        </div>
                        <div><b>Ugly Face</b><img alt="Ugly Face" src="http://www.avatarsdb.com/avatars/ugly_face.gif">
                            <p>แสดง ugly_face.gifจาก http://www.avatarsdb.com</p>
                        </div>
                        <div><b>Waifu</b><img alt="Waifu" src="http://www.avatarsdb.com/avatars/waifu.jpg">
                            <p>แสดง waifu.jpgจาก http://www.avatarsdb.com</p>
                        </div>
                        <div><b>Wolf In The Snow</b><img alt="Wolf In The Snow" src="http://www.avatarsdb.com/avatars/wolf_in_the_snow.jpg">
                            <p>แสดง wolf_in_the_snow.jpgจาก http://www.avatarsdb.com</p>
                        </div>
                        <div><b>Xerxes Break Kevin</b><img alt="Xerxes Break Kevin" src="http://www.avatarsdb.com/avatars/xerxes_break_kevin.jpg">
                            <p>แสดง xerxes_break_kevin.jpgจาก http://www.avatarsdb.com</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="../vendor/components/jquery/jquery.min.js"></script>
    <script src="../vendor/kenwheeler/slick/slick/slick.min.js"></script>
    <script>
        $(function() {
            $('#slideshowA').slick({
    "autoplay": true,
    "autoplaySpeed": 3000,
    "centerMode": true,
    "infinite": true,
    "responsive": [{
            "breakpoint": 1140,
            "settings": {
                "dots": true,
                "infinite": true,
                "slidesToScroll": 4,
                "slidesToShow": 4
            }
        }, {
            "breakpoint": 960,
            "settings": {

                "dots": true,
                "infinite": true,
                "slidesToScroll": 3,
                "slidesToShow": 3
            }
        }, {
            "breakpoint": 720,
            "settings": {
                "dots": false,
                "infinite": false,
                "slidesToScroll": 2,
                "slidesToShow": 2
            }
        },
        {
            "breakpoint": 540,
            "settings": "unslick"
        }
    ],
    "speed": 300,
    "variableWidth": true,
    "zIndex": 2
});

});
    </script>
</body>

</html>

เมื่อสร้าง container ครอบตัว slide show และร่วมกับคำสั่ง responsive จะเห็นได้ว่าสามารถควบคุมการแสดงผลได้ดียิ่งขึ้น

slick: carousel / slideshow จาก ajax

ตัวอย่างการแก้ไข carousel หรือ slideshow โดย update slide จาก ajax

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>kenwheeler.slick: ajax update</title>
    <link href="../vendor/components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="../vendor/kenwheeler/slick/slick/slick.css" rel="stylesheet" type="text/css" />
    <link href="../vendor/kenwheeler/slick/slick/slick-theme.css" rel="stylesheet" type="text/css" />
    <link href="theme.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div id="slideshowA"></div><br>
    <select id="order_by">
    <option value="asc">น้อยไปมาก</option>
    <option value="desc">มากไปน้อย</option>
    <option value="random">สุ่ม</option>
    </select>
    <script src="../vendor/components/jquery/jquery.min.js"></script>
    <script src="../vendor/kenwheeler/slick/slick/slick.min.js"></script>
    <script>
        $(function() {

            var order_by = $('#order_by');
            var slideshowA = $('#slideshowA');

            function getSliderSettings() {
                return {
                    "autoplay": false,
                    "autoplaySpeed": 3000,
                    "centerMode": true,
                    "infinite": false,
                    "slidesToScroll": 4,
                    "slidesToShow": 4,
                    "speed": 300,
                    "variableWidth": true,
                    "zIndex": 2
                }
            }

            function getSlideShow() {

                $.ajax({
                    "data": {
                        "order_by": order_by.val(),
                    },
                    "success": function(data, textStatus, jqXHR) {

                        /* add items */
                        $.each(data.datas, function(index, value) {
                            slideshowA.append('<div><b>' + index + '</b><img alt="' + index + '" src="' + value + '"><p>แสดง ' + index + ' จาก http://www.avatarsdb.com</p></div>');
                        });

                        slideshowA.slick('unslick'); /* ONLY remove the classes and handlers added on initialize */
                        $('.my-slide').remove(); /* Remove current slides elements, in case that you want to show new slides. */
                        slideshowA.slick(getSliderSettings()); /* Initialize the slick again */

                        alert('ทดลองดูครับ');

                    },
                    "url": "ajax.php",
                });

            }

            order_by.change(function() {
                getSlideShow();
            });

            getSlideShow();
            slideshowA.slick(getSliderSettings());
        });
    </script>
</body>

</html>

ไฟล์ที่ส่งข้อมูลกลับมาให้

<?php
$datas = [];

if (isset($_GET['order_by'])) {
    $order_by = $_GET['order_by'];
} else {
    $order_by = 'asc';
}

$datas['Acrobat'] = 'http://www.avatarsdb.com/avatars/acrobat.gif';
$datas['Cat Rain'] = 'http://www.avatarsdb.com/avatars/cat_rain.gif';
$datas['Dota Windranger'] = 'http://www.avatarsdb.com/avatars/dota_windranger.jpg';
$datas['Fighting Funny'] = 'http://www.avatarsdb.com/avatars/fighting_funny.gif';
$datas['Fire 01'] = 'http://www.avatarsdb.com/avatars/fire_01.gif';
$datas['German Shepherd Puppy'] = 'http://www.avatarsdb.com/avatars/german_shepherd_puppy.jpg';
$datas['Girl With Cigarette'] = 'http://www.avatarsdb.com/avatars/girl_with_cigarette.jpg';
$datas['Hidden Cat'] = 'http://www.avatarsdb.com/avatars/hidden_cat.jpg';
$datas['Im Fabulous'] = 'http://www.avatarsdb.com/avatars/im_fabulous.jpg';
$datas['One Direction'] = 'http://www.avatarsdb.com/avatars/One_Direction.jpg';
$datas['Panda Kiss'] = 'http://www.avatarsdb.com/avatars/panda_kiss.gif';
$datas['PC User'] = 'http://www.avatarsdb.com/avatars/pc_user.gif';
$datas['Riri Queen'] = 'http://www.avatarsdb.com/avatars/riri_queen.gif';
$datas['Tennessee'] = 'http://www.avatarsdb.com/avatars/tennessee.jpg';
$datas['Tuxedo M'] = 'http://www.avatarsdb.com/avatars/Tuxedo_m.jpg';
$datas['Tuxedo Mask'] = 'http://www.avatarsdb.com/avatars/tuxedo_mask.jpg';
$datas['Ugly Face'] = 'http://www.avatarsdb.com/avatars/ugly_face.gif';
$datas['Waifu'] = 'http://www.avatarsdb.com/avatars/waifu.jpg';
$datas['Wolf In The Snow'] = 'http://www.avatarsdb.com/avatars/wolf_in_the_snow.jpg';
$datas['Xerxes Break Kevin'] = 'http://www.avatarsdb.com/avatars/xerxes_break_kevin.jpg';

switch ($order_by) {
    case 'desc':{krsort($datas);}
        break;

    case 'random':{
            $keys = array_keys($datas);
            shuffle($keys);
            $random = [];
            foreach ($keys as $key) {
                $random[$key] = $datas[$key];
            }
            $datas = $random;
        }break;

    case 'asc':
    default:
        {ksort($datas);}
        break;
}

header('Content-type: application/json; charset=utf-8');
echo json_encode([
    'datas' => $datas,
    'order_by' => $order_by,
]);

code บางส่วนจะอยู่ในบทความ slick: สร้าง carousel / slideshow

Credit: Reinitialize Slick js after successful ajax call

ติดตั้ง yii 2 advance ผ่าน composer

YII เพิ่งออกเวอร์ชั่น 2 มาวันที่ 12 ตุลาคม พ ศ 2557 เลยเอามาลองของซักหน่อย ก่อนอื่นให้ลง composer สำหรับติดตั้งตามยุคสมัย (จริงๆ โหลด zip มาแตกเองง่ายกว่าด้วยซ้ำไป ถ้าไม่ต้องการใช้ composer ให้โหลด zip มาแล้วข้ามขั้นตอนที่ 1 ไปเลยครับ)

  1. ก่อนอื่น update เจ้า composer ซะก่อนตามธรรมเนียม รีสตาร์ต เพื่อป้องกันปัญหาเปิด command ออกมาพิมพ์
    composer self-update
    

    ลง composer asset plugin ทำครั้งเดียวไม่ต้องทำอีก

    composer global require "fxp/composer-asset-plugin:1.0.0"
    

    โดยปกติ จะสร้าง yii project ได้โดยคำสั่ง

    composer create-project --prefer-dist yiisoft/yii2-app-basic basic
    

    composer จะ copy ไปไว้ใน folder ชื่อ basic งานที่จะทำเหมาะกับ yii Advanced Application Template มากกกว่า ที่ต่างกันคือ

    • แยก Front- and และ back-end apps ระบบใหญ่ๆ ควรแยกไว้เพื่อความสะดวกที่สำคัญ yii สามารถใช้ configuration และ model ร่วมกันได้ ทั้ง 2 ฝั่ง
    • User model มีระบบ login, User signup and password restore เบื้องต้นติดมาด้วย

    และต้องการให้เก็บใน D:\xampp\htdocs\YiiAdvanced ให้เปลี่ยนคำสั่งเป็น

    composer create-project --prefer-dist yiisoft/yii2-app-advanced D:\xampp\htdocs\YiiAdvanced
    
  2. ปรับสภาพแวดล้อมให้ช่วยเขียน code ได้ง่ายขึ้น
    • ไปที่เราติดตั้ง php ไว้ก่อน พิมพ์
      cd c:\xampp\php
      
    • พิมพ์
      php D:\xampp\htdocs\YiiAdvanced\init
      
    • เลือก Development พิมพ์ 0 enter ขึ้นจริง 1 enter
  3. สร้าง database
    • สร้าง database เปล่าๆ ไว้ก่อน ของผมชื่อ YiiAdvanceDB
    • ไปที่ common/config/main-local.php ใน folder ที่เราสร้างไว้ เพิ่ม database connection ใน components ตามตัวอย่าง
          'components' => [
              'db' => [
                  'class' => 'yii\db\Connection',
                  'dsn' => 'mysql:host=localhost;dbname=YiiAdvanceDB',
                  'username' => 'root',
                  'password' => '',
                  'charset' => 'utf8',
              ],
      
    • Command กลับไปที่เราเก็บ project file
      d:
      cd D:\xampp\htdocs\YiiAdvanced
      
    • พิมพ์
      yii migrate

      ตอบ yes ดูในฐานข้อมูล จะมีตาราง user กับ migrate เพิ่มขึ้นมา

การเตรียมโปรเจ็คด้วยยี่สำเร็จแล้ว! หวังว่าคงเข้าใจมากกว่าในคู่มือเว็บ yii นะครับ

ติดตั้ง YII

ลง yii ไม่อยาก ไม่กี่นาทีก็ได้โครงของโปรเจคแล้ว

  1. โหลดตัว framework มาก่อนจาก yiiframework
  2. แตกไฟล์ใส่ htdocs folder ของผมอยู่ที่ D:\xampp\htdocs (ปกติคือ C:\xampp\htdocs)
  3. ถ้าแตกไฟล์เก็บไว้ใน folder D:\xampp\htdocs\yii1 เปิด command พิมพ์
    • d: กด enter
    • พิมพ์ cd D:\xampp\htdocs\yii1\framework กด enter
  4. สร้าง Skeleton Application ถ้าต้องการสร้าง project ชื่อ JumpFlower (คืออะไรหาได้ใน google) เก็บที่ D:\xampp\htdocs\yii1\JumpFlower พิมพ์
    yiic webapp <b>D:\xampp\htdocs\yii1\JumpFlower

    แล้ว enter ตอบ yes รอจนขึ้นข้อความ “your application has been create successfully under …”

  5. เปิดไฟล์ D:\xampp\htdocs\yii1\JumpFlower\protected\config\database.php แก้ เอา comment ออก ใส่ชื่อ database username password ใม่ตามที่ใช้จริง
    <?php
    
    // This is the database connection configuration.
    return array(
    	'connectionString' => 'sqlite:'.dirname(__FILE__).'/../data/testdrive.db',
    	'connectionString' => 'mysql:host=localhost;dbname=yii1',
    	'emulatePrepare' => true,
    	'username' => 'root',
    	'password' => '',
    	'charset' => 'utf8',
    	'tablePrefix'=>'tbl_',
    );

เสร็จ!