Page correctly displayed within Rapidweaver (preview) on PC but no more once published

Web Development
1

Hello
I’m testing a very nice Photo Gallery javascript named ‘Nanophotosgallery’

For this, as instructed by the app developper, I added to ‘Rapidweaver/Settings/Code/Head’ :

<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">          
<!-- jQuery -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js" type="text/javascript"></script>
<!-- nanogallery2 -->
<link  href="https://cdn.jsdelivr.net/npm/nanogallery2@3/dist/css/nanogallery2.min.css" rel="stylesheet" type="text/css">
<script  type="text/javascript" src="https://cdn.jsdelivr.net/npm/nanogallery2@3/dist/jquery.nanogallery2.min.js"></script>

And onto my test page, I just added a HTML stack containing this code :

<div id="test"
data-nanogallery2 = '{"thumbnailHeight":150,"thumbnailWidth": 150,"itemsBaseURL":  "https://nanogallery2.nanostudio.org/samples/"}' >
<a href = "https://nanogallery2.nanostudio.org/samples/berlin1.jpg"   data-ngThumb = "https://nanogallery2.nanostudio.org/samples/berlin1_t.jpg" > Berlin 1 </a>
<a href = "https://nanogallery2.nanostudio.org/samples/berlin2.jpg"   data-ngThumb = "https://nanogallery2.nanostudio.org/samples/berlin2_t.jpg" > Berlin 2 </a>
<a href = "https://nanogallery2.nanostudio.org/samples/berlin3.jpg"   data-ngThumb = "https://nanogallery2.nanostudio.org/samples/berlin3_t.jpg" > Berlin 3 </a>
</div>

In Rapidweaver everthing works like a charm :grinning: and the gallery is correctly displayed, when I :

  • switch mode button from ‘edit’ to ‘preview’
  • use the ‘simulate’ button (in different devices)
  • use the ‘preview’ button (in different browsers)

But once the page is published … then the gallery is no more displayed :cry:

Any help to troubleshoot this issue ?

my test page

Thank you

Screenshots :

Preview within Rapidweaver

MS-77i0b

Preview within Rapidweaver (after a click on 1st thumbnail)

MS-lpanx

2

Did you do a “republish all”?

3

Yes, done … but no changes

4

Hi @efla,

You’re trying to execute JS code from a different domain in your own site. It not working might be some kind of cross site code execution prevention.

The maker also provides the files through github; you could install those on your own webserver and modify the HTML to call those JS libraries instead.

Or go the route that the maker suggests and implement the JavaScript into your own site.

If all else fails, there are a number of gallery stacks out there that do pretty much the same as this one does.

Cheers,
Erwin

1 Like
5

Thank you Erwin, I followed your advice, and now have all JS librairies installed onto my own webserver.
But still same issue, looking at the browser JS console, I see this message :

7Uncaught TypeError: jQuery(...)-nanogallery2 is not a function
at HTMLDocument.e (jquery_. nanogallery2.core. min. js:53:20281)
e @ jquery. nanogallery2. core. min. js:53

So for any reason, this script fails to load … when going live on my webserver.

But within Rapidweaver, for instance in Preview Mode (local Browser) everthing’s fine

Looking at the developer site for such message,nanogallery2 is not a function he says that “jquery is to be included one”, so meaning if I understand well that perhaps jquery has already be loaded, by Stacks or by Foundry ? and then this conflict

6

Hello

Finally, I’ve found my way :grinning: I’ll explain tomorrow in details how I’ve fixed this

3 Likes
7

Hi @efla,

I’m looking forward to your fix!

Fwiw: JQuery is indeed integrated locally by Stacks.

Cheers,
Erwin

8

Hi

First at all I removed everything from Rapidweaver/Settings/Code/Head’

Then in the page where I want the album to be displayed :

MS-ubjp4

  • in the HTML Code CSS, I added directly all the code from “nanogallery2.min.css’
    and “nanogallery2.woff.min.css”
  • in the HTML Code Javascript, I added directly all the code from “jquery.nanogallery2.min.js”

Now I have a wonderful, fully responsive, photo gallery running like a charm in Rapidweaver, Stacks as well as within Alloy blog post.

Adding the nanoPhotosProvider2 extension to the nanoPhotosGallery2, is also a must !

And last but not least, there is also a standalone/online nanoPhotosGallery builder where you can test online the gallery

3 Likes