• Facebookページリンク集 ソーシャルブックマーク 520PX facebookmark
  (tags: facebook gallery)

• Fresh Examples of HTML5 Websites | Inspiration
  (tags: html5 webdesign css3)
• Photoshop VIP ☞ Photoshopで使えるデザイン素材を大量に無料公開しているGraphics Fuel
  (tags: photoshop material)
• 15 Free WordPress Themes with a Responsive Layout
  (tags: wordpress)

仕事で作ったのでメモ3。

ギャラリーでよくあるサムネイル画像にhover時のアクションを追加。
hoverしたら写真のタイトルやキャプションを表示させる。

＜JS＞

$(document).ready(function(){
	var anime_time = 500;

	$('.thumb li a').mouseover(function(){
		$(this).children('.caption_top').animate( {  'top': '0' } , { duration: anime_time });
		$(this).children('.caption_bottom').animate( {  'bottom': '0' } , { duration: anime_time });
	})

	$('.thumb li a').mouseout(function() {
		$(this).children('.caption_top').animate( {  'top': '-50px' } , { duration: anime_time });
		$(this).children('.caption_bottom').animate( {  'bottom': '-50px' } , { duration: anime_time });
	});

});

＜HTML＞

 <ul class="thumb">
 <li>
 <a href="javascript:void(0)">
 <img src="images/alpha.gif" width="200" height="150" alt="" class="AlphaImg" />
 <img src="images/thumb_img1.jpg" width="200" height="150" />
 <span class="caption_top">タイトルなど</span><span class="caption_bottom">キャプションなど</span></a>
 </li>

 <li>
 <a href="javascript:void(0)">
 <img src="images/alpha.gif" width="200" height="150" alt="" class="AlphaImg" />
 <img src="images/thumb_img2.jpg" width="200" height="150" />
 <span class="caption_top">タイトルなど</span><span class="caption_bottom">キャプションなど</span></a>
 </li>

 <li>
 <a href="javascript:void(0)">
 <img src="images/alpha.gif" width="200" height="150" alt="" class="AlphaImg" />
 <img src="images/thumb_img3.jpg" width="200" height="150" />
 <span class="caption_top">タイトルなど</span><span class="caption_bottom">キャプションなど</span></a>
 </li>

 <li class="last">
 <a href="javascript:void(0)">
 <img src="images/alpha.gif" width="200" height="150" alt="" class="AlphaImg" />
 <img src="images/thumb_img4.jpg" width="200" height="150" />
 <span class="caption_top">タイトルなど</span><span class="caption_bottom">キャプションなど</span></a>
 </li>
</ul>

＜CSS＞

.thumb {
	width: 830px;
	height: 150px;
	position: relative;
}

.thumb li {
	display:block;
	float:left;
	width: 200px;
	height:150px;
	overflow:hidden;
	margin-right:10px;
	position: relative;
}
.thumb li.last { margin-right:0; }

.thumb .AlphaImg {
	position: absolute;
	top :0;
	left:0;
	z-index:9999 !important;
}

.caption_top {
	display:block;
	width: 200px;
	height:50px;
	position: absolute;
	top:-50px;
	left: 0;
	z-index:1 !important;
	background:#fff;
	filter:alpha(opacity=0.7);
	-ms-filter:"alpha(opacity=0.7)";
	-moz-opacity:0.7;
	-khtml-opacity:0.7;
	opacity:0.7;
	color:#333;
}

.caption_bottom {
	display:block;
	width: 200px;
	height:50px;
	position: absolute;
	bottom:-50px;
	left: 0;
	z-index:1 !important;
	background:#fff;
	filter:alpha(opacity=0.7);
	-ms-filter:"alpha(opacity=0.7)";
	-moz-opacity:0.7;
	-khtml-opacity:0.7;
	opacity:0.7;
	color:#333;
}

クリックでギャラリーでよくあるライトボックスなどを出すことも可能。

以上自分メモ。

• 50 Social Media Bookmarking Icon Sets – 2011 Edition
  (tags: social icons icon free)
• Weekly Web Design and Development Inspiration – N.103
  (tags: websites webdesign)
• jQueryで作るクリエイティブなタイムライン「jQuery Timelinr」 | DesignDevelop
  (tags: jquery)
• フィードバック用のフォームを簡単にブログに設置できるWordPressプラグイン・Usernoiseが便利そうだったので日本語の翻訳ファイル作った – かちびと.net
  (tags: wordpress plugin)
• Showcase of Sketches and Doodles in Web Design | Vandelay Design Blog
  イラスト感たっぷり
  (tags: webdesign design inspiration)
• 40 Creatively Designed Invitation Cards – tripwire magazine
  (tags: inspiration design illustration)
• 地味に使えるCSS小技のメモ&サンプル集 – かちびと.net
  (tags: css tips webdesign hack)
• 30 Predominant Magazine-Themed Websites
  (tags: inspiration websites webdesign)

• 「いいね！」するとコンテンツを見る事が出来るファンゲート対応のFacebookページをWordPressで作る手順 – かちびと.net
  (tags: facebook tips)
• Transmission Inc.
  ごちゃごちゃ
  (tags: webdesign websites layout)
• Outbox Ativism
  すっきり
  (tags: webdesign websites black white)
• Photoshop VIP ☞ テキスト入力するだけでオシャレに魅せるフリーフォント厳選20個まとめ
  (tags: fonts)
• 設定も簡単・軽量(5KB)・シンプルな、Webサイトのフォントサイズを変更できるjQueryプラグイン・Font sizer – かちびと.net
  (tags: jquery)

仕事で作ったのでメモ2。

前回のjQuery:自動スライドにプラスして開閉パネルを設置。
初期読み込み時に自動で開き、一定時間経ったら閉じる。
その後はパネルのタブ部分をクリックで開閉する。

＜JS＞

/*  ================================================================================
Slider
================================================================================  */
  $(window).load(function() {
   //Init
    var currentImgNum = 1;
    var setTimeN;
    var moveFlag = false;
    //
    var imgNum = 4;					//画像の数
    var animSpeed = 1000;			//画像が切り替わるスピード
    var pauseTime = 5000;			//画像が切り替わるまでの時間
    var imgPath = "images/slide/";	//画像までのパス

    //start
    $("#slider").css("background-image", "none");
    $("#slideImgBox").css("opacity", "0");
		$("#slideImgBox img").css("display", "block");
		$("#slideImgBox").animate({ opacity:1 } , animSpeed ,
			function() {
			setTimeN = setTimeout(mainSliderImgMove , pauseTime);
			moveFlag = true;
			currentImgNum++;
		}
	);

    //
    //画像スライド
     function mainSliderImgMove() {
     if(moveFlag == false) {} else {
     moveFlag = false;
	//Fadein/Fadeout
		$("#slideImgBox img").animate({ opacity:0 } , 100 ,
                function() {
                    $("#slideImgBox img").attr("src", imgPath + currentImgNum +".jpg");
                        mainSliderNaviCurrent(currentImgNum);
                        $("#slideImgBox img").animate({ opacity:1 } , animSpeed ,
                            function() {
                                setTimeN = setTimeout(mainSliderImgMove , pauseTime);
								if(currentImgNum == 4) currentImgNum = 1;
								else currentImgNum++;
                                moveFlag = true;
                        });
                	}
            );
        }
        //
    }

    //ナビ設定
	$(".slider_control li a").click(
		function (){
			if(moveFlag == false) return;
			clearTimeout(setTimeN);
			var No = $(this).attr("rel");
			currentImgNum = No;
			mainSliderImgMove(No);
			return;
	})

    //スライドナビ
    function mainSliderNaviCurrent(num) {
		$('.slider_control li a').each(function (i) {
			i++;
			if (i == num) {
				$select_control = "#control" + num;
				$($select_control).addClass("active");
			} else {
				$select_control = "#control" + i;
				$($select_control).removeClass("active");
			}
		});
    }
	//
  });

//===========================================//
// fadePanel
//===========================================//
$(document).ready(function(){
	$("a.fadePanelBTN").click(
	function (){
		var flag = $(this).attr("rel");
		fadePanelMove(flag);
	})
	//
	function fadePanelMove(flag) {
		if(flag == 1) {
			$("a.fadePanelBTN").attr("rel", 2);
			$("img.fadePanelImg").attr("src", 'images/top_slider_open.png' );
			$("#fadePanel").animate({ bottom : -84 } , 300 );
		} else {
			$("a.fadePanelBTN").attr("rel", 1);
			$("img.fadePanelImg").attr("src", 'images/top_slider_close.png' );
			$("#fadePanel").animate({ bottom : 0 } , 300 );
		}
		return false;
	}

	//Auto Open
	setTimeout(function() {
			fadePanelMove(2);
	},500);
	//Auto Close
	setTimeout(function() {
			var flag = $("a.fadePanelBTN").attr("rel");
			if(flag == 2) fadePanelMove(2);
	},5000);
	//
})

＜HTML＞

    <!-- slider//-->
    <div id="slider">
    <div id="slideImgBox"><img src="images/slide/1.jpg" width="750" height="300" /></div>

        <ul class="slider_control">
        <li><a class="active" id="control1" rel="1">1</a></li>
        <li><a id="control2" rel="2">2</a></li>
        <li><a id="control3" rel="3">3</a></li>
        <li><a id="control4" rel="4">4</a></li>
        </ul>

        <!-- fadePanel/ -->
        <div id="fadePanelBox">
            <div id="fadePanel">
            <a href="javascript:void(0);" class="fadePanelBTN" rel="1"><img src="images/top_slider_open.png" class="fadePanelImg" alt="パネルオープン" /></a>
            </div>
        </div><!-- /fadePanel -->

    </div>
    <!-- //slider-->

＜CSS＞

#slider {
	position: relative;
	width: 750px;
	height: 341px;
	background: url(../images/loader.gif) no-repeat 50% 50%;
	margin: 30px auto 0 auto;
	text-align:center;
}

#slideImgBox {
	position: absolute;
	left: 0;
	top: 0;
	z-index:9998;
}

.slider_control {
	width:116px;
	height: 21px;
	position: absolute;
	left: 333px;
	bottom: 0;
	text-align:center;
}
.slider_control li {
	display: block;
	float:left;
	width: 21px;
	height: 21px;
	margin-right:8px;
}
.slider_control li a {
	display: block;
	float:left;
	width: 21px;
	height: 21px;
	background:#000 url(../images/btn_circle.gif) no-repeat 0 -21px;
	text-indent: -9999px;
	border: 0;
}
.slider_control li a:hover {
	filter:alpha(opacity=0.7);
	ms-filter:"alpha(opacity=0.7)";
	-moz-opacity:0.7;
	-khtml-opacity:0.7;
	opacity:0.7;
}
.slider_control li a.active {
	background-position: 0 0;
}

/* fadePanel*/
#fadePanelBox {
	width: 750px;
	height:300px;
	overflow:hidden;
	position:absolute;
	top:0;
	left:0;
	overflow:hidden;
	z-index:9999;
}
#fadePanel {
	width: 750px;
	height:110px;
	position:absolute;
	bottom:-84px;
	left:0;
	background:url(../images/top_slider.png) no-repeat 50% 0;
	text-align:right;
}

#fadePanel a.fadePanelBTN {
	display:block;
	width:169px;
	height:23px;
	position:absolute;
	top:0;
	right:20px;
}

スライドの中身を空っぽにしているけど、中身もちゃんと入れられる。
リンクをつけることも可能。

タブ画像、背景画像をpngにしているけど今回はIE6用の設定は省いています。
jpgもしくはgif画像でopacityを下げるというのでもありかな。

以上自分メモ。