转自懶懶喵日記
某網友問
您好，您網站上的圖片+圖說的樣式很好看，可以請教一下，是怎樣做出來的呢？
是不是有plugin可使用？
答：沒有 plugin 可用，這是為了分享我家天秘近況，使用 JavaScript + css 小技巧弄出來的玩意兒，以下為代碼
JavaScript
(function($) {
$.fn.figure = function() {
$(this).each(function(i) {
var $self = $(this),
$img = $self.find(‘img’);
$html = $self.find(‘p.figure_html’),
width = $img.width(),
text = $html.length ? $html.remove().html() : $img.attr(‘alt’);
$self.width(width).append(‘<p class=”caption”><em class=”title”>Figure ‘+(++i)+‘</em>’+text+‘</p>’);
});
};
$(document).ready(function() {
$(‘div.figure’).figure();
});
})(jQuery);(function($) {
$.fn.figure = function() {
$(this).each(function(i) {
var $self = $(this),
$img = $self.find(\’img\’);
$html = $self.find(\’p.figure_html\’),
width = $img.width(),
text = $html.length ? $html.remove().html() : $img.attr(\’alt\’);
$self.width(width).append(\’<p class=”caption”><em class=”title”>Figure \’+(++i)+\’</em>\’+text+\’</p>\’);
});
};
$(document).ready(function() {
$(\’div.figure\’).figure();
});
})(jQuery);
以上代碼需存為 .js 檔，搭配 jQuery 一同服用。
在網頁的 <head> 範圍內或 </body> 之前加入讀取 JavaScript 的代碼
<script type=”text/javascript” src=”http://your.domain.com/path/to/jquery.js”></script>
<script type=”text/javascript” src=”http://your.domain.com/path/to/figure.js”></script><script type=”text/javascript” src=”http://your.domain.com/path/to/jquery.js”></script>
<script type=”text/javascript” src=”http://your.domain.com/path/to/figure.js”></script>
CSS
.figure {
margin: 0 0 1.5em;
color: black;
background: #fee;
border: 1px solid #edd;
padding: 5px;
}
.figure .figure_html {
display: none;
}
.figure img,
.figure .caption,
.figure .figure_html {
margin: 0;
padding: 0;
}
.figure .title {
font-weight: bold;
padding-right: 2px
}
.figure .title:after {
content: ‘:’
}.figure {
margin: 0 0 1.5em;
color: black;
background: #fee;
border: 1px solid #edd;
padding: 5px;
}
.figure .figure_html {
display: none;
}
.figure img,
.figure .caption,
.figure .figure_html {
margin: 0;
padding: 0;
}
.figure .title {
font-weight: bold;
padding-right: 2px
}
.figure .title:after {
content: \’:\’
}
使用方式：
<!–無 HTML 的圖片說明–>
<div class=”figure”>
<img src=”your_photo.png” alt=”圖片說明” />
</div>
<!–使用 HTML 的圖片說明–>
<div class=”figure”>
<img src=”your_photo.png” alt=”圖片說明” />
<p class=”figure_html”>使用 <acronym title=”Hypertext Markup Language”>HTML</acronym> 的圖片說明</p>
</div><!–無 HTML 的圖片說明–>
<div class=”figure”>
<img src=”your_photo.png” alt=”圖片說明” />
</div>
<!–使用 HTML 的圖片說明–>
<div class=”figure”>
<img src=”your_photo.png” alt=”圖片說明” />
<p class=”figure_html”>使用 <acronym title=”Hypertext Markup Language”>HTML</acronym> 的圖片說明</p>
</div>
參考文件：If I Told You You Had a Beautiful Figure…
Comments
No Responses to “圖片+說明”
Leave a Reply