Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Hash navigation not working [TypeError: normalized[thumbIndex] is undefined]

See original GitHub issue

When I open root initially, it works fine.

However if I try to come to specific slide externally (e.g. I want to share it), it fails to do so.

To reproduce:

<Gallery id="1">
... several Item s ...
</Gallery>

Go to: http://localhost:3000/#&gid=1&pid=12

Expected: Item with id = 12 is opened

Actual:

TypeError: normalized[thumbIndex] is undefined
getThumbBoundsFn
c:/git/src/gallery-custom.tsx:93

  90 |         .sort(function (_a, _b) {
  91 |         var _c = __read(_a, 1), a = _c[0].current;
  92 |         var _d = __read(_b, 1), b = _d[0].current;
> 93 |         return helpers_1.sortNodes(a, b);
  94 | ^    })
  95 |         .forEach(prepare);
  96 | }


./node_modules/react-photoswipe-gallery/dist/gallery-custom.js/exports.CustomGallery/open<
c:/git/src/gallery-custom.tsx:103

  100 | var layoutEl = layoutRef.current;
  101 | if (layoutEl) {
  102 |     var instance = new photoswipe_1.default(layoutEl, ui, normalized, __assign(__assign({ index: index === null ? parseInt(targetId, 10) - 1 : index, getThumbBoundsFn: function (thumbIndex) {
> 103 |             var el = normalized[thumbIndex].el;
  104 | ^           return el ? helpers_1.getElBounds(el) : { x: 0, y: 0, w: 0 };
  105 |         }, history: false }, (galleryUID !== undefined
  106 |         ? { galleryUID: galleryUID, history: true }

Issue Analytics

State:
Created 3 years ago
Comments:8 (3 by maintainers)

Top GitHub Comments

2reactions

TiraelSedaicommented, Oct 13, 2020

https://github.com/TiraelSedai/rpg-hash-nav-issue-example sure thing

1reaction

kekbycommented, Oct 6, 2020

I can’t reproduce the problem. Hash navigation works well for me with following code.

import React from 'react';
import { Gallery, Item } from 'react-photoswipe-gallery';
import 'photoswipe/dist/photoswipe.css'
import 'photoswipe/dist/default-skin/default-skin.css'

function App() {
  return (
    <Gallery id="1">
      <Item
        original="https://placekitten.com/1024/768?image=1"
        thumbnail="https://placekitten.com/160/120?image=1"
        width={1024}
        height={768}
        id={1}
      >
        {({ ref, open }) => ( 
            <img
              onClick={open}
              src="https://placekitten.com/160/120?image=1"
              ref={ref}
            />   
        )}
      </Item>
      <Item
        original="https://placekitten.com/1024/768?image=2"
        thumbnail="https://placekitten.com/160/120?image=2"
        width={1024}
        height={768}
        id={2}
      >
        {({ ref, open }) => (
            <img
              onClick={open}
              src="https://placekitten.com/160/120?image=2"
              ref={ref}
            />
        )}
      </Item>
      <Item
        original="https://placekitten.com/1024/768?image=3"
        thumbnail="https://placekitten.com/160/120?image=3"
        width={1024}
        height={768}
        id={3}
      >
        {({ ref, open }) => (
            <img
              onClick={open}
              src="https://placekitten.com/160/120?image=3"
              ref={ref}
            />
        )}
      </Item>
    </Gallery>
  );
}

export default App;

@TiraelSedai can you please provide more context on this? Maybe there is a very specific case, which I cannot reproduce