DEVELOPER

Army Images Flickr Badge

Each day the Army's social media team posts the most impressive and dramatic pictures to the Army's Flickr photostream and this badge will always display the last five. You can generate your own Flickr badges at http://www.flickr.com/badge.gne* (requires a Yahoo login). This widget only requires that the user have JavaScript enabled.

Design Tip

You can customize the appearance of the badge by altering the CSS classes at the top of the embed code. You can even select the number of images by editing the script tag on line 25.

Demo:

www.flickr.com

Code:

The provided styles can be edited to fit your page design.

Copy and paste the following code into your HTML document:

<!-- Start of Flickr Badge -->
<style type="text/css">
/*
Images are wrapped in divs classed "flickr_badge_image" with ids "flickr_badge_imageX" where "X" is an integer specifying ordinal position. Below are some styles to get you started!
*/
#flickr_badge_uber_wrapper {text-align:center; width:189px;}
#flickr_www {display:block; padding:0 10px 0 10px !important; font: 11px Arial, Helvetica, Sans serif !important; color:#3993ff !important;}
#flickr_badge_wrapper {text-align: center; padding:6px;}
#flickr_badge_wrapper { text-align: center; background-color:#ffffff;border: solid 1px #3d3d3d}
.flickr_badge_image {width: inherit;  margin:0px 0px 0px 0px;}
.flickr_badge_image img { text-align: center; float: left; margin: 5px; border: 1px solid grey !important;}
#flickr_badge_source {clear: both; text-align:left; margin:10px 10px 0px 5px;}
#flickr_badge_icon {}
#flickr_badge_uber_wrapper a:hover,
#flickr_badge_uber_wrapper a:link,
#flickr_badge_uber_wrapper a:active,
#flickr_badge_uber_wrapper a:visited {text-decoration:none !important; background:inherit !important;color:#3993ff;}
#flickr_badge_source {padding:0 !important; font: 11px Arial, Helvetica, Sans serif !important; color:#666666 !important;}
</style>
<div id="flickr_badge_uber_wrapper">
	<a href="https://webarchive.library.unt.edu/web/20121030065404/http://www.flickr.com/" id="flickr_www">www.<strong style="color:#3993ff">flick<span style="color:#ff1c92">r</span></strong>.com</a>
	<div id="flickr_badge_wrapper">
		<script type="text/javascript" src="https://webarchive.library.unt.edu/web/20121030065404js_/http://www.flickr.com/badge_code_v2.gne?show_name=1&count=6&display=latest&size=s&layout=x&source=user&user=35703177%40N00"></script>
		<div id="flickr_badge_source">
			<a href="https://webarchive.library.unt.edu/web/20121030065404/http://www.flickr.com/photos/soldiersmediacenter/"><img id="flickr_badge_icon" alt="Army.mil's items" src="https://webarchive.library.unt.edu/web/20121030065404im_/http://usarmy.vo.llnwd.net/e2/rv5_images/create/flickr/flickr_banner.gif" /></a>
		</div>
	</div>
</div>
<!-- End of Flickr Badge -->

<!-- Used to correct ALT text information. Can probably use newer jQuery version.  -->
<script type="text/javascript" src="https://webarchive.library.unt.edu/web/20121030065404js_/http://usarmy.vo.llnwd.net/e2/rv5_js/3rdparty/jquery/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$(".flickr_badge_image a img").each(function(){
			var origTitle = $(this).attr("title");
			$(this).attr({ alt: "" + origTitle + "" });
		});
	});
</script>

www.army.mil/create - Create for Effect

Army Images Flickr Badge

Design Tip

Demo:

Code: