{"action":"created","issue":{"url":"https://api.github.com/repos/woothemes/woocommerce/issues/10721","repository_url":"https://api.github.com/repos/woothemes/woocommerce","labels_url":"https://api.github.com/repos/woothemes/woocommerce/issues/10721/labels{/name}","comments_url":"https://api.github.com/repos/woothemes/woocommerce/issues/10721/comments","events_url":"https://api.github.com/repos/woothemes/woocommerce/issues/10721/events","html_url":"https://github.com/woothemes/woocommerce/issues/10721","id":149109050,"number":10721,"title":"Product galleries and replacing PrettyPhoto","user":{"login":"jameskoster","id":846565,"avatar_url":"https://avatars.githubusercontent.com/u/846565?v=3","gravatar_id":"","url":"https://api.github.com/users/jameskoster","html_url":"https://github.com/jameskoster","followers_url":"https://api.github.com/users/jameskoster/followers","following_url":"https://api.github.com/users/jameskoster/following{/other_user}","gists_url":"https://api.github.com/users/jameskoster/gists{/gist_id}","starred_url":"https://api.github.com/users/jameskoster/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jameskoster/subscriptions","organizations_url":"https://api.github.com/users/jameskoster/orgs","repos_url":"https://api.github.com/users/jameskoster/repos","events_url":"https://api.github.com/users/jameskoster/events{/privacy}","received_events_url":"https://api.github.com/users/jameskoster/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/woothemes/woocommerce/labels/Enhancement","name":"Enhancement","color":"f9d0c4"}],"state":"open","locked":false,"assignee":{"login":"jameskoster","id":846565,"avatar_url":"https://avatars.githubusercontent.com/u/846565?v=3","gravatar_id":"","url":"https://api.github.com/users/jameskoster","html_url":"https://github.com/jameskoster","followers_url":"https://api.github.com/users/jameskoster/followers","following_url":"https://api.github.com/users/jameskoster/following{/other_user}","gists_url":"https://api.github.com/users/jameskoster/gists{/gist_id}","starred_url":"https://api.github.com/users/jameskoster/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jameskoster/subscriptions","organizations_url":"https://api.github.com/users/jameskoster/orgs","repos_url":"https://api.github.com/users/jameskoster/repos","events_url":"https://api.github.com/users/jameskoster/events{/privacy}","received_events_url":"https://api.github.com/users/jameskoster/received_events","type":"User","site_admin":false},"assignees":[{"login":"jameskoster","id":846565,"avatar_url":"https://avatars.githubusercontent.com/u/846565?v=3","gravatar_id":"","url":"https://api.github.com/users/jameskoster","html_url":"https://github.com/jameskoster","followers_url":"https://api.github.com/users/jameskoster/followers","following_url":"https://api.github.com/users/jameskoster/following{/other_user}","gists_url":"https://api.github.com/users/jameskoster/gists{/gist_id}","starred_url":"https://api.github.com/users/jameskoster/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jameskoster/subscriptions","organizations_url":"https://api.github.com/users/jameskoster/orgs","repos_url":"https://api.github.com/users/jameskoster/repos","events_url":"https://api.github.com/users/jameskoster/events{/privacy}","received_events_url":"https://api.github.com/users/jameskoster/received_events","type":"User","site_admin":false}],"milestone":{"url":"https://api.github.com/repos/woothemes/woocommerce/milestones/53","html_url":"https://github.com/woothemes/woocommerce/milestones/2.7","labels_url":"https://api.github.com/repos/woothemes/woocommerce/milestones/53/labels","id":1537224,"number":53,"title":"2.7","description":"2.7 will focus on API + CRUD improvements.","creator":{"login":"mikejolley","id":90977,"avatar_url":"https://avatars.githubusercontent.com/u/90977?v=3","gravatar_id":"","url":"https://api.github.com/users/mikejolley","html_url":"https://github.com/mikejolley","followers_url":"https://api.github.com/users/mikejolley/followers","following_url":"https://api.github.com/users/mikejolley/following{/other_user}","gists_url":"https://api.github.com/users/mikejolley/gists{/gist_id}","starred_url":"https://api.github.com/users/mikejolley/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mikejolley/subscriptions","organizations_url":"https://api.github.com/users/mikejolley/orgs","repos_url":"https://api.github.com/users/mikejolley/repos","events_url":"https://api.github.com/users/mikejolley/events{/privacy}","received_events_url":"https://api.github.com/users/mikejolley/received_events","type":"User","site_admin":false},"open_issues":31,"closed_issues":39,"state":"open","created_at":"2016-01-22T23:35:12Z","updated_at":"2016-07-27T19:24:55Z","due_on":"2016-08-30T22:00:00Z","closed_at":null},"comments":27,"created_at":"2016-04-18T10:21:17Z","updated_at":"2016-07-28T15:33:49Z","closed_at":null,"body":"**TL;DR** - Let's get rid of our lightbox script / option. Users can easily add one of the many plugins on .org for this functionality. Let's make the product image gallery a 'carousel' with touch navigation to vastly improve the experience on handheld devices.\r\n\r\n====\r\nWe've recently spoken about replacing our lightbox script; PrettyPhoto. Whilst it has applications in extensions that will make it tricky to remove outright, it is overkill for our product gallery requirements. Worse still the handheld experience is very poor. Not only due to it's weight (~20kb not including the css) but mainly due to the overall experience. Here's what it looks like;\r\n\r\n![prettyphoto](https://cldup.com/ttfG7qkPu5.gif)\r\n\r\nTo view the slideshow one has to click an image or a thumbnail. That opens the lightbox which displays the images in a container that is _smaller_ than the product page itself making it entirely redundant. To make matters worse, that smaller image is actually the _full size_ image uploaded by the store owner which could be huge and slow loading.\r\n\r\nI think we should be aiming for something like this:\r\n\r\n![new-gallery](https://cldup.com/sUBU3nF6pM.gif)\r\n\r\n'Enlarging' the images is pointless unless it's via a pinching mechanism which isn't a particularly intuitive UX on web sites yet. Swiping through galleries seems like the best solution. It'd provide a familiar and intuitive experience for all smartphone users. Hiding the thumbs for the gallery (using the dot indicators instead) works well as it saves space and allows the main image to be center of attention whilst clearly indicating there are more to be viewed.\r\n\r\n### Desktop\r\n\r\nThe desktop implementation is more open for discussion. Currently, clicking _any_ image in the gallery will open a lightbox. It works, but doesn't feel particularly intuitive to me. As the gallery thumbs are displayed a lot smaller than the main product image within the page I think there should be a different behaviour when clicking them.\r\n\r\nWhat I'd like to see is that when a gallery thumbnail is clicked, the main product image is switched to the thumb you clicked. \r\n\r\nAs for the lightbox itself, I think it's inclusion in core is debatable. Depending on the theme in use, it's not always necessary. I think this decision should be left to the end-user. We have an option to enable/disable the lightbox, but even when it's disabled the product images still link to the image directly which seems kinda pointless. I'd like us to remove the lightbox altogether. It'll make core a little lighter and there are loads of plugins on .org to add this functionality back in if folks need it. We can then remove the lightbox option as well.\r\n\r\n### Potential replacement scripts\r\n\r\nAs for which script we might use to replace PrettyPhoto, that will need a little more research but https://github.com/jedrzejchalubek/Glide.js looks quite nice. Seems to be actively developed and is very light (~4kb before minification). It offers everything we need with one exception - no thumbnails. Perhaps we could contribute that feature to the project if we decide to use it."},"comment":{"url":"https://api.github.com/repos/woothemes/woocommerce/issues/comments/235932397","html_url":"https://github.com/woothemes/woocommerce/issues/10721#issuecomment-235932397","issue_url":"https://api.github.com/repos/woothemes/woocommerce/issues/10721","id":235932397,"user":{"login":"jeffikus","id":937325,"avatar_url":"https://avatars.githubusercontent.com/u/937325?v=3","gravatar_id":"","url":"https://api.github.com/users/jeffikus","html_url":"https://github.com/jeffikus","followers_url":"https://api.github.com/users/jeffikus/followers","following_url":"https://api.github.com/users/jeffikus/following{/other_user}","gists_url":"https://api.github.com/users/jeffikus/gists{/gist_id}","starred_url":"https://api.github.com/users/jeffikus/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jeffikus/subscriptions","organizations_url":"https://api.github.com/users/jeffikus/orgs","repos_url":"https://api.github.com/users/jeffikus/repos","events_url":"https://api.github.com/users/jeffikus/events{/privacy}","received_events_url":"https://api.github.com/users/jeffikus/received_events","type":"User","site_admin":false},"created_at":"2016-07-28T15:33:48Z","updated_at":"2016-07-28T15:33:48Z","body":"Update on Flexslider RTL - I've merged a PR into the 2.7.0 release branch https://github.com/woothemes/FlexSlider/pull/1561 \r\n\r\nAny testing feedback would be appreciated!"}}
{"actor":{"display_login":"jeffikus"}}