• Registered: 2018-07-14
  • Posts: 3

Topic: Want to show only first image from gallery

I am looking for a way to show the first image only from my gallery. I will use it as a link to show the gallery. I hope to be able to tell it to take the first image on the XML list and display it in a specific location on the web page.

I hope someone has any ideas on how to do this.

Thanks

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

Re: Want to show only first image from gallery

It sounds like your problem could be resolved by using the gallery's Splash Page.
The Splash Page is a placeholder for the gallery which is displayed by default on small screen devices when the gallery is embedded in a web page alongside other content (rather than displayed on a page of its own with dimensions of 100% x 100%, filling the browser window) and may may too small to be usable.
The Splash Page is essentially an image link for the gallery which displays an image (by default, the first image in the gallery) and some text.
When the user clicks or taps the Splash Page, the gallery is expanded to fill the browser window (giving the images more space to be displayed).
More information about the Splash Page can be found in the Screen Modes section of the Gallery Tour.
Here is a demo gallery featuring the Splash Page.

To always use the Splash Page in your gallery (not just when the gallery is displayed on small screen devices), set showSplashPage="ALWAYS" (in JuiceboxBuilder-Pro's 'Customize -> Splash Page' section).
Then, just embed the gallery in your web page following the instructions in the Juicebox Embedding Guide.
The Splash Page will be displayed in your web page at the gallery dimensions (galleryWidth and galleryHeight) and, when the user clicks or taps the Splash Page, the gallery will be expanded to fill the browser window.

You can configure the Splash Page further using the available Splash Page Options.

Otherwise, you could just upload the entire gallery folder to your web server and create a manual image link to your gallery's 'index.html' file inside the gallery folder (which displays the gallery on a page of its own).
For example:

<a href="path_to_gallery_folder/index.html"><img src="path_to_gallery_folder/mages/image0001.jpg" width="600" height="400" alt="image" /></a>

I hope this helps.

3 Reply by Jawad (edited by Jawad 2022-07-05 11:32:19)

  • Registered: 2018-07-19
  • Posts: 1

Re: Want to show only first image from gallery

t12griffin wrote:

I am looking forward to D-Bal Max and for a way to show the first image only from my gallery. I will use it as a link to show the gallery. I hope to be able to tell it to take the first image on the XML list and display it in a specific location on the web page.

I hope someone has any ideas on how to do this.

Thanks

Hi Steven, which one of those two options is more robust was of accomplishing this btw?

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

Re: Want to show only first image from gallery

Both options (using the Splash Page and creating your own image link) are just as robust as each other (and both are valid HTML 5 options).

It's really just personal preference as to which option you choose to use.
The Splash Page option involves embedding the gallery into your web page (see here for details) but once this is done, you can configure the Splash Page (the image and text displayed) via the available Splash Page Options without the need for any further manual coding.

However, there's absolutely nothing wrong (in terms of design and/or code validity) with just manually creating a plain and simple image link to a gallery's 'index.html' page if that's what you'd rather do.

If you are still undecided, you could always try both approaches and see which one you prefer/which one works best for you within your own website.