I'm creating a gallery of images in ReactJs. There are a lot of examples online, but i didn't find anything that is perfectly responsive on desktop browsers and also completely mobile friendly.
In particular, when an image is opened on the mobile browser, i need to be able to zoom the photo with a double tap, and close the photo when i drag it to the bottom
I already tried all the principal solution that i found online.
For example, i tried all of these https://reactjsexample.com/tag/lightbox/
and much much more.
I also tried different approaches like CSS rules, Viewport rules, create a simple zoomable html div, etc... But nothing worked.
Basically, what i what to achieve is exactly something like this: https://www.lucapetruzzi.com/gallery/1
Created thanks to this library: https://photoswipe.com/ that unfortunately i can't use in React.
(I also tried the react-photoswipe and react-photoswipe-2 libraries but it seems not maintained and not working with new versions of React)
Thank you for any help
So for previous comments, I wrote a snippet for you, check here
Here are the mainly steps:
use npm install photoswipe so DON'T need to include builded js but NEED to include css in index.html (or you can import in App.css)
write the markup in js component
init it by click button or in useEffect
Related
how is it going?
it has been some time since i was around here and i learned a new things being one of them react, i'm developing a personal project and i'm stuck with developing a light/dark mode with bootstrap in react, how can i do this? is there any example video or code or anything you know about it? i found in youtube only plain css and since i'm using bootstrap i'm afraid that won't work for my project, it could just change my background but i want to change also some structures of my site, any advice or tip would be really thankful.
Yeah I can help !
You need to use states as the theme btn is toggled, and update properties according to that, I have previously worked upon that so I am sharing link of that project: https://satellite-system.github.io/TextUtils---React-js-Web/
, github link : https://github.com/Satellite-system/TextUtils---React-js-Web
Hope it will help.
It was actually a project from youtube, but I have forgot its channel.
I am generating pdf using react-to-print library,
But i want to break the page in new page,
There is css property break-after:always, it can work, but not all major browser supports it now,
Anyone know any other method then brute force margin ?
Working with pdf is hard, specially css part.
https://www.npmjs.com/package/react-to-print
https://developer.mozilla.org/en-US/docs/Web/CSS/break-after
I would like to recommend to use React PDF npm library. Please check https://react-pdf.org
I've built my website in Next.js, deployed statically via Netlify. Whenever I load it in a new tab, I get a white flash where the SVG logos are visible but nothing else, before the rest of the content loads in. I don't think this is a Flash Of Unstyled Content but it has a similar effect. I'm experiencing on desktop Chrome, Safari and Firefox, but doesn't seen to be happening on mobile. I've been trouble shooting for hours and am no closer to solving. Here's the repo if anyone wants to have a look. Any insights greatly appreciated.
Quoting directly from styled-components' docs:
Basically you need to add a custom pages/_document.js (if you don't
have one). Then copy the logic for styled-components to inject the
server side rendered styles into the .
Refer to our example in the Next.js repo for an up-to-date usage
example.
When using styled-components with Next.js you need to do a little magic in the _document.js. There is a with-styled-components example in the Next.js' repository. Please see here: https://github.com/vercel/next.js/blob/canary/examples/with-styled-components/pages/_document.js
I'm starting to build a new portfolio with this Gumby framework. I've chosen Gumby because I like SASS more than LESS, so I would like to try a framework based on this language.
The problem is that the mobile navigation doesn't work for me.
If I use the ui.html inside the downloaded package and I resize the browser window, the "three lines icon" appears, but if I click nothing happend!
If I use the Gumby's UI demo on the website it works...either for some website I saw here on stackoverflow that use gumby!
I've checked all the paths, the developer told me that I have to use gumby.min.js and it's uncomment by default, so i don't know why this mobile menu doesn't work for me.
Maybe I have to work online with the website hosted on a server? But I'ts strange...
I don't know what code to post, because it's simply the ui.html who all of you can find inside the downloaded gumby package.
I don't know javascript well so I cannot explain how/why this works but there is an issue with toggleswitch.js. Add e.stopImmediatePropagation(); to line 45. That's what worked for me.
If someone knows how or why this works I would love to learn.
Im making a website using Drupal 7.
I just installed the 'Social Media' and 'Widgets' Modules.
Then I added the fb like box to the left sidebar region of my danblog theme.
As you can see the box overflows the block.
Can I solve it by some configuration or do I need to change the css manually?
I wanted to know where exactly can I find the CSS of these blocks so that I could try to change it?
There are so many .php files and some .css files in drupal.
If someone could please elaborate on some technique or some basic understanding by which I can find the styling of blocks in those php files as I assume they may not be in seperate .css files
Thanks
Quick fix not recommended:
#f3c805688 { width: 220px!important; }
You really don't want to use !important it works as a quick fix in this case, but the ideal fix would be to change the height of the iFrame before inserting it into the page via some backend interface. Does the social media module have an option to change the width?