• Registered: 2018-12-26
  • Posts: 8

Topic: Centering vertical images

This is probably a basic question....but I can't get my vertical images to center....all are on the left.  I could work around that by creating blank space to the left of the image matching my background color.  But the text overlays then would be off center.

Also, an off-topic question:  When saving galleries to their respective folders, codes for other galleries are duplicated and saved into the same folder for no apparent reason.  I end up deleted the superfluous codes prior to uploading to my site.

Thanks.

Adam

Here's my juicebox site for an example:

http://adamattoun.com

BTW - I built the site on Dreamweaver CS3 and have zero coding or HTML experience otherwise.

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

Re: Centering vertical images

This is probably a basic question....but I can't get my vertical images to center....all are on the left.

It looks like all your images (both landscape and portrait) are justified left due to setting imageHAlign="LEFT" in your gallery's 'config.xml' file.
Setting imageHAlign="LEFT" will ensure that the left-hand edge of each image is flush against the left-hand edge of the image area within the gallery.
Set imageHAlign="CENTER" instead (the default value) and your images will all be horizontally centered within the gallery's image area.
For reference, imageHAlign can be found in JuiceboxBuilder-Pro's 'Customize -> Main Image' section.

Also, an off-topic question:  When saving galleries to their respective folders, codes for other galleries are duplicated and saved into the same folder for no apparent reason

If you save each gallery to its own unique folder and re-save a specific gallery to its own specific folder, then no other gallery folders should be touched when re-saving the gallery.
I cannot replicate the problem you describe but it you can provide a certain folder structure and set of instructions which will allow me to reproduce the problem, I'll certainly be happy to investigate further.
Thank you.

  • Registered: 2018-12-26
  • Posts: 8

Re: Centering vertical images

Thank you sincerely for your prompt and thorough reply.  I believe I attempted a CENTER align option initially but things didn't work out.  For some reason, it was significantly increasing the spaces between the buttons on the left, at least on my home page.  I just played with the sizing numbers until things worked out.  That said, I'll give it another try.

Yeah the code duplication wasn't a problem since I just deleted each duplicated code from the folder it was saved into, and kept the correct codes in their respective folders.  No issues.  Basically, I have a folder for each "gallery" on my page:  Portraits, Commercial, Maternity, etc.  Within each folder, there's the actual HTML page, images and thumbnails, and juicebox code.  I name the code the same as the gallery (ie.  Code_Maternity.html).

What was happening was, after finishing the code for one gallery, I'd move to the next folder/gallery and save the respective code into it.  So, if I just finished Code_Maternity.html and then went to the portraits folder and saved Code_Portraits.html, the maternity code was duplicated and saved in the portraits folder as well.

By the time I was finished with the last gallery (landscapes), there were codes for all the previous galleries stored in the landscape folder (ie. Code_Portraits.html, Codes_Maternity.html, Code_Children.html, etc.).

At first I thought maybe juicebox needed all the codes stored in one folder.  But after deleting the excessive codes and seeing that my site functioned appropriately, I thought maybe it was a glitch in the program.  Or maybe I was doing something wrong.

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

Re: Centering vertical images

For some reason, it was significantly increasing the spaces between the buttons on the left, at least on my home page.

Setting a Juicebox-Pro configuration option should not affect elements outside the gallery on the embedding page. If you find that this is happening, then please set up a test page to demonstrate the problem and we'll investigate further.

So, if I just finished Code_Maternity.html and then went to the portraits folder and saved Code_Portraits.html, the maternity code was duplicated and saved in the portraits folder as well.

Unfortunately (or perhaps fortunately), I still can't replicate the problem. Files from one gallery folder are not duplicated into other gallery folders (at least for me) when I save a gallery on the 'Publish' tab (even when moving from one gallery to another without closing and re-opening JuiceboxBuilder-Pro between editing galleries).
I'm glad it's not a big problem for you but if you can boil the problem down to a reproducible set of steps that I can follow to replicate the problem, I'll happily investigate further.

Hopefully you'll get on OK but if you run into any further difficulties, just let me know and I'll do my best to help you out.

  • Registered: 2018-12-26
  • Posts: 8

Re: Centering vertical images

Steven, I can assure you that you're too kind.  Thank you again.  I'm content with my site as is, though will play with the centering of images soon.  I do have one more question if it's not too bothersome.  I'm afraid to tamper with the 'slideshow' on my main page because it took me a long while to get it working as is (that was what was affecting the spacing of my buttons, as I have it located in a table).  But out of curiosity, when viewing the main page on cell phones, rather than play as a slide show, it gives the option of viewing it as a gallery.  Once opened as a gallery, it then plays like a slideshow.

Is there a way to have it play as a slideshow immediately within the main page on cell phones?  I'm guessing it may have something to do with setting it at a fixed size.  But again, I'm afraid to tamper with it.  In truth, I can live with the cell phone format as is.  Just wondering if I can perfect it without much difficulty.

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

Re: Centering vertical images

But out of curiosity, when viewing the main page on cell phones, rather than play as a slide show, it gives the option of viewing it as a gallery.

What you are describing is the Splash Page.

On mobile (small screen) devices, if the gallery is embedded in a web page alongside other content, then Juicebox displays the Splash Page (an image placeholder for the gallery) which, when tapped, expands the gallery to fill the browser viewport (to give the main images as much room to be displayed as possible).
In Small Screen Mode, after tapping the Splash Page (or if the gallery is presented on a web page of its own and the Splash Page is not used), the user will be presented with a grid of thumbnails from which a main image can be selected.
When a thumbnail is tapped, the thumbnail page is replaced with the chosen image. (In Small Screen Mode, the thumbnails and main images are displayed on different pages to maximize the area available for the images on small screen devices.)
The user can return to the thumbnail page by tapping the 'Thumbnail' button on the gallery's Button Bar (and can return to the original embedding page by tapping the 'Close Gallery' button).
Please see the Screen Modes support section in the Gallery Tour for more information.

Is there a way to have it play as a slideshow immediately within the main page on cell phones?  I'm guessing it may have something to do with setting it at a fixed size.

Yes, it is not a matter of changing the gallery's size but rather setting specific configuration options.

You can choose to not use the Splash Page by setting showSplashPage="NEVER" (in  JuiceboxBuilder-Pro's 'Customize -> Splash Page' section). Using this setting, the thumbnail page would initially be displayed instead of the Splash Page on small screen devices. If you want to skip the thumbnail page and go straight to the first main image in the gallery, then set showSmallThumbsOnLoad="FALSE" ('Customize -> Thumbnails').

Alternatively, you could force the gallery to be displayed in Large Screen Mode (which, by default, does not use the Splash Page and displays the thumbnails and main images together, like in desktop browsers) on all devices and in all browsers by setting screenMode="LARGE" ('Customize -> General').

If you choose to continue to use the Splash Page, then you can configure it (for example to change the image displayed) using the Splash Page configuration options listed here.

I hope this helps to clarify things and gives you a few options to try.

  • Registered: 2018-12-26
  • Posts: 8

Re: Centering vertical images

Thank you yet again.  You've definitely given me a lot of information to work with.  My apologies that I'm not proficient in coding.  I'm learning as I go!

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

Re: Centering vertical images

Thank you yet again.

You're welcome!

You've definitely given me a lot of information to work with.

I hope you get on OK. Just give me a shout if you get stuck with anything.

My apologies that I'm not proficient in coding.  I'm learning as I go!

No worries at all! Just glad I could help.