PhotoSwipe สร้าง SlideShow ด้วย jQuery Mobile

Jquery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , Jquery ม Ajax

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
Ik Kat
PHP Super Member
PHP Super Member
โพสต์: 291
ลงทะเบียนเมื่อ: 26/06/2017 2:32 pm

PhotoSwipe สร้าง SlideShow ด้วย jQuery Mobile

โพสต์โดย Ik Kat » 28/06/2017 5:28 pm

PhotoSwipe ไม่ใช่ปลั๊กอินของ jQuery แต่ถูกพัฒนาขึ้นเพื่อใช้ในการสร้าง Image Gallery SlideShow โดยให้รองรับกับหน้าจอมือถือในขนาดต่าง ๆ และสามารถทำงานร่วมกับ PHP และ MySQL ได้ ซึ่ง PhotoSwipe จะเปรียบเสมือนตัวที่ใช้ในการออกแบบ SlideShow ให้กับเรา

MT19 28-6-60(53).png
PhotoSwipe
MT19 28-6-60(53).png (357.87 KiB) เปิดดู 14 ครั้ง

การตั้งค่าใน : HTML

โค้ด: เลือกทั้งหมด

var items = [
    // slide 1 with HTML
    {
        html: '<div><h1>Any HTML <a href="http://example.com">content</a></h1></div>'
    },

    // slide 2 with image
    {
        src: 'path/to/image.jpg',
        w:600,
        h:200
    }
];


// initialise as usual
var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);

// You don't necessarily need to have "html" property in slide object initially.
// You may create it dynamically in gettingData event:
/*
    gallery.listen('gettingData', function(index, item) {
        if(index === 3) {
            item.html = '<div>Dynamically generated HTML ' + Math.random() + '</div>';
        }

    });
*/

// Note that init() method is called after gettingData event is bound
gallery.init();

การตั้งค่า Responsive ให้กับภาพ :

โค้ด: เลือกทั้งหมด

var items = [

    // Slide 1
    {
        mediumImage: {
            src: 'path/to/medium-image-1.jpg',
            w:800,
            h:600
        },
        originalImage: {
            src: 'path/to/large-image-1.jpg',
            w: 1400,
            h: 1050
        }
    },

    // Slide 2
    // {
    //     mediumImage: {
    //         src: 'path/to/medium-image-2.jpg',
    //         ...
    //     
    // ...

];
Then:
// initialise as usual
var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);

// create variable that will store real size of viewport
var realViewportWidth,
    useLargeImages = false,
    firstResize = true,
    imageSrcWillChange;

// beforeResize event fires each time size of gallery viewport updates
gallery.listen('beforeResize', function() {
    // gallery.viewportSize.x - width of PhotoSwipe viewport
    // gallery.viewportSize.y - height of PhotoSwipe viewport
    // window.devicePixelRatio - ratio between physical pixels and device independent pixels (Number)
    //                          1 (regular display), 2 (@2x, retina) ...


    // calculate real pixels when size changes
    realViewportWidth = gallery.viewportSize.x * window.devicePixelRatio;

    // Code below is needed if you want image to switch dynamically on window.resize

    // Find out if current images need to be changed
    if(useLargeImages && realViewportWidth < 1000) {
        useLargeImages = false;
        imageSrcWillChange = true;
    } else if(!useLargeImages && realViewportWidth >= 1000) {
        useLargeImages = true;
        imageSrcWillChange = true;
    }

    // Invalidate items only when source is changed and when it's not the first update
    if(imageSrcWillChange && !firstResize) {
        // invalidateCurrItems sets a flag on slides that are in DOM,
        // which will force update of content (image) on window.resize.
        gallery.invalidateCurrItems();
    }

    if(firstResize) {
        firstResize = false;
    }

    imageSrcWillChange = false;

});


// gettingData event fires each time PhotoSwipe retrieves image source & size
gallery.listen('gettingData', function(index, item) {

    // Set image source & size based on real viewport width
    if( useLargeImages ) {
        item.src = item.originalImage.src;
        item.w = item.originalImage.w;
        item.h = item.originalImage.h;
    } else {
        item.src = item.mediumImage.src;
        item.w = item.mediumImage.w;
        item.h = item.mediumImage.h;
    }

    // It doesn't really matter what will you do here,
    // as long as item.src, item.w and item.h have valid values.
    //
    // Just avoid http requests in this listener, as it fires quite often

});


// Note that init() method is called after gettingData event is bound
gallery.init();


ตัวอย่าง PhotoSwipe

MT19 28-6-60(51).png
PhotoSwipe
MT19 28-6-60(51).png (558.52 KiB) เปิดดู 14 ครั้ง

MT19 28-6-60(52).png
PhotoSwipe
MT19 28-6-60(52).png (905.39 KiB) เปิดดู 14 ครั้ง

HTML :

โค้ด: เลือกทั้งหมด

<button id="btn">Open PhotoSwipe</button>

<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

    <!-- Background of PhotoSwipe.
         It's a separate element, as animating opacity is faster than rgba(). -->
    <div class="pswp__bg"></div>

    <!-- Slides wrapper with overflow:hidden. -->
    <div class="pswp__scroll-wrap">

        <!-- Container that holds slides. PhotoSwipe keeps only 3 slides in DOM to save memory. -->
        <div class="pswp__container">
            <!-- don't modify these 3 pswp__item elements, data is added later on -->
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>

        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
        <div class="pswp__ui pswp__ui--hidden">

            <div class="pswp__top-bar">

                <!--  Controls are self-explanatory. Order can be changed. -->

                <div class="pswp__counter"></div>

                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>

                <button class="pswp__button pswp__button--share" title="Share"></button>

                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>

                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>

                <!-- Preloader demo https://codepen.io/dimsemenov/pen/yyBWoR -->
                <!-- element will get class pswp__preloader--active when preloader is running -->
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                      <div class="pswp__preloader__cut">
                        <div class="pswp__preloader__donut"></div>
                      </div>
                    </div>
                </div>
            </div>

            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div>
            </div>

            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
            </button>

            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
            </button>

            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>

          </div>

        </div>

</div>

CSS :

โค้ด: เลือกทั้งหมด

.hello-slide {
  width: 100%;
  max-width: 400px;
  color: #FFF;
  margin: 120px auto 0;
  text-align: center;
 
  font-family: "Helvetica Neue", Arial, sans-serif;
 
}
h1 {
  font-weight: normal;
}
.hello-slide a {
  color: #B5AEF7 !important;
}

JS :

โค้ด: เลือกทั้งหมด

var openPhotoSwipe = function() {
    var pswpElement = document.querySelectorAll('.pswp')[0];

    // build items array
    var items = [
        {
        html: '<div class="hello-slide"><h1>Hello world <a href="http://example.com">example.com</a></h1></div>'
    },
        {
            src: 'https://farm7.staticflickr.com/6175/6176698785_7dee72237e_b.jpg',
            w: 1024,
            h: 683
        }
    ];
   
    // define options (if needed)
    var options = {
             // history & focus options are disabled on CodePen       
        history: false,
        focus: false,

        showAnimationDuration: 0,
        hideAnimationDuration: 0
       
    };
   
    var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
    gallery.init();
};

openPhotoSwipe();

document.getElementById('btn').onclick = openPhotoSwipe;


คำแนะนำ
- ควรใช้ IE 8 ขึ้นไป
- ไม่ควรใช้ภาพที่มีขนาดเกิน 2000 x 1500px เพราะจะทำให้การทำงานช้าลง

ศึกษาข้อมูลเพิ่มเติม และดาวน์โหลดได้ที่ : http://photoswipe.com

  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 3 และ บุคคลทั่วไป 0 ท่าน