Invisible buttons on full galley screen

[pandarhys]

I have the gallery working however I cannot see any of the navigation left right buttons or any of the buttons at the top. They are present and working as you can click them just invisible.

I'm getting an 404 on default-skin.png, not sure if this is related.

I'm a relatively new developer so please bare with me this is my first GIT issue.

I've installed using docker compose run --rm npm install --save vue3-picture-swipe Which returns this npm WARN sass-loader@7.3.1 requires a peer of webpack@^3.0.0 || ^4.0.0 but none is installed. You must install peer dependencies yourself.

I have webpack 6.13.6 installed. I have a feeling I'm missing a step if css needs importing?

[Sitronik]

I have the gallery working however I cannot see any of the navigation left right buttons or any of the buttons at the top. They are present and working as you can click them just invisible.

I'm getting an 404 on default-skin.png, not sure if this is related.

I'm a relatively new developer so please bare with me this is my first GIT issue.

I've installed using docker compose run --rm npm install --save vue3-picture-swipe Which returns this npm WARN sass-loader@7.3.1 requires a peer of webpack@^3.0.0 || ^4.0.0 but none is installed. You must install peer dependencies yourself.

I have webpack 6.13.6 installed. I have a feeling I'm missing a step if css needs importing?

Hi, create a repository and add a sample code there, since it is not clear what the problem is

[pandarhys]

Hi Sitronik, thank you for reply

I've made the repo public use develop https://github.com/pandarhys/pac-master

this is my work in progress I'm using to learn coding so please don't judge it too hard.

I've tried using the component extended through another component as well as the below, both have the same issue gallery works great but no interface buttons visibility show.blade.php is the view its used in

`

`

[Sitronik]

Hi Sitronik, thank you for reply

I've made the repo public use develop https://github.com/pandarhys/pac-master

this is my work in progress I'm using to learn coding so please don't judge it too hard.

I've tried using the component extended through another component as well as the below, both have the same issue gallery works great but no interface buttons visibility show.blade.php is the view its used in

<vue-picture-swipe :items="[ {src: 'http://127.0.0.1/images/162774862015989778832018-07-29 18.48.33.jpg',thumbnail: 'http://127.0.0.1/thumbnail/162774862015989778832018-07-29 18.48.33.jpg',w: 600,h: 400, title: 'Will be used for caption'}, {src: 'http://127.0.0.1/images/162774862015989778832018-07-29 18.48.33.jpg',thumbnail: 'http://127.0.0.1/thumbnail/162774862015989778832018-07-29 18.48.33.jpg',w: 1200,h: 900}]"> <vue-picture-swipe>

Your are welcome, Unfortunately, I have no experience using vue in conjunction with laravel, but based on the project structure that you showed in https://github.com/pandarhys/pac-master

Vue is located here pac-master/resources/js/app.js, this is where the components are defined: ThemeSwitcher.vue NewArticleModal.vue Dropdown.vue

But there is no import of vue3-picture-swipe library and no definition of it

[pandarhys]

ah sorry, I reverted back to the original vue-picture-swipe swipe as vue3-picture-swipe wanted bootstrap 3 or 4 but I was running 5. Should it work with later versions?

[Sitronik]

ah sorry, I reverted back to the original vue-picture-swipe swipe as vue3-picture-swipe wanted bootstrap 3 or 4 but I was running 5. Should it work with later versions?

vue3-picture-swipe has no bootstrap dependency

[pandarhys]

Sorry I meant webpack. Leave it with me, I'm on holiday at moment so cant check in detail. I'll delete this issue as I'm wasting ur time at the moment

[pandarhys]

OK I've switched over to using this vue3-picture-swipe, same issue no buttons were show. I've had to create public/article/ directory and drop the default files found in the photoswipe/default skin directory. This resolved the issue but on next build I'm getting the below. Also creating public/article/ won't work in the long run as it interference with the show Route. Uncaught TypeError: e.withScopeId is not a function at app.js:59532 at app.js:59528 at Object../node_modules/vue3-picture-swipe/dist/vue3-picture-swipe.umd.js (app.js:59528) at __webpack_require__ (app.js:62136)