1 (edited by joaqimb 2014-07-19 18:31:46)

Topic: embedding script in Drupal 7 article [SOLVED]

I upgraded to Juicebox Pro.

The last few days I tried to create galleries in Drupal while using the appropiate module. It did not work at all.

So I created a gallery on my local drive. And placed the entire folder in the map /public_html/sites/all/libraries/juicebox/classic/img of my website www.joaqimb.be

The juicebox.js script is placed in the folder /public_html/sites/all/libraries/juicebox

I created a new article in full html edit mode and embedded this script:
             
<!--START JUICEBOX EMBED-->
<script src="www.joaqimb.be/public_html/sites/all/libraries/juicebox/juicebox.js"></script>
<script>
new juicebox({
baseUrl : "www.joaqimb.be/public_html/sites/all/libraries/juicebox/classic/img/Juicebox Namur"

containerId: "juicebox-container",
galleryWidth: "700",
galleryHeight: "750",
backgroundColor: "rgba(238,238,238,1)"
});
</script>
<div id="juicebox-container">
<!-- Image gallery content for non-javascript devices -->
<noscript>
<h1>Gallery Title</h1>
<p></p>
<p><img src="namur_50a 10x15.jpg" title="namur_50a 10x15" alt="" /><br>namur_50a 10x15 </p>
<p><img src="namur_51.jpg" title="namur_51" alt="" /><br>namur_51 </p>
<p><img src="namur_52.jpg" title="namur_52" alt="" /><br>namur_52 </p>
<p><img src="namur_53.jpg" title="namur_53" alt="" /><br>namur_53 </p>
<p><img src="namur_54.jpg" title="namur_54" alt="" /><br>namur_54 </p>
<p><img src="namur_55.jpg" title="namur_55" alt="" /><br>namur_55 </p>
<p><img src="namur_56 10x15.jpg" title="namur_56 10x15" alt="" /><br>namur_56 10x15 </p>
<p><img src="/namur_57.jpg" title="namur_57" alt="" /><br>namur_57 </p>
<p><img src="namur_59.jpg" title="namur_59" alt="" /><br>namur_59 </p>
<p><img src="namur_60.jpg" title="namur_60" alt="" /><br>namur_60 </p>
<p><img src="namur_61.jpg" title="namur_61" alt="" /><br>namur_61 </p>
<p><img src="namur_62.jpg" title="namur_62" alt="" /><br>namur_62 </p>
<p><img src="namur_63.jpg" title="namur_63" alt="" /><br>namur_63 </p>
<p><img src="namur_64.jpg" title="namur_64" alt="" /><br>namur_64 </p>
</noscript>
</div>
<!--END JUICEBOX EMBED-->

Unfortunately, its' not working. The only thing that happens is the browser displaying the script, but no images or thumbnails.

Did I make a syntax error? Libraries API is installed too.

Juicebox Pro is a great tool! All I have to do now - with your help - is make it work. :)

Do you have an example of a valid script?

Thanks for reply.

Re: embedding script in Drupal 7 article [SOLVED]

If you would like to manually embed a Juicebox gallery in a Drupal page, I would recommend using the baseUrl method of embedding as documented here.

Essentially, you would create a gallery with JuiceboxBuilder-Pro, upload the entire gallery folder (not just the contents) to your web server and paste the baseUrl embedding code into your web page.
It does not matter where you upload the gallery folder to on your web server as long as the paths within the embedding code (the path to the 'juicebox.js' file and the baseUrl itself) are correct.

You do not need to upload your gallery folder to a location within your Drupal installation and you do not need to use the Juicebox files from their location within the Drupal module (although you can if you like).

For example, if you have a gallery folder named 'my_gallery_folder' and you upload the entire folder to the root directory of your web server (into your 'public_html') folder, then the embedding cdoe you would use would look something like this:

<!--START JUICEBOX EMBED-->
<script src="/my_gallery_folder/jbcore/juicebox.js"></script>
<script>
  new juicebox({
    baseUrl : '/my_gallery_folder/',
    containerId : 'juicebox-container',
    galleryWidth : '800',
    galleryHeight : '600',
    backgroundColor: '#222222'
  });
  </script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

To directly answer your query above, there are a few problems with the code you use.
(1) If using an absolute URL, it should start with 'http://'.
(2) The 'public_html' folder name does not form part of the publicly accessible path.
(3) Your baseUrl line of code should have a comma (',') after it as there are further configuration options after it.

Therefore:

<script src="www.joaqimb.be/public_html/sites/all/libraries/juicebox/juicebox.js"></script>

... would become:

<script src="http://www.joaqimb.be/sites/all/libraries/juicebox/juicebox.js"></script>

... and:

baseUrl : "www.joaqimb.be/public_html/sites/all/libraries/juicebox/classic/img/Juicebox Namur"

... would become:

baseUrl : "http://www.joaqimb.be/sites/all/libraries/juicebox/classic/img/Juicebox Namur/",

Rather than using absolute paths, I would recommend using the leading slash notation (to denote your root directory) rather than hard-coding the 'www' subdomain into your patsh so that your galleries display on both www.joaqimb.be and joaqimb.be.
Try using the the following lines of code in your embedding code:

<script src="/sites/all/libraries/juicebox/juicebox.js"></script>
baseUrl : "/sites/all/libraries/juicebox/classic/img/Juicebox Namur/",

3 (edited by joaqimb 2014-07-21 07:57:59)

Re: embedding script in Drupal 7 article [SOLVED]

Steven,

Thanks for your reply. At work even on Sunday !!!

I placed the entire folder into the public root as you mentioned, but things refuse to work. I hope there is no more syntax error.

Strange fact is that Drupal does'nt do anything at all. It doesn't load the gallery, no conflicts are reported. Just one thing happens: displaying the embedded code.

Is the embedded code sufficient enough or do I have to write some more coding? If so I have a problem because I am a novice Drupal user. I don't have any knowledge of html.

This is the path to the Drupal folders: /public_html/Juicebox_Namur/

The path to the script: /public_html/Juicebox_Namur/jbcore

I cleared cache. Is there something else I should do?

This is the embedded code:

<!--START JUICEBOX EMBED-->
<script src="http://www.joaqimb.be/Juicebox_Namur/jbcore/juicebox.js"></script>
<script>
new juicebox({


baseUrl : 'http://www.joaqimb.be/Juicebox_Namur/',

containerId: "juicebox-container",
galleryWidth: "640",
galleryHeight: "640",
backgroundColor: "rgba(102,102,102,1)"
});
</script>
<div id="juicebox-container">

<!--END JUICEBOX EMBED-->



This is the final coding of the page as registered by Internet Explorer):


    <div class="content-sidebar-wrap">

    <div id="content">
            <section id="post-content" role="main">
                                <h1 class="page-title">Namur</h1>                <div class="tabs-wrapper"><h2 class="element-invisible">Primaire tabs</h2><ul class="tabs primary clearfix"><li class="active"><a href="/node/53" class="active">Weergeven<span class="element-invisible">(actieve tabblad)</span></a></li>
<li><a href="/node/53/edit">Bewerken</a></li>
</ul></div>                        <div class="region region-content">
  <div id="block-system-main" class="block block-system">

     
  <div class="content">
                           
     
   
  <div class="content node-article">
    <div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>&lt;!--START JUICEBOX EMBED--&gt;<br />
&lt;script src="/Juicebox Namur/jbcore/juicebox.js"&gt;&lt;/script&gt;<br />
&lt;script&gt;<br />
new juicebox({ <strong>baseUrl : '/</strong>Juicebox Namur/'<strong>,</strong>containerId: "juicebox-container",<br />
galleryWidth: "800",<br />
galleryHeight: "800",<br />
backgroundColor: "rgba(102,102,102,1)"<br />
});<br />
&lt;/script&gt;<br />
&lt;div id="juicebox-container"&gt;</p>
<p>&lt;!--END JUICEBOX EMBED--&gt;</p>
</div></div></div>  </div>

Re: embedding script in Drupal 7 article [SOLVED]

Having uploaded your entire gallery folder, the embedding code is all you need.
It looks like the problem is that your gallery folder is named 'Juicebox Namur' but the two paths in your embedding code use 'Juicebox_Namur' (notice the underscore instead of a space). Make sure that the name of the gallery folder in the paths in your embedding code matches the name of the gallery folder on your web server.

Re: embedding script in Drupal 7 article [SOLVED]

I synchronised the names but nothing helps.

Re: embedding script in Drupal 7 article [SOLVED]

Please post the URL to your web page so that I can take a lok and help further.
Once I see the code that you are using on your web server, I should be able to determine the cause of the problem.

Re: embedding script in Drupal 7 article [SOLVED]

Steven,

I synchronised all folder names, but without result.

Assuming the embedded coding is correct, then some other questions should be answered (sorry for my bad English):

1. JuiceboxBuilder asks for the index page of the website. Default value: index. html. My site has in index.html page but only by alias for another page. May this be the problem? If so: how can I solve the problem?

2. What is the root directory of the site? 'public_html' or "/".

3. When I use an absolute path "www.sitename.be/Juicebox Namur/...' than a partial link is generated, namely "www.sitename.be/Juicebox". How comes? By evidence this link does not work.

I hope we will reach a final solution. I'm happy with JuiceboxBuilder but at the end it's useless. I hope I don't have to ask for refund. I really would feel sorry.

Thanks for support.

Re: embedding script in Drupal 7 article [SOLVED]

I have taken a look at your web site and have found your gallery's web page.
The problem is that you have entered your embedding code into your Drupal editor as plain text and not as HTML code (and the embedding code is appearing as text on your web page rather than being rendered as actual HTML code by the browser).
You will need to change your editor's 'Text format' (at the bottom of the editor) from 'Plain text' to 'Full HTML' before entering the embedding code.

1. JuiceboxBuilder asks for the index page of the website. Default value: index. html. My site has in index.html page but only by alias for another page. May this be the problem? If so: how can I solve the problem?

This is not the problem (see above) but you can change the name of the page to anything you like (to avoid filename conflicts).
If you are embedding your gallery in an existing web page, then you do not need to use (or upload) the gallery's own 'index.html' file at all. It is used only if you want to display the gallery on a page of its own.
Also, the 'index.html' file will be stored within the gallery folder and if you use a baseUrl, you will upload the entire gallery folder (not just the contents) so there is no chance that the gallery's 'index.html' file will conflict with one of your own 'index.html' files.

2. What is the root directory of the site? 'public_html' or "/".

On your web server, the root directory is 'public_html'.
If you upload a file named 'test.html' to your 'public_html' directory via FTP, then it will be accessible on the web at '/test.html' in one of your web pages.

3. When I use an absolute path "www.sitename.be/Juicebox Namur/...' than a partial link is generated, namely "www.sitename.be/Juicebox". How comes? By evidence this link does not work.

This fails within the forum software because you use a space in your 'Juicebox Namur' folder name (and the forum software sees a space as the end of the path). As long as the paths are correct within your web page, everything should be OK.
However, I would recommend that you use only web-safe characters for files and folders on your web server.
Please see section 2.3 of this document for details.

Characters that are allowed in a URI but do not have a reserved purpose are called unreserved. These include uppercase and lowercase letters, decimal digits, hyphen, period, underscore, and tilde.

Re: embedding script in Drupal 7 article [SOLVED]

Dear Steven,

It works.

I have always worked with FULL HTML but: CKEDITOR has a RICH TEXT and a PLAIN TEXT format. And that was the mistake: I hadn't noticed that RTF was the standard format. Switching to plain text made the slider work.

So you were right !!!

I was really desperate while not understanding what was going on and always looking for a syntax error.

Many Many thanks.

I will enjoy JuiceboxBuider. Such a great tool !!!!

Andrew