Skip to content

Instantly share code, notes, and snippets.

@pafnuty

pafnuty/[dlefaq]_img_w_caption.html

Created December 30, 2012 16:18
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pafnuty/4413555 to your computer and use it in GitHub Desktop.
Save pafnuty/4413555 to your computer and use it in GitHub Desktop.
Download ZIP
Картика с описанием
Raw
[dlefaq]_img_w_caption.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Картинка с описанием</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
jQuery(document).ready(function($) {
$('img').each(function(e) {
$(this).wrap('<div class="wrap-description" />')
$(this).after('<p class="description">'+$(this).attr('alt')+'</p>')
});
});
</script>
<style>
body {
width: 600px;
margin: 0 auto;
}
img {
display: block;
}
</style>
</head>
<body>
<img src="http://lorempixel.com/600/200" alt="Lorem ipsum dolor.">
<img src="http://lorempixel.com/600/200" alt="Vel asperiores tempora.">
<img src="http://lorempixel.com/600/200" alt="Dolorum recusandae consequuntur!">
<img src="http://lorempixel.com/600/200" alt="Laboriosam deleniti vel?">
<img src="http://lorempixel.com/600/200" alt="Natus tempora fugiat.">
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment