Tag: gallery

  • PhotoSwipe : Image Gallery ใช้กับ Touch Screen

    PhotoSwipe : Image Gallery ใช้กับ Touch Screen

    วันนี้มี Plugin ใช้ทำ Image Gallery สำหรับใช้กับ Touch Screen ได้ มาชมวิดีโอแนะนำตัว PhotoSwipe กันก่อนนะครับ

    PhotoSwipe

    ในเว็บของ PhotoSwipe นั้นได้อธิบายเกี่ยวกับตัว Plugin ตัวนี้ไว้ว่า

    What is it?

    PhotoSwipe is a FREE HTML/CSS/JavaScript based image gallery specifically targeting mobile devices.

    Who is it for?

    Developers and designers requiring an interactive image gallery on their mobile website with the look and feel of a native app.

    Why use it?

    PhotoSwipe provides your visitors with a familiar and intuitive interface allowing them to interact with images on your mobile website.

    ใช้กับมือถือ platform ไหนได้บ้าง

    PhotoSwipe : Image Gallery สำหรับ Touch Screeen [1]

    สำหรับตัว PhotoSwipe นั้นสนับสนุน iOS, Android รวมถึง BlackBerry และใช้งานคู่กับ jQuery หรือ PhoneGap ได้ด้วยครับ

    วิธีการใช้งาน PhotoSwipe

    ดาวน์โหลดตัว PhotoSwipe ที่นี่เลยครับ Download PhotoSwipe หลังจากนั้นก็เพิ่ม code นี้ไปที่ส่วน head นะครับ

    [html]
    <script type="text/javascript" src="klass.min.js"></script>
    <script type="text/javascript" src="code.photoswipe-3.0.4.min.js"></script>
    [/html]

    และเรียกใช้งานโดย

    [javascript]
    // Set up PhotoSwipe with all anchor tags in the Gallery container
    document.addEventListener(‘DOMContentLoaded’, function(){

    var myPhotoSwipe = Code.PhotoSwipe.attach( window.document.querySelectorAll(‘#Gallery a’), { enableMouseWheel: false , enableKeyboard: false } );

    }, false);
    [/javascript]

    แต่ถ้าถนัดเป็น jQuery ก็เรียกใช้งานแบบนี้เลยครับ

    [javascript]
    //jQuery version
    $(document).ready(function(){

    var myPhotoSwipe = $("#Gallery a").photoSwipe({ enableMouseWheel: false , enableKeyboard: false });

    });
    [/javascript]

    และในส่วน HTML เพื่อใช้ประกอบให้ตัว PhotoSwipe ทำงานได้นั้น ก็มีลักษณะแบบนี้ครับ

    [html]
    <ul id="Gallery">
    <li><a href="images/full/01.jpg"><img src="images/thumb/01.jpg" alt="Image 01" /></a></li>
    <li><a href="images/full/02.jpg"><img src="images/thumb/02.jpg" alt="Image 02" /></a></li>
    <li><a href="images/full/03.jpg"><img src="images/thumb/03.jpg" alt="Image 03" /></a></li>
    <li><a href="images/full/04.jpg"><img src="images/thumb/04.jpg" alt="Image 04" /></a></li>
    <li><a href="images/full/05.jpg"><img src="images/thumb/05.jpg" alt="Image 05" /></a></li>
    <li><a href="images/full/06.jpg"><img src="images/thumb/06.jpg" alt="Image 06" /></a></li>
    </ul>
    [/html]

    ซึ่งตัว PhotoSwipe นั้น เราสามารถจะปรับแต่งลูกเล่นมันได้หลากหลายพอสมควร รายละเอียดเพิ่มเติมและตัวอย่างการใช้งาน PhotoSwipe นั้น ให้ไปดูที่เว็บของ PhotoSwipe เลยครับ

    ที่มา : PhotoSwipe