Creating a gallery view #8
Conversation
There was a problem hiding this comment.
Thanks for getting us started on this! I love that you did a demo site to show how it runs.
My first initial feedback:
- fancybox doesn't seem to be maintained any more. Looking at https://npmtrends.com/fancybox-vs-lightgallery-vs-lightgallery.js-vs-photoswipe-vs-swipebox it seems that https://photoswipe.com/ is the one that more people use, or https://github.com/sachinchoolur/lightGallery. I think we should use one of these.
- Add this library to the
dependenciesofpackage.jsonvs. asking the user to install it manually - We won't have accounts or search, so you can remove both of those from the header
- Blue text on black background is hard to read
- I'd probably rename
gallery.htmltoindex.htmlso it resolves better - Use a newer version of Parcel (2.x)
- Can we get rid of the JS in
gallery.jsand make it 100% static HTML?
|
Which version of fancybox is this site talking about? because I know versions 1, 2, and 3 are now discontinued, but nothing is ever said about version 4. |
|
https://www.npmjs.com/package/@fancyapps/fancybox hasn't been updated in 4 years, I'd say it's dead. Also, it's based on jQuery, which isn't a good choice in 2022. |
|
I just changed it to photoswide and parcel should be 2.0 and above now. Its now 100% html and file has been renamed to index.html |
it should be working on github pages as intended now |
There was a problem hiding this comment.
I left some comments on your PR.
When I click on "test sample," it redirects me to https://lostbutton.github.io/my-photohub/gallery, which renders a 404 error.
When I navigate to https://lostbutton.github.io/my-photohub, it seems to work fine. Maybe you are deploying the website to the root path instead of /gallery?
No that's not the case, I commented previously that when it was changed to index that https://lostbutton.github.io/my-photohub would be the link its deployed to. But I will look into your suggestions |
|
Lastly, on mobile devices tapping on a single image shows two in the preview. See below: |
Prof, for number 7 what do you mean get rid of js to make it 100% static HTML? I know its index now but the removing of JS still confuses me. |
package.json
Outdated
| @@ -0,0 +1,29 @@ | |||
| { | |||
| "name": "My-PhotoHub", | |||
There was a problem hiding this comment.
We have 3 separate PRs that are all doing the same thing (creating package.json). A better approach for doing this in the future would be to start with a very small PR that adds a pacakge.json and then build on that. Open source should happen in small bite-sized chunks.
There was a problem hiding this comment.
So what should I do with the package.json?
There was a problem hiding this comment.
Moved the discussion to Slack
Ideally we should produce a static HTML page that has everything rendered in our build step vs. having to build the DOM dynamically on load. It will be way faster if we do. |
For number 7, I can't remove the JS because the photoswipe relies on the modules inside. Unless you want me to write the script within the HTML file? |
|
I don't mean remove all JavaScript. I mean let's do as much in HTML as possible vs. having to set everything up at runtime with JS. It's fine to augment that with JS afterward. |
So would a better option would be to script what I have in java to the html file? |
Contributing.md needs some work, but so far the base is running off parcel
the view uses Fancybox and has several online images posted inside.
Click once to select the photo to view, and click it again to bring it to full size.
You can also drag the photos around when selected.
The navbar will also follow when scrolling down.
The username is used as a placeholder for now nothing there yet
the About page is not there yet
#2
test website