playing, by Denise

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