nanoGallery2 tampers with Vue Router

[marvin-j97]

Hi

I'm running Ng2 in Vue and it does indeed work, but as soon as the gallery is initialized, it tampers with the router, resetting it to /, when it should stay at /#/myroute.

This does only happen when actual data is loaded

$("#imageGallery").nanogallery2({});
// this is fine
// nanogallery2: error: no media to process. (to be expected)
// but the router stays on /#/myroute

$("#imageGallery").nanogallery2({
  items
});
// images load
// but the router resets to /

A possible workaround seems to be

$("#imageGallery").nanogallery2({
  fnGalleryRenderEnd: () => {
    this.$router.go(-1);  
  }
});

But it is hacky and requires double render.

[marvin-j97]

Found the solution.

Set locationHash to false in NG settings.

Oops.

[ShapesGraphicStudio]

Hi, Sorry for discussing an old thread, but I'm trying to get NanoGallery2 working within vue.js.

Using the html markup I can only display a static gallery. Trying to get data via ajax, everything seems to load fine, but the images are not displaying, I get only the desc text within the a href tag displayed.

Seing your thread I went for a try with the javascript integration, but then I get : TypeError: $(...).nanogallery2 is not a function

Putting: <script type="text/javascript" src="https://unpkg.com/nanogallery2@2.4.2/dist/jquery.nanogallery2.min.js"></script> in the footer gets me rid of the error, and the static demo gallery displays fine, but I still can't load my ajax data..

Could you please give me some details on how you integrated this fine ?

Best regards, David

[MatthijsA]

Hi there! I'm also trying to get NG2 to work in vuejs. If I find out how I'll post it here, and if anyone has any tips please share!

[MatthijsA]

Ok, after some trying out I found out how to do it. I think most of my problems were because of webpack and not because of view.

In my view template I have

Then in the script part I have the following imports:

import jQuery from 'jquery' import 'shifty'; import 'hammerjs'; import 'imagesloaded'; import 'screenfull'; import 'nanogallery2/src/css/nanogallery2.css'; import 'nanogallery2/src/jquery.nanogallery2.core.js';

And after that I load the gallery with:

jQuery(() => { jQuery('#my_gallery').nanogallery2({ items:[ { src: 'IMG_9656.JPG', srct: 'IMG_9656.JPG', title: 'Image 1' }, { src: 'IMG_9657.JPG', srct: 'IMG_9657.JPG', title: 'Image 2' }, ], thumbnailWidth: 'auto', thumbnailHeight: 170, itemsBaseURL: 'http://localhost/thumbs/small/2011/03/2011-03-03/', locationHash: false }); });

And in the beforeMount() function I have: window.jQuery = jQuery;

Then in my packages.json I have added the following dependencies:

"jquery": "^3.4.1",
"module": "^1.2.5",
"nanogallery2": "2.4.2",
"hammerjs": "2.0.7",
"imagesloaded": "4.1.1",
"screenfull": "4.0.1",
"shifty": "1.5.3",

And the following devDependency: "expose-loader": "^0.7.5",

Then finally in my webpack.base.conf.js I have added these in module rules:

{ test: require.resolve('jquery'), use: [{ loader: 'expose-loader', options: 'jQuery' },{ loader: 'expose-loader', options: '$' }] }, { test: require.resolve('shifty'), use: [ { loader: 'expose-loader', options: 'NGTweenable' }, ] }, { test: require.resolve('hammerjs'), use: [ { loader: 'expose-loader', options: 'NGHammer' }, ] }, { test: require.resolve('imagesloaded'), use: [ { loader: 'expose-loader', options: 'ngimagesLoaded' }, { loader: 'expose-loader', options: 'ngImagesLoaded' }, ] }, { test: require.resolve('screenfull'), use: [ { loader: 'expose-loader', options: 'ngscreenfull' }, ] }

I only have to find out how to add these so that they will be put in the generated webpack.base.conf.js file for me by the build, but this is how everyting worked together. I'll see what troubles I might run unto in the future and how to improve further...

[kgnfth]

Ok, after some trying out I found out how to do it. I think most of my problems were because of webpack and not because of view.

In my view template I have

Then in the script part I have the following imports:

import jQuery from 'jquery' import 'shifty'; import 'hammerjs'; import 'imagesloaded'; import 'screenfull'; import 'nanogallery2/src/css/nanogallery2.css'; import 'nanogallery2/src/jquery.nanogallery2.core.js';

And after that I load the gallery with:

jQuery(() => { jQuery('#my_gallery').nanogallery2({ items:[ { src: 'IMG_9656.JPG', srct: 'IMG_9656.JPG', title: 'Image 1' }, { src: 'IMG_9657.JPG', srct: 'IMG_9657.JPG', title: 'Image 2' }, ], thumbnailWidth: 'auto', thumbnailHeight: 170, itemsBaseURL: 'http://localhost/thumbs/small/2011/03/2011-03-03/', locationHash: false }); });

And in the beforeMount() function I have: window.jQuery = jQuery;

Then in my packages.json I have added the following dependencies:

"jquery": "^3.4.1",
"module": "^1.2.5",
"nanogallery2": "2.4.2",
"hammerjs": "2.0.7",
"imagesloaded": "4.1.1",
"screenfull": "4.0.1",
"shifty": "1.5.3",

And the following devDependency: "expose-loader": "^0.7.5",

Then finally in my webpack.base.conf.js I have added these in module rules:

{ test: require.resolve('jquery'), use: [{ loader: 'expose-loader', options: 'jQuery' },{ loader: 'expose-loader', options: '$' }] }, { test: require.resolve('shifty'), use: [ { loader: 'expose-loader', options: 'NGTweenable' }, ] }, { test: require.resolve('hammerjs'), use: [ { loader: 'expose-loader', options: 'NGHammer' }, ] }, { test: require.resolve('imagesloaded'), use: [ { loader: 'expose-loader', options: 'ngimagesLoaded' }, { loader: 'expose-loader', options: 'ngImagesLoaded' }, ] }, { test: require.resolve('screenfull'), use: [ { loader: 'expose-loader', options: 'ngscreenfull' }, ] }

I only have to find out how to add these so that they will be put in the generated webpack.base.conf.js file for me by the build, but this is how everyting worked together. I'll see what troubles I might run unto in the future and how to improve further...

pfff no way i am gonna put jquery in my vue app

i will go with vue-justified-layout and vue-cool-lightbox together instead