โดย Ik Kat » 28/06/2017 5:28 pm
PhotoSwipe ไม่ใช่ปลั๊กอินของ
jQuery แต่ถูกพัฒนาขึ้นเพื่อใช้ในการสร้าง Image Gallery SlideShow โดยให้รองรับกับหน้าจอมือถือในขนาดต่าง ๆ และสามารถทำงานร่วมกับ
PHP และ
MySQL ได้ ซึ่ง PhotoSwipe จะเปรียบเสมือนตัวที่ใช้ในการออกแบบ SlideShow ให้กับเรา
- PhotoSwipe
- MT19 28-6-60(53).png (357.87 KiB) Viewed 1266 times
การตั้งค่าใน : 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
- PhotoSwipe
- MT19 28-6-60(51).png (558.52 KiB) Viewed 1266 times
- PhotoSwipe
- MT19 28-6-60(52).png (905.39 KiB) Viewed 1266 times
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
[b]PhotoSwipe[/b] ไม่ใช่ปลั๊กอินของ [url=https://www.mindphp.com/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD/73-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/3863-what-is-jquery.html]jQuery[/url] แต่ถูกพัฒนาขึ้นเพื่อใช้ในการสร้าง Image Gallery SlideShow โดยให้รองรับกับหน้าจอมือถือในขนาดต่าง ๆ และสามารถทำงานร่วมกับ [url=https://www.mindphp.com/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD/73-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/2127-php-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3.html]PHP[/url] และ [url=https://www.mindphp.com/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD/73-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/2088-sql-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3.html]MySQL[/url] ได้ ซึ่ง PhotoSwipe จะเปรียบเสมือนตัวที่ใช้ในการออกแบบ SlideShow ให้กับเรา
[attachment=0]MT19 28-6-60(53).png[/attachment]
[b]การตั้งค่าใน : HTML[/b]
[code]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();[/code]
[b]การตั้งค่า Responsive ให้กับภาพ :[/b]
[code]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();[/code]
[b]ตัวอย่าง PhotoSwipe[/b]
[attachment=2]MT19 28-6-60(51).png[/attachment]
[attachment=1]MT19 28-6-60(52).png[/attachment]
HTML :
[code]<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>[/code]
CSS :
[code].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;
}[/code]
JS :
[code]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;[/code]
[b]คำแนะนำ[/b]
- ควรใช้ IE 8 ขึ้นไป
- ไม่ควรใช้ภาพที่มีขนาดเกิน 2000 x 1500px เพราะจะทำให้การทำงานช้าลง
ศึกษาข้อมูลเพิ่มเติม และดาวน์โหลดได้ที่ : http://photoswipe.com