profile
viewpoint
If you are wondering where the data of this site comes from, please visit https://api.github.com/users/duxianwei520/events. GitMemory does not store any data, but only uses NGINX to cache data for a period of time. The idea behind GitMemory is simply to give users a better reading experience.

duxianwei520/react 4211

React+webpack+redux+ant design+axios+less全家桶后台管理框架

duxianwei520/react-m 58

react-mobile

duxianwei520/express 34

node-express

duxianwei520/node 18

learning node

duxianwei520/oszh.github.com 6

HTML5触屏滑动效果公司招聘专题页面基于zepto.min.js和touch.js制作的微场景应用模板,全屏显示,上拉滑动动画效果,手机上拉刷新图片。

duxianwei520/hangzhou_house_knowledge 3

2017年买房经历总结出来的买房购房知识分享给大家,希望对大家有所帮助。买房不易,且买且珍惜。Sharing the knowledge of buy an own house that according to the experience at hangzhou in 2017 to all the people. It's not easy to buy a own house, so I hope that it would be useful to everyone.

duxianwei520/vue2-elm 2

基于 vue2 + vuex 构建一个具有 45 个页面的大型单页面应用

duxianwei520/flipgrid.js 1

flipgrid.js is a simple, content-focused photo gallery inspired by Microsoft's Metro interface and CSS 3D transitions.

issue commentdimsemenov/PhotoSwipe

v5-beta - Not clear how to install and import Photoswipe

It seems the error is added by the webpack when photoswipe-lightbox.esm.js is getting transpiled, since webpack is trying to override the default behavior of import().

Changing import(module); to import(/* webpackIgnore: true */ module); does help, but it doesn't look like an ideal fix as other bundlers might have a similar issue.

I'm not sure what to do with it yet and how to make bundlers ignore dynamic import (aside from completely disabling the feature). possibly with polyfill https://github.com/GoogleChromeLabs/dynamic-import-polyfill

dangelion

comment created time in 2 days

issue commentdimsemenov/PhotoSwipe

v5-beta - Not clear how to install and import Photoswipe

Yes @dimsemenov already tried exactly what you suggest, but when I click an image I get error in console

Uncaught (in promise) Error: Cannot find module 'http://localhost:3000/wp-content/themes/mytheme/public/photoswipe-v5/dist/photoswipe.esm.min.js'
    at app.js?id=6d8dbee816224d2b6c2a:208
dangelion

comment created time in 2 days

issue commentdimsemenov/PhotoSwipe

v5-beta - Not clear how to install and import Photoswipe

You can install the beta like this npm i--save git://github.com/dimsemenov/photoswipe#v5-beta.

Then you'll be able to do:

import PhotoSwipeLightbox from 'photoswipe/dist/photoswipe-lightbox.esm.js';
const options = {
  gallerySelector: '#my-gallery',
  pswpModule: 'https://example.com/photoswipe.esm.js'
};
const lightbox = new PhotoSwipeLightbox(options);
lightbox.init();

and import CSS with something like import 'photoswipe/dist/photoswipe.css'.

Please note that non-dynamic import of pswpModule isn't supported yet, but it's something that I or some contributor will implement. The code is here https://github.com/dimsemenov/PhotoSwipe/blob/v5-beta/src/js/lightbox/lightbox.js#L146 if you got some ideas on how to improve.

For now, if you use something like webpack - you may create multiple outputs, so your pswpModule. The path to pswpModule is photoswipe/dist/photoswipe.esm.js.

dangelion

comment created time in 2 days

issue openeddimsemenov/PhotoSwipe

v5-beta - Not clear how to install and import Photoswipe

Hi, as a premise, thanks for your incredible work! Really.

I work in a classic Webpack environment so I install libraries launching:

npm install swiper

then I import libraries in my app.js like:

import Swiper, {Navigation} from 'swiper';

and CSS in my app.scss like:

@import "~swiper/swiper";

getting automatically it from the node_modules folder

What is the correct way to import Photoswipe 5 in this way? Thanks

created time in 2 days

issue commentdimsemenov/PhotoSwipe

The next major release and the project status (your feedback needed)

What an awesome news! 🎉

Just one little note: if possible, keep that amazing behaviour that scrolling down it closes the lightbox. It's big UX!

dimsemenov

comment created time in 2 days

fork forlovedi/react

React+webpack+redux+ant design+axios+less全家桶后台管理框架

fork in 2 days

startedduxianwei520/react

started time in 2 days

fork 441319916/react-1

React+webpack+redux+ant design+axios+less全家桶后台管理框架

fork in 2 days

startedduxianwei520/react

started time in 3 days

startedduxianwei520/react

started time in 4 days

fork sunhouxuan/react

React+webpack+redux+ant design+axios+less全家桶后台管理框架

fork in 4 days

startedduxianwei520/react

started time in 4 days

startedduxianwei520/react

started time in 4 days

fork 15060322123/react

React+webpack+redux+ant design+axios+less全家桶后台管理框架

fork in 4 days

issue commentdangrossman/daterangepicker

singleDatePicker - How to have initial empty date?

No no no... you don't need to hack the code. Just provide a callback function, and it'll be called every time a date is chosen. Update the input in that function. You don't have to edit the library at all.

$('yourinput').daterangepicker({
  autoUpdateInput: false
}, function(chosen_date) {
  $('yourinput').val(chosen_date.format('YYYY-MM-DD'));
});

woow,, thank you so much...

uniteddevelopers

comment created time in 4 days

release mui-org/material-ui

v5.0.0-alpha.37

released time in 5 days

startedduxianwei520/react

started time in 6 days

issue commentdimsemenov/PhotoSwipe

The next major release and the project status (your feedback needed)

@dimsemenov The Browser Support part of the documentation contains a link to caniuse which just triggers a search for module, so It' s not 100% clear which part of the modules specification is a requirement for V5.

Is it the ECMAScript 2015 Spec, which is includes support for Modules (https://caniuse.com/es6) or is it Dynamic imports (https://caniuse.com/es6-module-dynamic-import)?

Both differ quite a bit when it comes to supported browser versions.

dimsemenov

comment created time in 6 days

issue commentdimsemenov/PhotoSwipe

The next major release and the project status (your feedback needed)

@jmory thanks a lot for the feedback, I'll try explain:

About UI being a completely separate component

I understand that if you use something like Angular - you'd rather use Angular buttons. However, due to the nature of the PhotoSwipe, click/tap/drag events are handled in a special way and elements that are on top of the scrolling area are handled by the gallery.

Also, the v5 UI is tiny, so I don't see the point to separate it from the core.

You still can add any elements on top of PhotoSwipe, but they'll block gestures unless you either pointer-events: none or append within pswp__scroll-wrap.

v5 indeed lacks documentation on how to disable UI elements, I'll try to improve this in the future patch. Currently, UI elements are just disabled by name, for example (arrowPrev:false, zoom:false, close:false).

Inline gallery

The experimental modal option that allowed to use PhotoSwipe as a simple carousel is no longer available. If you just need a carousel - consider using a native overflow-x scroller with -webkit-overflow-scrolling: touch or any "slider" component.

v5 browser support range is much narrower and it's mainly designed to be used as a "lightbox" component.

appendToEl option

By default PhotoSwipe is added within document.body, this option allows to append it to some different element. It does not affect viewport size, as viewport size is measured not by parent element (because of mobile toolbars that are quite inconsistent).

If you're looking to add a custom sidebar you may use padding options. For example paddingRight: 200 will add 200px gap on the right side.

You may also use option getViewportSizeFn (default implementation is here), for example:

getViewportSizeFn: () => {
  return {
    x: document.documentElement.clientWidth - 200,
    y: window.innerHeight
  };
}
dimsemenov

comment created time in 6 days

issue commentdimsemenov/PhotoSwipe

The next major release and the project status (your feedback needed)

@dimsemenov - First of, thank you for all the time and effort you put into this project, great work! We are happily using PhotoSwipe in our project for a few years now without any problems.

I tried to replace PhotoSwipe v4 with v5-beta in our project (just as a POC), but ran into a few issues. Since it's still a beta, I'd like to ask you, if you could clarify whether it still will be possible to use PhotoSwipe V5 as we currently do in production with V4:

  • We render an article which can include images (and other stuff).
  • When a user clicks on an image in an article we render a custom lightbox UI component.
  • We create and initialize the PhotoSwipe slideshow into an child element of the lightbox, which is restricted in its size:
    • We restrict the size of the slideshow to its parent element, by setting option modal: true.
    • We disable the built-in UI by setting arrowEl: false, closeEl: false, ... (we still pass the default PhotoSwipeUI class as the 2nd argument, so we get stuff like 'double tap to toggle zoom').
  • We render a custom UI outside of the parent element of the slideshow. When the user interacts with our custom UI, we control the PhotoSwipe slideshow via the API of the PhotoSwipe instance (e.g. calling goTo)
  • We render additional information about the current image as an overlay at the bottom of the lightbox.

When trying to switch to V5 beta I ran into following issues (I was using the core module, not the lightbox module, since we have our own custom lightbox):

  • I was not able to restrict the slideshow to the size of its parent element (appendToEl option)
  • I was not able to disable/hide the built-in UI.

Is this something you intentionally do not want to support in V5, or are those options just not implemented yet? Is it even intended to directly use the core module, without the lightbox module in V5?

I know that you can customize UI elements (https://photoswipe.com/v5/docs/styling/), and add custom buttons (https://photoswipe.com/v5/docs/adding-custom-buttons/), but this sacrifices some (IMO) nice benefits of being able to render a custom UI that is not tied to PhotoSwipe:

  • You can render it in an DOM element that is outside of the PhotoSwipe DOM element.
  • You don't tie the lifecycle of the custom UI to the lifecycle of the PhotoSwipe instance. This is nice if you want a custom UI that mixes slideshow-related and slideshow-unrelated controls (that should not disappear when the slideshow is closed).
  • Your custom UI can be an independent UI component with its own modular CSS (no references to outside css classes/blocks like .pswp__button--my-button).
  • No need to learn the ui.registerElement API.

I'm aware that this is a free, open-source project. I don't feel entitled to anything, and I hope my post does not come off as if I do. If you envision PhotoSwipe V5 to support still using it in a way outlined above, and I can contribute to make it happen, just let me know!

dimsemenov

comment created time in 6 days

startedduxianwei520/react

started time in 6 days

startedduxianwei520/react

started time in 7 days

fork wangzai292/react

React+webpack+redux+ant design+axios+less全家桶后台管理框架

fork in 8 days

fork alameenboss/react

React+webpack+redux+ant design+axios+less全家桶后台管理框架

fork in 8 days

issue commentdimsemenov/PhotoSwipe

The next major release and the project status (your feedback needed)

@john-gr comment

To be honest the "Native fullscreen button" is one of the pros on photoswipe please try not to remove it I use full screen option more often then the zoom in button not sure what other people's opinion on this but this is my use case. going directly to full screen is great but it is not good for accessibility which is becoming more and more important everyday. instead of directly opening full screen it will be nice to provide option to choose when and if user wants full screen thanks

See my issue #1759 for a workaround 😃

This is a great workaround ready for anyone to use thanks @BilouMaster

dimsemenov

comment created time in 9 days

issue commentdimsemenov/PhotoSwipe

v5-beta - Responsive images with srcset not working in Firefox

The demo site, is not working yet because it loads photoswipe.esm.js v 5.0.0 and photoswipe-lightbox.esm.js v 5.0.1 🙃

There's only that to change, otherwise I think you can close the issue! 💯 Thanks! 👍

BilouMaster

comment created time in 9 days

startedduxianwei520/react

started time in 9 days

issue closeddimsemenov/PhotoSwipe

v5-beta - Responsive images with srcset : sizes not updated with zoom gesture

While zooming with the fingers on the mobile phone, the sizes parameter of the pswp__img is never updated so the right image resolution cannot be loaded : sizes parameter is updated with the Zoom-in button / double-tap action only.

closed time in 10 days

BilouMaster

PR closed dimsemenov/PhotoSwipe

update resolution at the end of zoom (gesture)

clumsy fix for the issue #1761

+3 -0

0 comment

1 changed file

BilouMaster

pr closed time in 10 days