Search:

Multimedia Gallery Home | Embedding

Each individual photo pages provide the simple HTML code to embed that image in your site in various sizes. But what if you want to show more than just one image? What if you want to embed an entire Collection on your site, or a specific Set of images, or even multiple Collections in one gallery? Not a problem. Just follow the instructions below to get the specific type of embed option you need, copy and paste the provided HTML code for your site, and you're all set.

Note: We currently provide the specific to the type of gallery you want to embed. The most popular option for embedding the gallery is using the path as the source file for an <iframe> tag. You can however link to the specific path if you wish. Future embedding methods will be looked at.

Thumb Pop Gallery (for Photos or Videos)

This is how a Thumb Pop gallery would look on your site. You can change the height and width options as needed (the current view is simply meant as proof of concept).

This example is specific to the "Natural Hazards" collection. If you would like to have a different gallery collection simply replace the Natural Hazards in the HTML code with another existing collection, set, tag, discipline, program, cost center name, or search.

The example above is for displaying a Photo Collection. If you want to display something other than a Photo Collection, you will need to use the appropriate directory name in place of the red, underlined example below in the HTML. Listed are the directory names you should use:

Photo Collections = collections

Photo Sets = sets

Photo Tag = tags

Discipline photo galleries = disciplines

Program photo galleries = programs

Cost Center photo galleries = costcenters

Photo search results = search

Video Collections = collections

Video Tag = tags

Video search results = search

Displaying Multiple Galleries
If you want to display multiple collections, sets, disciplines, programs, or cost centers, then place the "~" character between the various groups in the HTML code where labeled in black, underline. Please note that multiple tags galleries are currently not available.

Changing Number of Images:
If you want to manipulate the number of images displayed per page, add "/20" (for example) to the end of the URLs below. The default is 9 images.
Example: http://gallery.usgs.gov/photo_shares/thumbs/collections/Natural Hazards/1/20

For Videos:
The same rules above apply for videos, however you need to change the "photo_shares" portions of the URLs in the code to "video_shares".


<iframe id="thumbpop_photos" name="thumbpop_photos" height="400" width="600" frameborder="0" scrolling="auto" title="Natural Hazards Collection" src="http://gallery.usgs.gov/photo_shares/thumbs/collections/Natural Hazards/1">[This content is contained within an inline frame. You can also <a href="http://gallery.usgs.gov/photo_shares/thumbs/collections/Natural Hazards/1">access it directly</a>.]</iframe>

List View Gallery (for Photos or Videos)

This is how a List View gallery would look on your site. You can change the height and width options as needed (the current view is simply meant as proof of concept).

All of the same options available in the thumb pop gallery are available for customizing the list view gallery. The only difference in this case is changing "thumbs" to "list" within the source file reference.

Example:

<iframe id="listview_photos" name="listview_photos" height="400" width="700" frameborder="0" scrolling="auto" title="Natural Hazards Collection" src="http://gallery.usgs.gov/photo_shares/list/collections/Natural Hazards/1">[This content is contained within an inline frame. You can also <a href="http://gallery.usgs.gov/photo_shares/list/collections/Natural Hazards/1">access it directly</a>.]</iframe>

Photo Slideshow

Below is an example of a photo slideshow icon, which opens up a new window, that would appear on your page. By putting the following HTML code on your page, you can create a link to open a small slideshow of images based upon a existing collection, set, tag, discipline, program, or cost center.

If you want to display multiple collections, sets, disciplines, programs, or cost centers, then place the "~" character between the various groups in the HTML code where labeled in black, underline. Please note that multiple tags slideshows are currently not available.

Working example:

<script type="text/javascript" src="http://gallery.usgs.gov/share/slideshow.js" language="javascript"></script>

    <a href="javascript:void(0);" onClick="MM_openBrWindow('http://gallery.usgs.gov/slideshow.asp?coll=Animals','slideshow','scrollbars=yes,resizable=yes,width=520,height=480');"><img src="http://gallery.usgs.gov/images/icons/slideshow.gif" alt="Slideshow" title="View the Animals photo collection as a slideshow" width="16" height="16" border="0"></a>

Video Player with Playlist

Below is an example of a video player icon would appear on your page. By putting the following HTML code on your page, you can create a link to open a small video player with a playlist of items defaulted to a specific video collection. Choose the video collection group you want to have appear as the default and simply replace the black, underlined sections of the HTML code below with that title.

Working example:


        <script type="text/javascript" src="http://gallery.usgs.gov/share/video.js" language="javascript"></script>

      <a href="javascript:void(0);" onClick="MM_openBrWindow('http://gallery.usgs.gov/videoshow/?coll=Biology','videoplayer','scrollbars=no,resizable=no,width=683,height=335')"><img src="http://gallery.usgs.gov/images/icons/chapter_player.jpg" alt="Chapter player" width="48" height="24" border="0" title="View Biology videos as a chapter player"></a>

Embedding individual images

If you find a specific image that you would like to embed on your own Web site, you will find the HTML code underneath the photo on any specific photo page (example below). Clicking the "Embed this image" link underneath the photo will give you the options of getting the code for embedding a thumbnail, medium, or large size image.

example screenshot of what the embed image option looks like.

Third Party Options

Disclaimer: The options listed below DO NOT consitute an endorsement of any specific product, service, or company/organization. The options listed below are provided as a possible methods to help further spread the usage of USGS video/imagery to the public using the provided MediaRSS files.

Accessibility FOIA Privacy Policies and Notices

U.S. Department of the Interior | U.S. Geological Survey
URL: http://www.usgs.gov/photo_shares/embedding.asp
Page Contact Information: Image Gallery Webmaster
Page Last Modified: Wednesday, October 14, 2009