Skip to content

Commit

Permalink
docs upd
Browse files Browse the repository at this point in the history
  • Loading branch information
dimsemenov committed Jan 15, 2015
1 parent 814d74a commit 3d2fa36
Show file tree
Hide file tree
Showing 8 changed files with 61 additions and 61 deletions.
22 changes: 11 additions & 11 deletions website/documentation/api.md
Expand Up @@ -31,23 +31,23 @@ var photoswipeInstance = new PhotoSwipe( /* ... */ );
```javascript
var pswp = new PhotoSwipe( /* ... */ );

// Intialise and open gallery
// Initialize and open gallery
// (you can bind events before this method)
pswp.init();

// Go to slide by index
// @param {int} `index`
pswp.goTo(index);

// Go to next slide
// Go to the next slide
pswp.next();

// Go to previous slide
// Go to the previous slide
pswp.prev();

// Update gallery size
// @param {boolean} `force` If you set it to `true`,
// size of gallery will be updated
// size of the gallery will be updated
// even if viewport size hasn't changed.
pswp.updateSize(force);

Expand All @@ -72,15 +72,15 @@ pswp.destroy()
// });
pswp.zoomTo(destZoomLevel, centerPoint, speed, easingFn, updateFn);

// Apply zoom and pan to current slide
// Apply zoom and pan to the current slide
//
// @param {number} `zoomLevel`
// @param {int} `panX`
// @param {int} `panY`
//
// For example: `pswp.applyZoomPan(1, 0, 0)`
// will zoom current image to original size
// and will place it in top left corner
// will zoom current image to the original size
// and will place it on top left corner
//
//
pswp.applyZoomPan(zoomLevel, panX, panY);
Expand Down Expand Up @@ -159,7 +159,7 @@ Available events:
```javascript

// Before slides change
// (before content is changed, but after navigation)
// (before the content is changed, but after navigation)
// Update UI here (like "1 of X" indicator)
pswp.listen('beforeChange', function() { });

Expand All @@ -169,7 +169,7 @@ pswp.listen('afterChange', function() { });

// Image loaded
pswp.listen('imageLoadComplete', function(index, item) {
// index - index of slide that was loaded
// index - index of a slide that was loaded
// item - slide object
});

Expand All @@ -180,10 +180,10 @@ pswp.listen('resize', function() { });
// which happens before content is set, or before lazy-loading is initiated.
// Use it to dynamically change properties
pswp.listen('gettingData', function(index, item) {
// index - index of slide that was loaded
// index - index of a slide that was loaded
// item - slide object

// e.g. change path to image based on `something`
// e.g. change path to the image based on `something`
if( something ) {
item.src = item.something;
} else {
Expand Down
8 changes: 4 additions & 4 deletions website/documentation/custom-html-in-slides.md
Expand Up @@ -58,10 +58,10 @@ gallery.init();
Additional important notes:

- To avoid conflicts with third-party modules, slide that has `html` property, should not have `src` (image) property.
- PhotoSwipe is designed for images, not as a scroller of text content. Use "custom HTML" feature as addition, for example for slide with related galleries, introductory slide, or advertisements BETWEEN images.
- It's strongly not recommended to add video or audio elements using this method (including YouTube, Vimeo etc. iframes). As HTML5 video blocks touch events over it in many mobile browsers (user won't be able to swipe above it). If you really need to have video in PhotoSwipe, you may add it as modal that appears when user taps on current slide, you can dynamically create modal in DOM and append it after `.pswp__scroll-wrap` element.
- PhotoSwipe is designed for images, not as a scroller of text content. Use "custom HTML" feature as an addition, for example for slide with related galleries, an introductory slide, or advertisements BETWEEN images.
- It's strongly not recommended to add video or audio elements using this method (including YouTube, Vimeo etc. iframes). As HTML5 video blocks touch events over it in many mobile browsers (user won't be able to swipe it). If you really need to have video in PhotoSwipe, you may add it as modal that appears when user taps on current slide, you can dynamically create modal in DOM and append it after `.pswp__scroll-wrap` element.
- If you have initial zoom-in/zoom-out transition enabled, PhotoSwipe will automatically disable it if current slide has `html`, simple fade transition will be used instead.
- By default PhotoSwipe will allow click event just on links (`<a>`) and their child elements. To change this behaviour look into `isClickableElement` option or `preventDragEvent` event.
- By default PhotoSwipe will allow click event just on links (`<a>`) and their child elements. To change this behavior look into `isClickableElement` option or `preventDragEvent` event.
- Zoom of HTML slides is not supported, yet.

Example:
Expand All @@ -72,7 +72,7 @@ Example:
</p>
</div>

Tip: you may download example from CodePen to play with it locally (`Edit on CodePen` -> `Share` -> `Export .zip`).
Tip: you may download the example from CodePen to play with it locally (`Edit on CodePen` -> `Share` -> `Export .zip`).

Know how this page can be improved? [Suggest an edit!](https://github.com/dimsemenov/PhotoSwipe/blob/master/website/documentation/custom-html-in-slides.md)

Expand Down
24 changes: 12 additions & 12 deletions website/documentation/faq.md
Expand Up @@ -18,12 +18,12 @@ markdownpage: true

---

### <a name="keep-updated"></a> Where is changelog, how to do I get notified about updates?
### <a name="keep-updated"></a> Where is the changelog, how to do I get notified about updates?

Each time PhotoSwipe gets an update - [GitHub releases](https://github.com/dimsemenov/PhotoSwipe/releases) page is updated with details.
Releases page has an [Atom feed](https://github.com/dimsemenov/PhotoSwipe/releases.atom), you may setup email notifications when feed is updated [using IFTTT](https://ifttt.com/recipes/230902-photoswipe-update-notification).

Also you may join my [email newsletter](http://dimsemenov.com/subscribe.html?i=pswp) (sent 3-4 times a year), follow [@PhotoSwipe on Twitter](http://twitter.com/photoswipe), and star/watch [PhotoSwipe on GitHub](https://github.com/dimsemenov/PhotoSwipe/).
Also, you may join my [email newsletter](http://dimsemenov.com/subscribe.html?i=pswp) (sent 3-4 times a year), follow [@PhotoSwipe on Twitter](http://twitter.com/photoswipe), and star/watch [PhotoSwipe on GitHub](https://github.com/dimsemenov/PhotoSwipe/).

It's very important to keep PhotoSwipe updated, especially during the beta period.

Expand All @@ -38,22 +38,22 @@ Plugin is under development and will be released in early-mid 2015. You may [sub
Use another gallery script ([1](http://dimsemenov.com/plugins/magnific-popup/), [2](http://dimsemenov.com/plugins/royal-slider/gallery/)), or find a way:

- You can read size of an image by downloading only small part of it ([PHP version](http://stackoverflow.com/questions/4635936/super-fast-getimagesize-in-php), [Ruby](https://github.com/sdsykes/fastimage), [Node.js](http://stackoverflow.com/a/20111234/331460)).
- You can store size of image directly in its filename and parse it on frontend during PhotoSwipe initialization.
- Most CMS store size of an image in database and have API to retrieve it.
- Most web API (Facebook, 500px, Instagram, Flickr, Twitter, YouTube, Vimeo etc.) return size of images.
- You can store size of an image directly in its filename and parse it on frontend during PhotoSwipe initialization.
- Most CMS store size of an image in a database and have API to retrieve it.
- Most web API (Facebook, 500px, Instagram, Flickr, Twitter, YouTube, Vimeo etc.) return a size of images.

Dimensions are used for progressive loading, stretched placeholder, initial zoom-in transition, paning, zooming, caption positioning.
Dimensions are used for progressive loading, stretched placeholder, initial zoom-in transition, panning, zooming, caption positioning.


### <a name="different-thumbnail-dimensions"></a> My thumbnails are square but large images have different dimensions, what to do with opening/closing transition?
### <a name="different-thumbnail-dimensions"></a> My thumbnails are square, but large images have different dimensions, what to do with opening/closing transition?

- Option 1: set option `showHideOpacity:true`, and opacity will be applied to main image, not just to background.
- Option 1: set option `showHideOpacity:true`, and opacity will be applied to the main image, not just to the background.
- Option 2: disable transition entirely (options `showAnimationDuration` and `hideAnimationDuration`).

I'll try to explain why this is not implemented yet. There are two ways to make expanding area animation:

1. Animate `clip` property. But [it forces Paint](http://csstriggers.com/#clip) each time, which makes animations jerky.
2. Wrap image that expands with two divs that have `overflow:hidden` and reposition them via `transform:translate` during the animation so they clip it at right parts. This method does not force Paint or Layout, but requires two additional elements in markup of each slide. Test prototype showed that it works smooth only on high-end mobile devices (like Nexus 5 with Chrome). Maybe some day I'll implement it.
2. Wrap an image that expands with two divs that have `overflow:hidden` and reposition them via `transform:translate` during the animation so they clip it at right parts. This method does not force Paint or Layout, but requires two additional elements in markup of each slide. Test prototype showed that it works smooth only on high-end mobile devices (like Nexus 5 with Chrome). Maybe some day I'll implement it.

### My captions are large, can I add scroll to them?

Expand All @@ -64,14 +64,14 @@ See [issue #657](https://github.com/dimsemenov/PhotoSwipe/issues/657).

### GIF images sometimes freeze on iOS8

iOS Safari has a bug that freezes GIF images that are shifted outside of the window (or outside of element with `overflow:hidden`). My recommendatiuon is to avoid using animated GIFs in PhotoSwipe at all, as they slow down animation performance in any mobile browser. But if you really need to use it, refer to [this hack](https://github.com/dimsemenov/PhotoSwipe/issues/662#issuecomment-66420874).
iOS Safari has a bug that freezes GIF images that are shifted outside of the window (or outside of element with `overflow:hidden`). My recommendation is to avoid using animated GIFs in PhotoSwipe at all, as they slow down animation performance in any mobile browser. But if you really need to use it, refer to [this hack](https://github.com/dimsemenov/PhotoSwipe/issues/662#issuecomment-66420874).


### <a name="mobile-crash"></a> Mobile browser crashes when opening PhotoSwipe

Mostly, it can happen on mobile devices with low memory limit &ndash; iOS Safari, default browser in old Android (before KitKat). The most common reason of crash is too big images (usually larger than 2000x1500px). PhotoSwipe applies hardware-acceleration on images, which consumes more memory than regular image on page, so when you run out of limit browser starts lagging or even crashes.
Mostly, it can happen on mobile devices with low memory limit &ndash; iOS Safari, default browser in old Android (before KitKat). The most common reason of a crash is too big images (usually larger than 2000x1500px). PhotoSwipe applies hardware-acceleration on images, which consumes more memory than regular image on page, so when you run out of limit browser starts lagging or even crashes.

So [serve responsive images](responsive-images.html), or at least don't serve huge images. Ideally, for an average 900x600 phone you should serve 1200px wide image. Note that if everything works smoothly in iOS Simulator, it doesn't mean that crash won't occure on real device.
So [serve responsive images](responsive-images.html), or at least don't serve huge images. Ideally, for an average 900x600 phone you should serve 1200px wide image. Note that if everything works smoothly in iOS Simulator, it doesn't mean that crash won't occur on real device.

In much more rare cases crash can occur if you open PhotoSwipe during some process on your page (this can be initial page load/render, or some complex animation on page), try to delay PhotoSwipe initialization until page is rendered (18-300ms after document.ready), especially if you are displaying large images.

Expand Down

0 comments on commit 3d2fa36

Please sign in to comment.