Align

Align is the theming engine of dhonishow. Options starts with align-alt to control the position of the image caption. align-pagingbuttons is for changing the alignment of the paging numbers and buttons. To get the best user experience, both option types can be combined.

align-alt_inside-top

Preview

Source

<div class="dhonishow align-alt_inside-top">
  <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>

align-alt_inside-top-right

Preview

Source

<div class="dhonishow align-alt_inside-top-right">
  <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>

align-alt_inside-bottom

Preview

Source

<div class="dhonishow align-alt_inside-bottom">
  <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>

align-alt_inside-bottom-right

Preview

Source

<div class="dhonishow align-alt_inside-bottom-right">
  <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>

align-alt_bottom

Preview

Source

<div class="dhonishow align-alt_inside-bottom-right">
  <img src="cordless.jpg" alt="Cordless" />
  <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" />
</div>

align-alt_bottom-right

Preview

Source

<div class="dhonishow align-alt_bottom-right">
  <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>

align-pagingbuttons_inside-top

Preview

Source

<div class="dhonishow align-alt_inside-top">
  <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>

align-pagingbuttons_inside-top-right

Preview

Source

<div class="dhonishow align-alt_inside-top-right">
  <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>

align-pagingbuttons_inside-middle

Preview

Source

<div class="dhonishow align-pagingbuttons_inside-middle">
  <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>

align-pagingbuttons_bottom

Preview

Source

<div class="dhonishow align-pagingbuttons_bottom">
  <img src="cordless.jpg" alt="Cordless" />
  <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" />
</div>

align-pagingbuttons_bottom-right

Preview

Source

<div class="dhonishow align-alt_bottom-right">
  <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>