Center

This is one of the magical parts of DhoniShow. center preloads images and takes control of the dimensions of your gallery. There are just a few, but therefore very important options:

center-elements_true

This option is set true by default. It centers smaller images relatively to the larger images.

Preview

Source

<div class="dhonishow center-elements_true">
  <img src="earo-lato.jpg" alt="Ear-O-tation Lato" />
  <img src="benjamin.jpg" alt="Benjamin" />
  <img src="pinks_not_red.jpg" alt="Pink's not red" />
  <img src="pasta.jpg" alt="Pasta für Pawel" />
  <img src="cordless.jpg" alt="Cordless" />
</div>

center-elements_false

Disables the centering of images and aligns images to the top and left or right side, depending on the text-align css property of the element.

Preview

Source

<div class="dhonishow center-elements_false">
  <img src="benjamin.jpg" alt="Benjamin" />
  <img src="earo-lato.jpg" alt="Ear-O-tation Lato" />
  <img src="pinks_not_red.jpg" alt="Pink's not red" />
  <img src="pasta.jpg" alt="Pasta für Pawel" />
  <img src="cordless.jpg" alt="Cordless" />
</div>

center-width_*

If you would like to set the width of your gallery to a fixed value, just replace the asterisk with your desired pixel value. In the following example the gallery width is fixed to 300 pixels center-width_300.

Preview

Source

<div class="dhonishow center-width_300">
  <img src="pinks_not_red.jpg" alt="Pink's not red" />
  <img src="earo-lato.jpg" alt="Ear-O-tation Lato" />
  <img src="benjamin.jpg" alt="Benjamin" />
  <img src="pasta.jpg" alt="Pasta für Pawel" />
  <img src="cordless.jpg" alt="Cordless" />
</div>

center-height_*

Exactly the same functionality as enter-width_*, only for height.

Preview

Source

<div class="dhonishow center-height_500">
  <img src="pasta.jpg" alt="Pasta für Pawel" />
  <img src="earo-lato.jpg" alt="Ear-O-tation Lato" />
  <img src="benjamin.jpg" alt="Benjamin" />
  <img src="pinks_not_red.jpg" alt="Pink's not red" />
  <img src="cordless.jpg" alt="Cordless" />
</div>