• Registered: 2017-08-10
  • Posts: 4

Topic: Images Folder causing problems

I want to embed a gallery on my home page, but my website is using a folder named "images".  So when I try to create the gallery it overwrites my existing images folder.  Is it possible to rename the Images folder created by Juicebox?   Unfortunately creating a folder to put the Juicebox subfolders in makes it so the config file cant be found.  If you move the config file to the root directory, the paths are all messed up.  I dont want to change my existing Images folder.  Any ideas?  Thanks

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

Re: Images Folder causing problems

There is no way to change the name of the 'images' folder from within the JuiceboxBuilder-Pro interface but there are a couple of things you could do.

(1) After creating the gallery, change the name of the 'images' folder manually and then change all instances of 'images' (to match the name you chose for your image folder) in the imageURL entries in the gallery's 'config.xml' file. (This can be done quickly and easily with a single global search and replace action in a text editor such as Notepad++.)

... or:

(2) Give your gallery folder a unique name, upload the complete gallery folder (not just the contents) to your web server and embed your gallery into your web page using the baseUrl method documented here. (The gallery's 'images' folder will remain inside the gallery folder and will not clash with your own 'images' folder.)
For example, if your gallery folder is named 'my_gallery_folder' and you upload it to the root directory of your web space, then you could use the following embedding code. The leading slashes in the paths denote your root directory so this code will work in any web page throughout your site without modification (although you can change the gallery dimensions and background color if you like).

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

I suggest uploading the gallery folder to your root directory for convenience but you can upload it to anywhere on your web server that you like 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: 2017-08-10
  • Posts: 4

Re: Images Folder causing problems

I like option (1)  a lot, but have a question.   Wouldn't any existing Images folder of my own, be over written the second I push the Save button in Juicebox?  I realize I could temporarily move the contents of my own Images folder before doing this and then move it back once I change the name of the Juicebox images folder, but just wondering if there is a way to edit the config file before pushing the save button.  Again, I realize there is a work around here but just trying to save steps.  Thanks for your idea. 

On an unrelated note, is there any way to make the Thumbnail size a percentage instead of fixed pixels (or make it responsive somehow to the viewport).  I am trying to create a matrix of images on my home page without a large splash image.  I want all the images to show up across the home page in 2 or 3 rows without a large image, just the thumbs.    This works great on desktop computers with large screens, but on smart phones, I only get 1 column of photos because when I try to increase the size of the thumbnails to something like 200 it changes how it looks on mobile devices.  I know that some galleries I have seen online have variable size thumbnails that are responsive to the  viewport.  Is there a work around for this?  I dont mind there being less columns in mobile, but 1 doesnt work so well.  Here is my example: https://www.weddingphotographersanfranc … llery.html

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

Re: Images Folder causing problems

Wouldn't any existing Images folder of my own, be over written the second I push the Save button in Juicebox?

Yes. If you save your gallery to a folder which already contains a custom 'images' folder, then the contents of your custom 'images' folder will be deleted.
I'd recommend that you save your gallery to a new empty folder of its own and then make the required changes before adding the gallery files to your web project.

... just wondering if there is a way to edit the config file before pushing the save button.

No, unfortunately not. There is no way to change the name of the 'images' folder or to use custom paths for the imageURL entries from within JuiceboxBuilder.
If you save the gallery to a folder of its own, then it would be very easy to just keep the gallery in its folder (without needing to make any modifications to the contents) and embed the gallery using the baseUrl method that I mentioned above.

... is there any way to make the Thumbnail size a percentage instead of fixed pixels (or make it responsive somehow to the viewport).

No. The dimensions of the thumbnails can be defined only in absolute pixel values (and not percentages). The gallery itself will remain responsive (changing its layout to suit the available space) and this may result in fewer or more thumbnails being displayed per thumbnail page, but the dimensions of the thumbnails will always remain fixed (at the specified thumbWidth and thumbHeight values), no matter what device is being used to view the gallery. (The size of the main image and the number of thumbnails displayed can dynamically change depending on the size and shape of the browser viewport but the thumbnail size remains constant.)
I realise that this might not be the answer you were looking for but I hope that it at least helps to clarify things.

I dont mind there being less columns in mobile, but 1 doesnt work so well.

Perhaps the best course of action would be to compromise and set your thumbWidth to a value which gives you at least 2 columns of thumbnails on your small screen devices (and accept that this will also result in smaller thumbnails in desktop browsers, too).
Hopefully you'll find a balance that works.