<link rel="Stylesheet" type="text/css" href="ugallery.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.ugallery-min.js"></script>

<div class="ugallery" id="my_gallery">
  <a href="photo1.jpg" title="something about photo1"></a>
  <a href="photo2.jpg" title="something about photo2"></a>
  <a href="photo3.jpg" title="something about photo3"></a>
</div>

#my_gallery {
  width: 600px;
  height: 350px;
  font: 13px Verdana;
  color: #fff;
}

$('#my_gallery').ugallery();

// animation options:

fade_duration         : 1200   // image fade duration (ms)

// controls' options:

forward_btn           : "right.gif" // path to images
backward_btn          : "left.gif"
controls_vpos         : 150    // offset from top (px)
animate_controls      : true   // fade controls on mouse hover
control_fade_duration : 300    // controls fade duration (ms)
controls_fade_from    : 0.2    // initial opacity
controls_fade_to      : 0.7    // highlight opacity

// autoplay options:

player                : true   // enable autoplay, show play button
play_btn              : "play.png" // path to images
stop_btn              : "stop.png"
play_vpos             : -1     // play button voffset (px)
                               // -1 means controls_vpos - 5px,
                               // modify this value if you use buttons
                               // with non standard heights
                               // (difference betweeen forward/backward
                               // buttons and play/pause is not 10px)
hide_controls         : true   // hide forward/backward buttons during autoplay
show_duration         : 5000   // delay before showing a next image
autostart             : false  // autostart player
hide_playbtn_on_mout  : true   // hide play/pause buttons on mouse out

// descriptions:

desc_pos              : "top"  // description's DIV position
                               // [top | bottom | top-inside | bottom-inside]
desc_bg_color         : "#000",// bg color for   [top-inside | bottom-inside]
desc_bg_opacity       : 0.6,   // bg opacity for [top-inside | bottom-inside]
desc_align            : "right"// text-align [left | center | right]
desc_height           : 20     // description's DIV height (px)
desc_custom_class     : null   // user defined CSS class for description's DIV desc_custom_callback  : null   // user defined function fired after showing
                               // each description, use it if you need to do
                               // something on each showing, e.g. if you use
                               // cufón, like here on site. The function
                               // received an index of the showed image
                               // as a parameter

// counter:

counter_enabled       : false  // show counter
counter_pos           : "top"  // counter's DIV position
                               // [top | bottom | top-inside | bottom-inside]
counter_align         : "left" // text-align [left | center | right]
counter_custom_class  : null   // user defined CSS class for counter's DIV
counter_custom_callback : null // user defined function fired after showing
                               // each image
counter_height        : -1     // counter's DIV height, -1 means the same
                               // height as a value of desc_height

$('#my_gallery').ugallery({
  forward_btn           : "images/right.gif",
  backward_btn          : "images/left.gif",
  controls_vpos         : 20,
  control_fade_duration : 400,
  controls_fade_from    : 0.3,
  controls_fade_to      : 0.6,
  fade_duration         : 800,
  player                : false});