以前公開したオレオレGyazoのソースについて、jsとcssが公開されてないじゃないかとちょいちょい問い合わせが。
オレオレGyazoギャラリーのソース公開
別に非公開にしているつもりは無いので公開しておきますが、基本的にはWEBに落ちていたサンプル等がほとんどです。
多少弄ってはいますが。
一点注意点があるとすると、トリミングといいつつ、実際は画像読み込んでいて、表示だけトリミング表示しているという罠。
それもこれも自分用なので気にしていません。
というか、昨今の回線事情を鑑みるとあまり気にしなくても良い気もしますが。
それでも、数多く表示するとやっぱり重いので、表示する画像の数とかは調整する必要があるかと思います。
また、ページャのcssは手抜きなのでウィンドウサイズによっては若干画像とかぶってしまう場合もあるけど、併せて気にしていません。
結構面倒なので、特に個別に説明などはしませんが、使用している技術については、簡単に出てくるjQueryのサンプルの組み合わせです。
便利な奴だと思うわホント。
もっと身につけたいとは思うけど、今の仕事で使わない技術なのであまり身につかないという。
とりあえず以下はソースとCSS。気になる人はお好きにどうぞ。
gallery.js
/*=================================*/
/* 画像の真ん中トリミング */
/*=================================*/
$(function( ) {
$(".thumb img").on("load",function(){
var iw, ih;
var cw = 200; /*トリミング後の横幅*/
var ch = 200; /*トリミング後の縦幅*/
iw = ($(this).width() - cw) / 2;
ih = ($(this).height() - ch) / 2;
$(this).css("top", "-"+ih+"px");
$(this).css("left", "-"+iw+"px");
});
});
/*=================================*/
/* アップ日のスライドイン */
/*=================================*/
(function($){
$(function() {
$('.thumb').hover(function(){
$(this).find('.uploadDate').slideToggle("normal");
});
});
})(jQuery);
gallery.css
.canvas {
width:100%;
}
#gallery {
text-align : center;
}
.thumb{
border : 2px solid #aaa;
display : inline-block;
width : 180px; /*トリミング後の横幅 */
height : 180px; /*トリミング後の縦幅 */
overflow : hidden; /* はみ出した部分は表示しない */
position : relative;
z-index : 1;
margin : 0.5em;
border-radius : 10px; /* 角丸 */
}
.thumb img{
float:left;
position:absolute;
}
#gallery .uploadDate {
position: absolute; /* 親領域に対して絶対指定 */
left : 0;
top : 0;
width : 180px; /* 画像の幅と合わせている */
display : none; /* 最初は非表示にしておく */
color : #fff; /* 文字色 */
box-sizing : border-box; /* 内容領域＋ボーダー領域 */
padding : 12px 12px; /* 表示位置調整 */
z-index : 10; /* 画像より手前に設定する */
border-radius : 10px 10px 0px 0px;/* 角丸 */
background-color: rgba(0,0,0,0.4); /* 背景を半透明に。古いブラウザは知らない */
font-family : あんずもじ; /* あんず文字が好きなので */
text-align : center;
}
/* ページャ関連 */
#pagerContainer {
position:absolute;
top : 84px;
left:0px;
padding : 4px 0;
overflow : hidden;
}
.pager{
position:relative;
top : 0;
left:0;
list-style: none;
margin : 0;
padding : 0;
}
.pager li{
text-align : center;
}
.pager li span {
border:1px solid #CECECE;
margin: 3px;
padding:3px 7px;
display: block;
color: #666666;
background: #ffa500;
width : 48px;
height : 48px;
font-size: 18pt;
text-align:center;
line-height: 48px;
}
.pager li a {
border:1px solid #CECECE;
margin: 3px;
padding:3px 7px;
display: block;
text-decoration:none;
color: #666666;
background: #fff;
width : 48px;
height : 48px;
font-size: 18pt;
text-align:center;
line-height: 48px;
}
.pager li.active a,
.pager li a:hover{
border:solid 1px #666666;
color: #FFFFFF;
background: #3399FF;
}
/* clearfix */
.clearfix:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
.clearfix {
min-height: 1px;
}
* html .clearfix {
height: 1px;
/*¥*//*/
height: auto;
overflow: hidden;
/**/
}
