playing, by Denise

Tuesday, November 11, 2014

HTML5 slideshow from SmugMug gallery

An experiment, HTML5 slideshow from my Autumn colors 2014 gallery (on SmugMug).

If you're looking for the code to embed a slideshow from your own SmugMug gallery on an external site, see

Friday, April 1, 2011


A little bit of play...

Earlier today I saw a request by someone to show a photo gallery as thumbs where hovering over a thumb would pop up a larger version of the photo. Curiosity grabbed me, and I went looking for a way to do this. I found a sample page at That page included a link to a write-up, which of course I didn't discover until I'd looked at the code behind the page.

The result of my play is shown below. Hover over a thumb to see a (slightly) larger version.

Saturday, January 15, 2011

Embed a buy link with your photo

SmugMug has recently added the ability to link directly to the shopping cart, allowing viewers to click from someplace outside of smug directly to the shopping cart.

Here's an example - click the photo (or the Buy this photo entry under the photo) to place the photo in the cart and allow selection of the media:

click to buy takes viewer directly to shopping cart

Or, in text:
Click here to buy this photo.

Click here to purchase a selection of photos from this gallery.
The buy link can be found by clicking Share... Get a link. To pick up a buy link for a specific photo, choose the Buy link on the Photo Links tab. To allow the viewer to select multiple photos from the gallery (in the shopping cart), pick up the link from the Batch buy entry on the Gallery Links tab.

Friday, January 7, 2011

Change size on mouseover

Hover over the photos in this post and they will change size from smaller to larger. Move the mouse again and the photo will return to the original size.

The html used to create the changing images on mouseover can be found on the page, in the file titled changeSizeOnMouseover.txt.


Valley of Fire State Park

Wednesday, November 3, 2010

Click to lightbox

Someone asked if it is possible to embed a photo in a blog where a click will open SmugMug's lightbox. Click on the photo below to jump to the photo in the lightbox.

The photo was shown with a combination of a href= and img src= HTML clauses.

The values to show the photo are pulled from the Share... Get a link... page in SmugMug. Position on the photo you want to use, then click Share... Get a link. For the a href= value, select the Lightbox URL from the Gallery Links tab. For the img src= value, select one of the links from the Photo Links tab.

Here's a sample of the HTML, with spaces inserted in the html to prevent blogger from running the html as opposed to showing the code:
< a href="" >
< img src=""/ >
< /a >
If you use this HTML as an example, be sure to remove the spaces.

Wednesday, January 27, 2010

Stacking, vertical and horizontal

I've been asked how to place photos in a blog post without large spaces between the photos. This post is an example of two photos placed vertically followed by two placed horizontally.

A single photo is shown using a combination of an a href= statement and an img src= statement. That both displays the photo and allows the viewer to click to the photo.

There is a new line between the html displaying the photos vertically. New line = I clicked the enter key while typing the code to jump to the next line.

In the second example, with the photos shown horizontally, there is no new line between the two sets of code. One a href= and img src= pair is immediately followed by the second.


bikes in snowbikes in snow

The html used to create the stacked images in this post can be found on the page, in the file titled stackedPhotos.txt.

Thursday, January 21, 2010

Mouseover photo change

Hover over the photo in this post and it will change to a different image - from snow-covered branches against a bright blue sky to snow-covered groundcover with bits of green emerging amid bright white snow.

The html used to create the changing images on mouseover can be found on the page, in the file titled changePhotoOnMouseover.txt.

original photo, snow and sky