• Registered: 2012-12-13
  • Posts: 36

Topic: Flickr shows in JB App, but not on sight

Please help me with this!

Here is a screenshot showing everything looking good in my first flickr gallery: http://www.screencast.com/t/DI5UaU1Br
Here is the link to the Flickr gallery: https://www.flickr.com/photos/91112232@ … 2243381820
Here is a link to the page where this gallery is embedded: http://gateslosangeles.com/party.html

I have wordpress site with a widget that allows me to import javascript. It's one of the Visual Composer tools. When I add the code in their tool: http://www.screencast.com/t/2msFCmfdg, I get this as the result: http://www.screencast.com/t/dMGW0ucZ

Here is my code from Juicebox to a Flickr Set:

<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>

containerId: "juicebox-container",
galleryWidth: "100%",
galleryHeight: "100%",
backgroundColor: "#222222"
});
</script>
<div id="juicebox-container">
<!-- Image gallery content for non-javascript devices -->
<noscript>
<h1>Stainless</h1>
<p></p>
<p><img src="https://farm9.staticflickr.com/8223/8270410515_ff228b8e72.jpg" title="SG001" alt="" /><br>SG001 </p>
<p><img src="https://farm9.staticflickr.com/8062/8271474980_12535c2caf.jpg" title="" alt="" /><br> </p>
<p><img src="https://farm9.staticflickr.com/8494/8271474954_5a8b18ec2b.jpg" title="SG003" alt="" /><br>SG003 </p>
<p><img src="https://farm9.staticflickr.com/8352/8271474928_af5d29b94a.jpg" title="SG004" alt="" /><br>SG004 </p>
<p><img src="https://farm9.staticflickr.com/8349/8271474910_ecb018a89c.jpg" title="SG005" alt="" /><br>SG005 </p>
<p><img src="https://farm9.staticflickr.com/8063/8270410359_867e74fdd0.jpg" title="SG006" alt="You must fence in your swimming pool to protect your children" /><br>SG006 You must fence in your swimming pool to protect your children</p>
<p><img src="https://farm9.staticflickr.com/8357/8270410319_cb8d7c500b.jpg" title="" alt="" /><br> </p>
<p><img src="https://farm9.staticflickr.com/8222/8271474820_21ea7f1bb5.jpg" title="SG008" alt="" /><br>SG008 </p>
<p><img src="https://farm9.staticflickr.com/8478/8270410279_1eb09246f0.jpg" title="SG009" alt="" /><br>SG009 </p>
<p><img src="https://farm9.staticflickr.com/8486/8271474762_42c1cbbd5c.jpg" title="SG010" alt="" /><br>SG010 </p>
<p><img src="https://farm9.staticflickr.com/8488/8271474734_707acfb90b.jpg" title="SG011" alt="" /><br>SG011 </p>
<p><img src="https://farm9.staticflickr.com/8344/8271474684_b6a8a6e52b.jpg" title="SG012" alt="" /><br>SG012 </p>
<p><img src="https://farm9.staticflickr.com/8490/8271474660_9c882660df.jpg" title="SG013" alt="" /><br>SG013 </p>
<p><img src="https://farm9.staticflickr.com/8222/8271474624_b7aa3be35f.jpg" title="SG014" alt="" /><br>SG014 </p>
<p><img src="https://farm9.staticflickr.com/8065/8270410097_8de559bd7f.jpg" title="SG015" alt="" /><br>SG015 </p>
<p><img src="https://farm9.staticflickr.com/8504/8271474564_2a2cf32fb2.jpg" title="" alt="" /><br> </p>
<p><img src="https://farm9.staticflickr.com/8058/8271474548_80f6a2151f.jpg" title="SG017" alt="" /><br>SG017 </p>
<p><img src="https://farm9.staticflickr.com/8082/8271474520_754f85e525.jpg" title="SG018" alt="" /><br>SG018 </p>
<p><img src="https://farm9.staticflickr.com/8065/8271474502_b0e3fd14e5.jpg" title="SG019" alt="" /><br>SG019 </p>
<p><img src="https://farm9.staticflickr.com/8358/8270409963_326ecdf10a.jpg" title="SG020" alt="" /><br>SG020 </p>
<p><img src="https://farm9.staticflickr.com/8350/8270410907_2b38cdd8f3.jpg" title="SG021" alt="" /><br>SG021 </p>
<p><img src="https://farm9.staticflickr.com/8351/8270410873_dfd4592a64.jpg" title="SG022" alt="" /><br>SG022 </p>
<p><img src="https://farm9.staticflickr.com/8481/8270409925_5486b71642.jpg" title="SG023" alt="" /><br>SG023 </p>
<p><img src="https://farm9.staticflickr.com/8337/8271474412_c4c41489c4.jpg" title="" alt="" /><br> </p>
<p><img src="https://farm9.staticflickr.com/8073/8270410829_8114d202be.jpg" title="SG025" alt="" /><br>SG025 </p>
<p><img src="https://farm9.staticflickr.com/8061/8270410783_de839f6438.jpg" title="SG026" alt="" /><br>SG026 </p>
<p><img src="https://farm9.staticflickr.com/8081/8271474386_eb26dec524.jpg" title="" alt="" /><br> </p>
<p><img src="https://farm9.staticflickr.com/8488/8270409821_9924735bae.jpg" title="" alt="" /><br> </p>
<p><img src="https://farm9.staticflickr.com/8479/8271474328_ff4c5b7125.jpg" title="" alt="" /><br> </p>
<p><img src="https://farm9.staticflickr.com/8485/8270410747_76cb5e6d58.jpg" title="SG030" alt="" /><br>SG030 </p>
<p><img src="https://farm9.staticflickr.com/8354/8270409755_ba71c53432.jpg" title="SG031" alt="" /><br>SG031 </p>
<p><img src="https://farm9.staticflickr.com/8481/8270410695_b15eca27cc.jpg" title="SG032" alt="" /><br>SG032 </p>
<p><img src="https://farm9.staticflickr.com/8199/8270410649_223dc24b40.jpg" title="" alt="" /><br> </p>
<p><img src="https://farm9.staticflickr.com/8348/8271474252_ac481c9b74.jpg" title="" alt="" /><br> </p>
<p><img src="https://farm9.staticflickr.com/8361/8271474218_ac17509795.jpg" title="SG035" alt="" /><br>SG035 </p>
<p><img src="https://farm9.staticflickr.com/8220/8271474190_ef10ab9384.jpg" title="" alt="" /><br> </p>
<p><img src="https://farm9.staticflickr.com/8489/8270410623_4306eb0abc.jpg" title="" alt="" /><br> </p>
<p><img src="https://farm9.staticflickr.com/8084/8271475084_eeb49ecb96.jpg" title="SG038" alt="" /><br>SG038 </p>
<p><img src="https://farm9.staticflickr.com/8346/8270409595_88108e38a2.jpg" title="" alt="" /><br> </p>
<p><img src="https://farm9.staticflickr.com/8078/8271474126_59970eb8b4.jpg" title="" alt="" /><br> </p>
<p><img src="https://farm9.staticflickr.com/8356/8271474078_fc6ff36a4b.jpg" title="SG041" alt="" /><br>SG041 </p>
<p><img src="https://farm9.staticflickr.com/8221/8270409477_551936a87e.jpg" title="SG042" alt="" /><br>SG042 </p>
<p><img src="https://farm9.staticflickr.com/8480/8271474028_fc6c40d6f7.jpg" title="SG043" alt="" /><br>SG043 </p>
<p><img src="https://farm9.staticflickr.com/8355/8270409411_38e3aa8a19_b.jpg" title="" alt="" /><br> </p>
<p><img src="https://farm9.staticflickr.com/8205/8270409369_058cdc4517_b.jpg" title="" alt="" /><br> </p>
<p><img src="https://farm9.staticflickr.com/8063/8270409319_519bbac7e1_b.jpg" title="SG046" alt="" /><br>SG046 </p>
<p><img src="https://farm9.staticflickr.com/8491/8270409255_d520d05d88.jpg" title="SG047" alt="" /><br>SG047 </p>
<p><img src="https://farm9.staticflickr.com/8477/8271475038_dffaf05a28.jpg" title="SG048" alt="" /><br>SG048 </p>
<p><img src="https://farm9.staticflickr.com/8217/8271473792_0d35c7eabc_b.jpg" title="SG049" alt="" /><br>SG049 </p>
<p><img src="https://farm9.staticflickr.com/8082/8271473742_535eee2e5f_b.jpg" title="SG050" alt="" /><br>SG050 </p>
</noscript>
</div>
<!--END JUICEBOX EMBED-->
  • Registered: 2012-04-24
  • Posts: 5,924

Re: Flickr shows in JB App, but not on sight

I see a couple of things which might be causing your problem.

(1) You have WP-Juicebox installed (which loads the 'juicebox.js' file into your web page) and you also load the 'juicebox.js' file into your web page manually (at the top of your gallery's embedding code).
The 'juicebox.js' file should be loaded only once per web page.
If you are embedding your gallery manually, then you can disable WP-Juicebox.

(2) The path to the 'juicebox.js' file at the top of your gallery's embedding code in incorrect. The path you use is relative and will be relative to the page containing the embedding code. Therefore, the 'juicebox.js' file should be located here: http://gateslosangeles.com/jbcore/juicebox.js (but it is not there).

(3) As your gallery's embedding code does not feature a configUrl or a baseUrl, Juicebox will expect the gallery's XML file to be named 'config.xml' and to be located in the same directory as the page containing the embedding code. The 'config.xml' file does not see to be there: http://gateslosangeles.com/config.xml

If you copy the contents of your gallery folder (not the folder itself) to the root directory of your web space, then your gallery should display fine.

Otherwise, if you have uploaded your complete gallery folder to your web server somewhere, then you can use the baseUrl method of embedding documented here.

For example, if your gallery folder is named 'my_gallery_folder' and you uploaded the complete gallery folder to your root directory, then you could use the following embedding code (in any page throughout your web site).

<!--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-->

(The leading slashes in the paths above denotes your root directory.)

When using the baseUrl method, it does not matter where on your web server you upload the gallery folder to as long as the two paths in the embedding code (the path to the 'juicebox.js' file and the baseUrl itself, pointing towards the gallery folder) are correct.

  • Registered: 2012-12-13
  • Posts: 36

Re: Flickr shows in JB App, but not on sight

I've got lots of pages in this site with jukebox galleries. Other than this gallery being discussed in this posting, they are all via wordpress working off of Picasa galleries. I thought that it would be good idea to try the embed method as I heard that there are advantages; that the images are presented better. Do I understand correctly?


Is there any advantage of the embed feature over the WP plugin?

Please let me know if there are any advantages. If there are not, it's a non-issue; I will continue with the plug in.

If there are advantages in embedding, is there any step by step "recipe" for how to do this with flickr being the source of the images and with wordpress being the platform where the embed code is being used?

If not, please clarify:

You mentioned that the 'juicebox.js' file should be located here: http://gateslosangeles.com/jbcore/juicebox.js  But you then said "(but it is not there)" Should I simply copy that file from it's current location to the jbcore folder mentioned and delete the original file?

In your (3), can you offer any instructions on how to do this, with a wordpress site?

I appreciate your assistance.

Dan

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Flickr shows in JB App, but not on sight

I thought that it would be good idea to try the embed method as I heard that there are advantages; that the images are presented better. Do I understand correctly?

A gallery embedded manually will look and function exactly the same as a gallery created with WP-Juicebox (assuming both galleries have exactly the same configuration settings).

Is there any advantage of the embed feature over the WP plugin?

Using WP-Juicebox will embed the gallery automatically (avoiding any problem which can occur when embedding manually such as file locations and pathing issues). Also, if you have multiple galleries on the same page, WP-Juicebox will load the 'juicebox.js' file only once per page (rather than once per gallery). This is recommended. (Loading the 'juicebox.js' file multiple times in a single page can cause problems, especially if the 'juicebox.js' files being loaded are different versions.)

If there are advantages in embedding, is there any step by step "recipe" for how to do this with flickr being the source of the images and with wordpress being the platform where the embed code is being used?

There are no advantages to embedding manually (but as long as the file locations and embedding code are correct, there are no disadvantages, either). However, if your WordPress site can display multiple posts containing Juicebox galleries on a single page, then there may be an issue with multiple 'juicebox.js' files being loaded. Using WP-Juicebox will avoid this potential problem.

Here are the steps required to achieve your manually embedded Flickr-sourced gallery.
(1) Create a Juicebox gallery (using Flickr as a source of images) using JuiceboxBuidler-Pro.
(2) Upload the complete gallery folder (not just the contents) to your web server.
(3) Paste the baseUrl embedding code into the body of your WordPress page (ensuring that the method of entry is 'Text' rather than 'Visual').

It does not matter where on your web server you upload your gallery folder to as long as the two paths in the embedding code (the path to the 'juicebox.js' file and the baseUrl itself, pointing towards the gallery folder) are correct.

In a WordPress site where you may have little or no control over the gallery's parent containers, I would recommend giving your gallery a fixed pixel value height (such as 600px) instead of the JuiceboxBuilder-Pro default value of 100%.
Please see this note regarding Using Percentage Heights. (Using a fixed height will avoid this potential problem.)

You mentioned that the 'juicebox.js' file should be located here: http://gateslosangeles.com/jbcore/juicebox.js  But you then said "(but it is not there)" Should I simply copy that file from it's current location to the jbcore folder mentioned and delete the original file?

If you copied the entire contents of your gallery folder (but not the folder itself) to your root directory, then the 'juicebox.js' file would be in the correct location (according to your current embedding code). You could do this and you should see that your gallery displays OK.

I suspect that you may have already uploaded your gallery folder to your web server somewhere but I do not know where it might be. If you have already uploaded your gallery folder to your web server, then you can leave it exactly where it is and:
(a) Add a baseUrl line to your embedding code to point towards the gallery folder. The baseUrl an be relative (to the page containing the embedding code) or absolute.
(b) Adjust the path to the 'juicebox.js' file at the top of your embedding code (to point to the 'juicebox.js' file inside the 'jbcore' folder in your gallery folder. Again, this path can be relative (to the page containing the embedding code) or absolute.

In your (3), can you offer any instructions on how to do this, with a wordpress site?

Please see Steps #1 - #3 above.

I hope this helps to clarify things.

  • Registered: 2012-12-13
  • Posts: 36

Re: Flickr shows in JB App, but not on sight

Thank you very much for taking the time to reply to this. Very comprehensive.

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Flickr shows in JB App, but not on sight

You're welcome.