1 Topic by Fran (edited by Fran 2012-09-07 17:21:17)

  • Fran
  • Member
  • Offline
  • Registered: 2012-09-07
  • Posts: 5

Topic: To see gallery JuiceBox in Blogger.com

Hello, congratulation by the forum and by the marvellous program JuiceBox.

I am trying to publish a gallery of photos in Blogger.com using JuiceBox, but I am doing something badly (pardon for my English, I am Spanish). I have read the posts of the forum, the instructions (http: // www.juicebox.net/support/)..., but I cannot visualize the gallery. I will try to explain the steps that followed:

1.- I have created the gallery "jb-galleries" using the JuiceboxBuilder Lite v1.1.1.
If i open index.html in my local PC, yes that I see the gallery correctly.

2.- I change the file index.html with the code of my gallery:

<!--START JUICEBOX EMBED-->
<script src="jb-galleries/jbcore/juicebox.js"></script><br />
<script>
new juicebox({
containerId : "juicebox-container",
galleryWidth: "100%",
galleryHeight: "100%",
backgroundColor: "rgba(34,34,34,1)"
baseUrl: 'jb-galleries/'
});
</script></p>
<div id="juicebox-container"></div>
<p><!--END JUICEBOX EMBED-->


3.- I modify the routes url of the images and thumbs, in the file config.xml:

<image imageURL="https://www.dropbox.com/s/md7ywgedtmbveag/adriana_lima_29_.jpg"
    thumbURL="https://www.dropbox.com/s/3sd3hppiylfgsoz/adriana_lima_29_.jpg"
     
linkURL="https://www.dropbox.com/s/3sd3hppiylfgsoz/adriana_lima_29_.jpg"
    linkTarget="_blank">
    <title><![CDATA[adriana_lima_29_]]></title>
   
<caption><![CDATA[]]></caption>
  </image>
……. 

4.- I Upload in Dropbox.com the whole content of the gallery jb-galleries (https://www.dropbox.com/sh/5muuwaryisjv369/dV3ix0pGZk, http://dl.dropbox.com/u/103029741/Files_in_DropBox.jpg) with the changes realized previously.


5.- Finally, I insert an iframe in a Gadget of Blogger.com's page with the following code:
<iframe src="http://dl.dropbox.com/u/103029741/jb-galleries/index.html" width="800" height="600" frameborder="0" scrolling="no"></iframe>

On having loaded the page of the blog, I cannot see the gallery. I know that I have some mistake, but I do not find it. Can you help me?

Thank you very much, Fran.

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

Re: To see gallery JuiceBox in Blogger.com

Try the following (which does not require you to modify the embedding code or any paths in your gallery's XML file).

(1) Download and install the Dropbox client program (from this web page)
(2) Create your Juicebox gallery with the method of your choice (e.g. JuiceboxBuilder-Lite v1.1.1)
(3) Drag and drop the entire gallery folder (not just the contents) into the 'Public' folder within the newly created Dropbox folder on your computer
(4) Navigate towards your gallery's 'index.html' file (within 'username/Dropbox/Public/gallery_folder/'), right-click it and select 'Dropbox -> Copy public link'
(5) Embed your gallery using an <iframe> whose 'src' attribute points towards the 'index.html' page within your gallery folder (the URL you copied in Step #4 above), e.g.

<iframe src="URL_to_gallery_index_page" width="800" height="600" frameborder="0" scrolling="no"></iframe>
  • Fran
  • Member
  • Offline
  • Registered: 2012-09-07
  • Posts: 5

Re: To see gallery JuiceBox in Blogger.com

Hello,
perfect, many graces for your help, now I can see the gallery of images very well.

Now I am trying to create a Resizable Gallery with Side Menu, but it does not operate correctly. I upload in Dropbox two galleries in the folder Public/example: gallery1 and gallery2 (each one works correctly in an individual way, http://dl.dropbox.com/u/103029741/examp … opBox_.jpg). The problem is in creating this Side Menu. I have modified the code in the file index.html of the folder gallery1, adding in <body> the text in bold:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>gallery1</title>
        <meta charset="utf-8" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="description" content="This is a Juicebox Gallery. Get yours at www.juicebox.net" />
        <style type="text/css">
            body {
                margin: 0px;
            }
        </style>
    </head>
    <body>
        <!--START JUICEBOX EMBED-->
        <script src="jbcore/juicebox.js"></script>
        <script>
            new juicebox({
                containerId : 'juicebox-container',
                galleryWidth: '100%',
                galleryHeight: '100%',
                backgroundColor: '#222222'
            });

        </script>
        <div id="juicebox-container"></div>
        <!--END JUICEBOX EMBED-->

   
    <div id="header">
        <a href = "http://dl.dropbox.com/u/103029741/examp … index.html">Gallery 1</a><br />
        <a href = "http://dl.dropbox.com/u/103029741/examp … index.html">Gallery 2</a>
    </div>

    </body>
</html>


Finally, I insert an iframe in a Gadget of Blogger.com's page with the following code:
<iframe src="http://dl.dropbox.com/u/103029741/example/gallery1/index.html" width="800" height="600" frameborder="0" scrolling="no"></iframe>.

But the result is incorrect. Please, might you help me?
Thank you very much, Fran.

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

Re: To see gallery JuiceBox in Blogger.com

The 'Resizable Gallery with Side Menu Example' from the Embedding Guide is a little more complex than that (as it involves some CSS and JavaScript in addition to what is usually found in a gallery's 'index.html' page') but I'll try to keep things relatively simple.
Upload your complete gallery folders to your Dropbox 'Public' folder as usual but, before you do, replace each of your gallery's 'index.html' pages with the following code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Juicebox Gallery</title>
    <style type="text/css">
        html, body {
            height: 100%;
            overflow: hidden;
        }
        body {            
          margin: 0;
          padding: 0;
          background-color: #333;
          color: #666;
          font-family: sans-serif;
          font-size: 20px;        
        }
        a {    
          color: #ccc;
        }
        #header {
          text-align: center;
          background-color: #333;
          width: 200px;
          padding: 20px 0;
          float: left;
        }
        #juicebox-content {
          width: 600px;
          height: 600px;
          float: right;
          background-color: #222;
        }
    </style>
    <script type="text/javascript" src="jbcore/juicebox.js"></script>
    <script type="text/javascript">
    function doLayout() {
        var winHeight, winWidth, headerWidth;
        winHeight = window.innerHeight ? window.innerHeight : $(window).height();
        winWidth = window.innerWidth ? window.innerWidth : $(window).width();
        headerWidth = $('#header').outerWidth() + 1;
        $('#juicebox-content').height(parseInt(winHeight)).width(parseInt(winWidth) - parseInt(headerWidth));
    }
    $(document).ready(function () {
        doLayout();
        $(window).bind('resize', doLayout);
        new juicebox({
            containerid : 'juicebox-container'
        });
    });
    </script>
</head>
<body>
    <div id="header">
        <a href = "../gallery1/index.html">Gallery 1</a><br />
        <a href = "../gallery2/index.html">Gallery 2</a>
    </div>
    <div id="juicebox-content">
        <div id="juicebox-container"></div>
    </div>
</body>
</html>

Now all you need to do is load whichever gallery's 'index.html' page you would like to be displayed first into your <iframe>.

  • Fran
  • Member
  • Offline
  • Registered: 2012-09-07
  • Posts: 5

Re: To see gallery JuiceBox in Blogger.com

Hi,

Many thanks for the explanations and the time of work. They have been of great usefulness for me. Congratulations for the potential of Juicebox.

Faithfully,

Fran.