We released an update to DM Albums™ yesterday which includes two new settings in the DM Albums™ Admin Panel: Transition Effect and Transition Time:

Transition Effect will change the transition between photos from SLIDE to FADE. In the slide setting (default), photos slide in from the left, which in the fade mode, one photo fades into the other.

Transition Speed is measured in milliseconds and adjusts how quickly this transition occurs; the default of 400 is a good place to start, but you can slow it down or speed it up if you’d like.

Posted in DM Albums, Latest News & Announcements, Usage | 16 Comments »

A few questions have come our way regarding the sizing and styling of DM Albums, which I thought I would answer here.

Sizing the Albums
As for sizing, DM Albums™ fills the area that it’s positioned in, meaning that it fills whatever space is available in the post. Some users prefer to have a fixed size that is perhaps smaller than that, or would like to have the album float to the left or right of their text. For that, we’ve added a div that surrounds the albums, which can be sized, positioned, and styled however you want. The div is assigned a css classname:

.dm-albums-galleria-container

Excellent tutorials and references on how to work with CSS can be found online, including at W3 Schools.

If you’d like to control the size of a specific album, we also have made available a height and width parameter for the DM Albums™ short tag:

[dmalbums path="/path/to/album/" width="400" height="300"]

Styling the Album
As of version 3.0, the style sheet that controls DM Albums™ is located at:
dm-albums/galleria/themes/classic/galleria.classic.css

Full control over the layout is given in that style sheet. For example, to change the color of the album and thumbnails from black to white, make the following changes to the classes .galleria-container and .galler-thumbnails .galleria-image:

.galleria-container {
    position: relative;
    overflow: hidden;
    background: #FFF;
}
.galleria-thumbnails .galleria-image {
    height: 40px;
    width: 60px;
    background: #000;
    margin: 0 5px 0 0;
    border: 1px solid #FFF;
    float: left;
    cursor: pointer;
}

To change the color/opacity of the captions, you can change the background and opacity/filter properties in the .galleria-caption class:

.galleria-caption
{
	position: absolute;
	width: 100%;
	bottom: 0px;
    left: 0px !important;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
    background: #000000;
    color: #dddddd;
    font: 11px helvetica,sans-serif !important;
    font-weight: normal !important;
    opacity: 0.55;
    z-index: 1;
    filter: alpha(opacity=55);
}

Posted in DM Albums, Usage | 5 Comments »