Gallery In Page

This example illustrates the 'Gallery In Page' slideshow preset configuration.

Configuration Settings

The following highslide configuration options are overridden by this preset:

  • Outline = no-border
  • Transitions = Fade, crossfade
  • Restore cursor = null
  • Restore title = 'Click for next image'
  • Allow size reduction = Yes
  • Wrapper classname = in-page controls-in-heading
  • Use constraining box = Yes
  • Width = 600
  • Height = 400
  • TargetX = gallery-area
  • TargetY = gallery-area 10px
  • Caption = TITLE attribute from A HREF tag
  • Number position = Caption

Additional Settings

These settings were set specifically for this example and are not set by the configuration preset.

  • Credits = Hide
  • Repeat = Yes (Slideshow Preset parameter)

Special Configuration Requirements

Since this gallery opens at page load time, there are some special configuration requirements that must be met in order to successfully use this preset.

First, to indicate to Highslide where on the page you would like the gallery to appear, you must define an element on the page with an id of 'gallery-area'. This can be accomplished by creating a DIV or paragraph element  and assigning the id to it.  To do this, hit the enter key a couple of times to create several paragraphs. Then position the cursor on one of the blank lines and click on the 'Insert/Edit Attributes' plugin. See below.

example8

 

When the Insert/Edit Attributes dialog box appears, enter an id value of 'gallery-area'.

example9

Secondly, the Id parameter of the popup image in the first expander must be set to 'in-page-thumb1'. Also, the thumbnail of this expander needs to be hidden (in all the other examples, this is the visible expander). Set the class parameter of the thumbnail image to 'hidden-container'.

example10