1 (edited by Alasala 2016-03-05 12:53:44)

Topic: Problem embedding into Joomla website [SOLVED]

I know there is a guide and other posts on this subject, but I'm banging my head against a brick wall.

I currently have a working gallery embedded into a basic html page (old website) (it's a Flickr gallery)

I am converting the site to a CMS based one using Joomla 3.4 so I am now trying to embed into an article. I have changed the global configuration options and TinyMCE and JCE options all to allow script tags, and indeed these are no longer stripped out when I save the article, so I believe all the config is correct.

This is what the article looks like

<p>before embed</p>
<p><img src="member_galleries/google-logo.gif" alt="" /></p>
<!--START JUICEBOX EMBED-->
<script src="member_galleries/andygilbert/jbcore/juicebox.js" type="text/javascript"></script>
<script type="text/javascript">
    new juicebox({
        baseUrl: 'member_galleries/andygilbert/',
        containerId: "juicebox-container",
        galleryWidth: "100%",
        galleryHeight: "80%",
        backgroundColor: "rgba(255,255,254,1)"
    });
</script>
<!--END JUICEBOX EMBED-->
<p>after embed</p>

I have put the img tag in there to demonstrate the the server is correctly interpreting the relative path to an image, and sure enough the google logo is displayed, so the paths seem ok.

I even put <script> alert('Hello World!'); </script> into the article to prove javascript was working and sure enough I got the pop up. Then I put that alert into a helloworld.js file in the member_galleries folder and put this in my article

<script src="member_galleries/helloworld.js" type="text/javascript"></script>

and again I got the pop up, showing again that the path seems correct.

Nonetheless, I have tried the following variations of baseUrl, both relative and absolute paths

        baseUrl: 'member_galleries/andygilbert/',
        baseUrl: '/member_galleries/andygilbert/',
        baseUrl: 'joomla30/member_galleries/andygilbert/',
        baseUrl: '/joomla30/member_galleries/andygilbert/',
        ,

and none work - (also setting the corresponding script src path to the juicebox.js with all those variants too)

There is no error message, just an absence of a gallery.


And here is the direct URL to the existing page that works fine (removed) non-Joomla version, albeit a bit slow to get started as there are a lot of images

If I use the URL directly to the index.html in the gallery (removed) this works fine, so shows that the gallery works.


I am completely stumped. Any ideas anyone?

Thanks
Al

Edited: to remove full URLs seeing as this is now solved and the URL are no longer required

2 (edited by Alasala 2016-03-04 18:51:50)

Re: Problem embedding into Joomla website [SOLVED]

I am satisfied that the path to juicebox.js is good - if you inspect the page in firefox, the javascript is clearly loaded.

The colsole however is rattling up error messages  - sadly I don't know what these mean... but it seems stuck in a loop - maybe someone who actually knows how to use the debugger in firefox can explain.

Thanks
Al

<!DOCTYPE html>
<html lang=en>
<title>Error 404 - Not Found</title>
<META HTTP-EQUIV="refresh" CONTENT="10;URL=http://www.thewdcc.org.uk/">

<body>
<H2>Error 404 - Page Not Found</H2>
<p>I am sorry - the page you requested: /joomla30/member_galleries/andygilbert/jbcore/juicebox.js%20line%2014%20%3E%20eval never existed or is no longer available.</p>
<p>This page will redirect to the Website's Home page in 10 seconds OR you can click <strong><a href="http://www.thewdcc.org.uk/">HERE</a></strong>.</p>
</body>
</html>
<!--
                                                                             
-->

Re: Problem embedding into Joomla website [SOLVED]

In your Joomla page, change:

baseUrl: 'member_galleries/andygilbert/',

... to:

baseUrl: '/joomla30/member_galleries/andygilbert/',

Also, there is no <div id="juicebox-container"></div> on your page so there Juicebox will not find the containerId that the gallery should be embedded into.
Add:

<div id="juicebox-container"></div>

... to the end of your embedding code (just before <!--END JUICEBOX EMBED-->).

After making these changes, please clear your browser's cache before reloading your gallery's web page to ensure that your browser is using the latest version of your HTML page from your server (and not an older cached version).

This should solve your problem.

Re: Problem embedding into Joomla website [SOLVED]

Steven wrote:

This should solve your problem.

Indeed it did. Thanks so much, that was driving me demented. I had tried every variant of the baseUrl, clearly it was the missing container that I was overlooking.

Thanks again
Al

Re: Problem embedding into Joomla website [SOLVED]

You're welcome!
I'm glad you've got it working. Thank you for letting me know.