オレオレGyazoのjsとcssについて

以前公開したオレオレ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;
	/**/
}
  • このエントリーをはてなブックマークに追加

関連記事

覚書 PHP EXIF関数

php.ini の Extention の設定を変更する必要がある。 具体的には php_ex

記事を読む

オレオレGyazoギャラリーのソース公開

おれおれGyazo用にギャラリーページを作ったのでその解説っぽいのを。 PHPは素人なので、まだ無

記事を読む

WindowsPowerShellについてのメモ#1

最近使う機会が多いのでメモしておく。 google検索しても一発で引っ掛けづらい物も含めてメモ

記事を読む

BF4サーバーを解約する

もうやらなくなって久しいBF4。 GameServerでサーバが借り

WindowsPowerShellについてのメモ#1

最近使う機会が多いのでメモしておく。 google検索しても一発

7/26 大王崎ジギング

いつものメンバーで大王崎までジギングへ行って来ました。 今回はとても

オレオレGyazoのjsとcssについて

以前公開したオレオレGyazoのソースについて、jsとcssが公開され

南港大橋でのアジング

超柔らかい月下美人70UL-Sを使っていたのだけど、どうしても掛けに行

→もっと見る

PAGE TOP ↑