“เด็ด”สร้างแกลลอรี่แสดงภาพจาก Instagram แบบไร้แรงโน้มถ่วง


วันนี้มาดูวิธีการสร้างแกลลอลี่อีกแบบที่น่าสนใจหลายคนคงที่จะรู้จัก instagram เป็นอย่างดีวันนี้เราเลยจะมาทำอะไรกับมันกันดูโดยเทคนิคก็คือการทำแกลลอรี่โดยการดึกภาพของเพื่อนจาก instagram ที่มีความสัมพันธ์กับเรามาแสดงเท่านี้ยังไม่พอยังมีการทำให้ภาพเป็นลักษณะของการไร้แรงโน้มถ่วงโดยเราสามารถคลิกเลือนหรือหมุนภาพได้อย่างอิสระในสภาวะที่ไรแรงโน้มถ่วงและสามารถกำหนดลักาณะของชนิดภาพในการค้นหาได้ด้วยเช่น ในนี้ให้ค้นหารูปที่เป็นรูป กาแฟ ผลการแสดงก็จะเอารูปที่เป็นกาแฟหรือมีความใกล้เคียงกันมาแสดงนั้นเอง เราลองมาดูวิธีการทำกันเลยดีกว่าว่าจะเด็ดจริงหรือป่าว

 

  • Spectragram – ปลั๊กอินนี้จะจัดการการสื่อสารกับ Instagram ของ API (เราจะต้องให้มันเข้าถึง token) เราจะใช้มันเพื่อค้นหาภาพถ่ายที่ผ่านมา
  • jQuery แรงโน้มถ่วง  – ปลั๊กอินนี้เป้นโอเพนซอร์สBox2Dที่ใช้ในการทำให้ภาพอยู่ในสภาวะไร้แรงโน้นถ่วง


วิธีการสมัคร Instagram API เข้าไปที่ http://instagram.com/developer/clients/register/ กรอกรายละเอียดเข้าไป


และแล้วเราก็จะได้ client id และ client secret มา


จากนั้นเราก็จะมาขอ TOKEN ACCESS โดยพิมพ์ url ตามด้านล่างและเปลี่ยนส่วนของ CLIENT-ID และ REDIRECT-URI ตัวอย่างด้านล่าง


https://instagram.com/oauth/authorize/?client_id=CLIENT-ID&redirect_uri=REDIRECT-URI&response_type=token


เท่านี้เราก็จะได้ client id และ TOKEN ACCESS มาเรียบร้อยแล้ว


เราจะมาลองเอา API ที่ได้มาลองของกันเลยครับ ไฟล์ index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
< !DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Instagram "Gravity" Gallery | Tutorialzine Demo</title>
        <!-- CSS Includes -->
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Cookie" />
        <link rel="stylesheet" href="assets/css/styles.css" />
        <!--[if lt IE 9]>
         <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
       < ![endif]-->
    </head>
    <body>
        <h1>Instagram Gallery</h1>
        <ul id="gallery">
           < - ภาพถ่าย instagram จะอยู่ที่นี่เป็นองค์ประกอบ <li> ->
        </ul>
        <a href="#" id="gravityButton">Start!</a>
        <!-- JavaScript includes -->
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script src="assets/js/spectragram.min.js"></script>
        <script src="assets/js/jGravity-min.js"></script>
        <script src="assets/js/script.js"></script>
    </body>
</html>


บางไฟล์ CSS ที่ใช้จะเป็นการเชื่อมโยงการใช้งานตัวอักษรจากอักษร Google ไฟล์ JS และ ปลั๊กอิน jquery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
$(function(){
    /  / / การตั้งค่าปลั๊กอิน Spectragram ทำตามคำแนะนำ
    / / เกี่ยวกับวิธีการสร้างโทเค็นการเข้าถึง
    jQuery.fn.spectragram.accessData = {
        accessToken: 'YOUR-ACCESS-TOKEN',// YOUR-ACCESS-TOKEN ใส่ตรงนี้ๆๆๆๆๆๆๆๆ
        clientID: 'CLIENT-ID' // CLIENT-ID  ใส่ตรงนี้ๆๆๆๆๆๆๆๆ
    };
   / / เรียกใช้การค้นหาเกี่ยวกับ 'กาแฟ' ใน instagram
   / / และแสดงผลลัพธ์
    $('#gallery').spectragram('getRecentTagged',{
        query: 'coffee',
        max:6
    });
    $('#gravityButton').click(function(e){
        e.preventDefault();
        / / เปิดแรงโน้มถ่วง!
        $('body').jGravity({
            target: '#gallery li',
            ignoreClass: 'ignoreMe',
            weight: 25,
            depth: 5,
            drag: true
        });
          / / ปิดการใช้งานคลิกที่รูป (ดังนั้นพวกเขาสามารถ
        / / ถูกลากโดยไม่ต้องเปลี่ยนเส้นทางเบราว์เซอร์)
        $('#gallery li').click(function(e){
            e.preventDefault()
        });
         / / Remove บางส่วนขององค์ประกอบ
        $('footer, #gravityButton').remove();
    });
});


ก็เป็นอันเสร็จครับลองทดสอบกันได้เลย แต่หน้าเสียดายที่ปลั๊กอิน jquery สำหรับการสร้างสภาวะไร้แรงโน้มถ่วงนั้น Firefox ยังไม่สามารถใช้งานได้นันเอง

ดาวน์โหลดโค้ด…..!!!

ขอบคุณข้อมูลจาก http://tutorialzine.com

Comments

comments

Powered by Facebook Comments