• Registered: 2018-05-02
  • Posts: 3

Topic: Can't figure it out!

I'm working with a live site, so I have to hide things.  Anyhow...

http://www.thsgw.com is the site.  I'm replacing the gallery because it will not handle Portrait and Landscape photos together.  It crops them, sucks!  But what I'm looking for is something similar to what I have on the gallery page, if you note everything is nice and stays within the site....

If you go the my hidden page http://www.thsgw.com/gallery.html you can see the juicebox gallery.  Now I combine them....

http://www.thsgw.com/1.htm and some of the photos cover the T logo at the top right, and go beyond the frame I have set.  What am I missing?  AS soon as this works, I'm getting the PRO version or IF I need the pro version to do this I'll get it now.  The program is easier to use then doing the photos by hand that is for sure.

I also would like the photos to expand to original size when clicked on but that is probably not possible.

I though this is going to be simple, take my photos import them and it would make nice and small thumbnails, then when you click on would open to full size.  I could do it in my Xara Designer Pro X11 but I have to do each photo separately one at a time, gallery software is the way to go.

Any help is MUCH appreciated!

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

Re: Can't figure it out!

... some of the photos cover the T logo at the top right, and go beyond the frame I have set.

It looks like you have copied and pasted the Juicebox embedding code at the very end of your 'Gallery' web page (just before the closing </body> tag).

The Juicebox embedding code (or more specifically the <div id="juicebox-container"><div> container) should be placed in your web page wherever you want the gallery to be displayed. The Juicebox embedding code should replace your existing gallery code but it looks like you might have just removed your existing gallery code and added the Juicebox embedding code to the end of the web page.

It looks like the Juicebox embedding code should go inside your <div id="imageGallerySimple_v11_0" class="xwidget simpleGallery"></div> container (but you might need to keep the 'id' and 'class' attributes intact in case there is some custom CSS on your web page which defines the dimensions of this container which you might want to retain).

Incidentally, embedding a Juicebox-Lite gallery is exactly the same as embedding a Juicebox-Pro gallery.

I also would like the photos to expand to original size when clicked on but that is probably not possible.

If you set showOpenButton="TRUE" (in JuiceboxBuilder-Lite's 'Customize' section), then the Open Image button will be displayed on the Button Bar.
When the Open Image button is clicked, the gallery will open the corresponding imageURL (the gallery image) in a new tab unless there is a linkURL specified for the image, in which case this will be used instead.
The linkURL can be a relative path (relative to the web page containing the gallery's embedding code) or an absolute path, in the form http://www.example.com/images/image_0001.jpg.

You can set a unique linkURL entry for each image on JuiceboxBuilder-Lite's 'Images' tab (just click a thumbnail to reveal the input fields at the bottom of the window).

(If you wanted to allow users to open images larger than those used in the gallery, then you could prepare larger images and point towards them using the linkURL entries.)

You could also set imageClickMode="OPEN_URL" (Pro only, via JuiceboxBuilder-Pro's 'Customize -> Main Image' section).
Now, when you click the main image, the linkURL (or imageURL if there is no corresponding linkURL) will be opened (instead of navigating to the previous or next image). Navigation can still be achieved via the navigation buttons.

I hope this helps.

  • Registered: 2018-05-02
  • Posts: 3

Re: Can't figure it out!

So this is a problem with my web design software, I'll have to figure out how to place that code where needed.

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

Re: Can't figure it out!

It's just a matter of getting the Juicebox embedding code in the right place on your web page (replacing your current gallery's code with the Juicebox embedding code in the same place within the page).
If you are having trouble with your web design software, then you could try opening your gallery's HTML web page in a plain text editor and swapping your current gallery's code with the Juicebox embedding code manually.

5 Reply by philjulias (edited by philjulias 2018-05-04 22:25:23)

  • Registered: 2018-05-02
  • Posts: 3

Re: Can't figure it out!

I have to be a total dummy, but I have to ask...

Embed Sizes

A Juicebox gallery can be embedded as Full Browser or Embedded.

Full Browser - means the gallery fills 100% x 100% of the browser window.

Embedded - means the gallery is a fixed size element in a bigger HTML page (e.g. a small gallery in a blog). Embedded galleries display the Expand button which allows the user to expand the gallery to fill the browser window and display the images at higher resolution.


I want embedded not full browser mode.  How to I use the embedded function, I can't find anything in the config about it.

I only ask this, because this page....

http://www.thsgw.com/testgallery.html

will not embed into my website, correctly.  It jumps out of the iframe all together, it takes over the browser.

see     http://www.thsgw.com/2.htm

If anyone can solve this, THANKS IN ADVANCE!

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

Re: Can't figure it out!

Embedding a Juicebox gallery into an existing web page alongside other content just involves copying the embedding code (presented on JuiceboxBuilder-Lite's 'Publish' tab and also noted in the Embedding Guide) into your web page wherever you want the gallery to appear.

It jumps out of the iframe all together, it takes over the browser.

As I mentioned above, the problem is the location of the Juicebox embedding code on your web page. (The embedding code itself is OK.)

The embedding code is currently at the foot of your web page and is not inside any of your web page's existing containers.
If the embedding code was inside the container where your old gallery was, then it would be 'contained' within this container and the gallery, having a width of 100%, would fill only the width of the parent container (and not the entire width of your web page).

There are a lot of <div> containers on your web page and it is difficult to know exactly which container the gallery should be inside as the <div> containers on your web page do not use descriptive CSS class names or ids (like 'header' or 'content').
However, just try moving the gallery to inside the outermost <div> to see if this makes a difference.
Look for the first closing </div> tag above your gallery's embedding code and move it to below your gallery's embedding code.
Hopefully this will make a difference. (Even if it does not solve the problem outright, it might at least help by restraining the gallery's width to that of the main content area on your web page.)