Topic: SE friendly URLs [SOLVED]

I am using JB on a Joomla site here: stevemortonphotography.uk.
The galleries are embedded in Joomla articles, and a typical section of embedding code is:

<script src="juicebox/jbcore/juicebox.js" type="text/javascript"></script>
<script type="text/javascript">new juicebox({
baseUrl:"images/TownCriers/",
themeURL:"juicebox/jbcore/smp-theme/theme.css",
containerId: "juicebox-container",
galleryWidth: "75%",
galleryHeight: "75%",
backgroundColor: "rgba(64,64,64,1)"
});</script>
<div id="juicebox-container" class="jb-container">&nbsp;</div>
<!-- Image gallery content for non-javascript devices --><noscript><!-- Image gallery content for non-javascript devices --><noscript><h1>&nbsp;</h1> <p>&nbsp;</p> <p><img src="images/20190910_DSC5198.jpg" title="Town Crier 1" alt="" /><br>Town Crier 1 </p> <p><img src="images/20190910_DSC5199.jpg" title="Town Crier 2" alt="" /><br>Town Crier 2 </p> <p><img src="images/20190910_DSC5200.jpg" title="Lady Town Crier" alt="" /><br>Lady Town Crier </p> <p><img src="images/20190910_DSC5201.jpg" title="Town Crier with Consort" alt="" /><br>Town Crier with Consort </p> <p><img src="images/20190910_DSC5203.jpg" title="Town Crier 3" alt="" /><br>Town Crier 3 </p> <p><img src="images/20190910_DSC5204.jpg" title="Town Crier Consort" alt="" /><br>Town Crier Consort </p> <p><img src="images/20190910_DSC5207.jpg" title="Town Crier 4" alt="" /><br>Town Crier 4 </p> <p><img src="images/20190910_DSC5210.jpg" title="Town Crier Consorts" alt="" /><br>Town Crier Consorts </p> <p><img src="images/20190910_DSC5211.jpg" title="Town Crier 5" alt="" /><br>Town Crier 5 </p> <p><img src="images/20190910_DSC5218.jpg" title="Lady Town Crier" alt="" /><br>Lady Town Crier </p></div></div><!--END JUICEBOX EMBED--></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></noscript></noscript></div>

Everything works well until I turn on Joomla's Search Engine Friendly URL's and URL Re-writing. This works normally on the whole site, but it seems as if JB can no longer find the galleries. It does seem to find the JBcore files, which are in their own folder, but not the gallery files.

Any ideas?

If you need administrator access to the site, e-mail me privately, and I will send you the details.

Steve Morton

Re: SE friendly URLs [SOLVED]

I do not know how Joomla's URL rewriting works but if a URL is rewritten and changed, then it will no longer point towards the same location (and things will break).

Do you have an example of URL within your Juicebox embedding code before and after the rewriting so that I can see what's going on? Thanks!

Two things immediately spring to mind which might help...

(1) Manually change all the paths in your Juicebox embedding code (and the gallery's 'config.xml' file) from relative paths to absolute paths (i.e. paths starting with http:// or https://). A few copy and pastes (or some search and replace actions) in a plain text editor should take care of this.

(2) If the rewriting functionality allows for it  (I do not know if you are using a core Joomla feature or a plugin), make an exception for your Juicebox gallery page (within Joomla or the plugin's settings) so that rewriting is not performed on that page.

If you continue to experience difficulties, then please post back with a link to your gallery's web page so that I can see the problem for myself and hopefully help further. Thank you.

(If you do not want to post the link publicly here in the forum, just send em an email. My email address is in the column to the left of this post.)

Re: SE friendly URLs [SOLVED]

Steven

Thanks very much for your response.

Changing the URL's to absolute paths was the first thing that I tried, and it made no difference.

The re-writing functionality is a core Joomla feature, and, as I understand it, uses the Apache  Mod-rewrite function. When it is turned off,  site links appear in the form "http://smpj3/index.php?option=com_content&view=article&id=19:town-crier-competitiion&catid=12&Itemid=123", but when turned on, they look like "http://smpj3/galleries/12-events-albums/19-town-crier-competitiion" - presumably the latter is easier for the search engines to understand. (Note: smpj3 is my localhost site; the live site is stevemortonphotography.uk).

The option is applied site-wide, and I can find no way of preventing it being applied to specific pages.

Here is what I have found so far:
The jbcore Javascript is being run - the gallery container is created on the web page.
The link in the embed code to the gallery config.xml file seems to be correct - if I manually insert a link in the text on the page, I can display the confi.xml file.
I've tried using Chrome's Javascript console to see what is going on, but nothing is shown - is there any way that I can see what the JB code is actually doing?

If you would like to see the gallery pages, one is here :

http://stevemortonphotography.uk/index. … Itemid=123

At present, the SE friendly URL re-writing on this site is off - let me know if you want to take a look at the problem, and I'll turn it on, or I'm happy to give you administrator access to the backend of the site, if you wish, so that you can turn it on or off.

Finally, it isn't really a big deal for me - this is just a hobby site, and my query is mostly to satisfy my own curiosity!

Best wishes

Steve Morton

Re: SE friendly URLs [SOLVED]

I've tried using Chrome's Javascript console to see what is going on, but nothing is shown - is there any way that I can see what the JB code is actually doing?

Try checking the 'Network' tab in your browser's developer tools to see the URLs that are actually being loaded (or attempting to be be loaded).

I was going to suggest that you try explicitly adding a themeURL entry to your gallery's embedding code but, as you already do this, maybe you could try removing it (and allow Juicebox to load the default theme from its default location) to see if this makes a difference. (You might need to reinstate a stock 'jbcore' folder within your gallery to try this.)
If a theme CSS file cannot be found, then the result is usually a blank gallery (like you describe) so it's worth a shot (at least for troubleshooting purposes). (The problem might be the URL to the theme CSS file rather than the URLs to the image files.)

At present, the SE friendly URL re-writing on this site is off - let me know if you want to take a look at the problem, and I'll turn it on, or I'm happy to give you administrator access to the backend of the site, if you wish, so that you can turn it on or off.

I'd really need to see the problem so if you can switch on the URL rewriting that would be great, although I may not be at my computer for a short while so if you'd rather send me (via email) access to your site's backend and instructions on how to switch the URL rewriting on and off, then I'll take a look as soon as I can.
Thank you.

Re: SE friendly URLs [SOLVED]

Steven
OK - some progress! Doing as you suggest, using the default setup, with a stock jbcore folder in the same folder as the images, and with the default theme loaded from the jbcore folder, it all works. I can start to change things to locate the problem now, and I'll let you know when I find the culprit.

Many thanks for your help.

Steve

Re: SE friendly URLs [SOLVED]

OK, I think I've got to the bottom of it, and the answer, as you suggested, is to use absolute URL's for the config.xlm and theme.css files. The juicebox.js link doesn't care if the path is relative or absolute.

Here are the links, as shown in Chrome's Developers tools:

URL re-write off, relative paths - WORKS

http://stevemortonphotography.uk/juiceb … uicebox.js
http://stevemortonphotography.uk/juiceb … /theme.css
http://stevemortonphotography.uk/images … config.xml

URL re-write on, relative paths - FAILS

http://stevemortonphotography.uk/juiceb … uicebox.js
http://stevemortonphotography.uk/galler … /theme.css
http://stevemortonphotography.uk/galler … config.xml

URL re-write on, theme url absolute, others relative - FAILS

http://stevemortonphotography.uk/juiceb … uicebox.js
http://stevemortonphotography.uk/juiceb … /theme.css
http://stevemortonphotography.uk/galler … config.xml

URL re-write on, theme and gallery url's absolute, jbcore relative - WORKS

http://stevemortonphotography.uk/juiceb … uicebox.js
http://stevemortonphotography.uk/juiceb … /theme.css
http://stevemortonphotography.uk/images … config.xml

The difference between the juicebox.js path and the others is that it is set up directly in the embed code in the page source, while the other two are (presumably!) passed through some of your code, as they are defined as part of the 'juicebox' structure, and are then getting re-written by Joomla.

I think the reason that absolute URL's didn't work when I first tried them was due to a typo, which I'd managed to copy and paste to each address - sorry about that.

I'm happy to live with the use of absolute URL's, and everything else seems to working very well, so, unless you want to dig into it further, you can consider this one solved.

Again, thanks for your time.

Steve

Re: SE friendly URLs [SOLVED]

Your solution, to use absolute paths for the baseUrl and themeUrl entries in your gallery's embedding code, makes some sense.
As you suspect, the paths to the 'theme.css' and 'config.xml' files are built dynamically within the 'juicebox.js' JavaScript file (taking into account baseUrl, configURL and themeURL entries from the embedding code if used), rather than just being regular HTML links in the gallery's web page (like the path to the 'juicebox.js' file itself), and the code within the 'juicebox.js' file is obfuscated and cannot be modified by a user.

I'm glad you've found a solution to your problem. Thank you for sharing your troubleshooting steps and findings.

I'll mark this thread as [SOLVED].