ホーム > jQuery

jQuery UI と Bootstrap を一緒に使う

Bootstrap を使っている時に jQuery UI のテーマが合わないのが問題だったけど jQuery UI Bootstrap を使えば同じ見た目にする事ができる。

http://addyosmani.github.com/jquery-ui-bootstrap/

jQuery:Gallery Thumbnail Caption

仕事で作ったのでメモ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;
}

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

以上自分メモ。

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を下げるというのでもありかな。

以上自分メモ。

jQuery:自動スライド

仕事で作ったのでメモ。

トップページでよく使われる画像スライドで自動スライドの仕様と下に遷移できるボタンを設置。

＜JS＞
  $(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");
			}
		});
    }
	//
  });
＜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>
    </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;
}

.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;
}

今回は画像が一度完全に消えてから、次の画像表示という形だったので楽でした。
画像が消えかかって次の画像の場合はもうちょっと凝る必要あり。

以上自分メモ。

jQuery:RSS表示(別ドメイン)

前回の続きです。
jQueryでRSSを読む場合のメモ。
別ドメインということで私のDeliciousのBookmarkのRSSを取得してみました。
別ドメインの場合js単体ではセキュリティ上読みにいけないので
proxy.phpを介して読み込みます。今回はプラグインjFeedを使用しました。

jFeedをダウンロードすると色々入ってますが、
今回必要なのはjquery.jfeed.pack.jsとproxy.phpだけなのでその二つをフォルダにいれます。
あと別ドメインなのでやっぱり読み込みに時間がかかる模様。
せっかくだからと思いLoading画面を表示させました。
RSSの読み込みが終了したらLoadingをhideしています。

＜SAMPLE＞

RSS記事一覧(別ドメイン)

＜JS＞
jQuery(function() {
	//Loading
	$('<li class="loading"></li>').html( '<img src="images/ajax-loader.gif" alt="loading..." />').appendTo('ul#feedUl');

    jQuery.getFeed({
    	//外部XMLパス記述
        url: 'proxy.php?url=http://feeds.delicious.com/v2/rss/momochin?count=10',
        //セキュリティ強化の場合はproxy.phpにXMLのパスを記述
        //url: 'proxy.php',
        success: function(feed) {
        	//loading非表示
        	$("li.loading").hide();

        	//xmlの取得に成功した場合
            for(var i = 0; i < feed.items.length && i < 10; i++) {
                var item = feed.items[i];
				var title = item.title			//title取得
				var url = item.link				//link取得
				//取得したデータを出力
				$('<li></li>').html( '<a href="' + url + '"><span>' + dateParse(item.updated) + '</span>' + title + '</a>').appendTo('ul#feedUl');
            }
        }
	});
    //数字表示に変換する
    var dateParse = function(str)
    {
        var newDate = new Date(str);
        yy = newDate.getFullYear();
        mm = newDate.getMonth() + 1;
        dd = newDate.getDate();
        if (mm < 10) { mm = "0" + mm; }
        if (dd < 10) { dd = "0" + dd; }
        datestr = yy + "/" + mm + "/" + dd;
        return datestr;
    };
});
＜HTML＞
<ul id="feedUl">
    <!-- フィードの内容が出力される -->
</ul>
＜CSS＞
#feedUl {
	text-align:left;
}

#feedUl li {
	padding:10px 10px 10px 0;
	background:url(../images/dotted_x.gif) repeat-x left bottom;
}

#feedUl li span {
	padding:0 15px;
	background:url(../images/li_arrow.gif) no-repeat 0 0;
}

#feedUl li.loading {
	display:block;
	margin:0 auto;
	padding:50px 0 50px 0;
	text-align:center;
	width:600px;
}

エラー時の書き方調査必要あり。

jQuery:RSS表示(同ドメイン)

jQueryでRSSを読む場合のメモ。
同ドメイン時はjquery.js単体でもいけるもよう。
書き方もASに近いので個人的には感覚が掴みやすかったです。
別ドメイン時の取得は次回にて。

2011.04.06 追記 別ドメイン版の記事追加しました

＜SAMPLE＞

RSS記事一覧(同ドメイン)

＜JS＞
$(function(){
	$.ajax({
		url: 'feed.xml',		//同ドメインのXMLファイルのパス
		 async: true,			//非同期通信
		cache: false,			//通信結果をキャッシュしない
		dataType:"xml",
		success: function(xml){
		//xmlの取得に成功した場合
			$(xml).find('item').each(function(){
				var title = $(this).find('title').text();	//title取得
				var url = $(this).find('link').text();		//link取得
				var date = $(this).find('updated').text();	//date取得
				//取得したデータを出力
				$('<li></li>').html( '<a href="' + url + '"><span>' + date + '</span>' + title + '</a>').appendTo('ul#feedUl');
    		});
		},
		//xmlの取得に失敗した場合(エラー時)
		error: function(xml){
			$('ul#feedUl').append('<li>Feedの読み込みに失敗いたしました。お手数ですがお使いのブラウザを更新してください。<\/li>');
		}
	});
});
＜HTML＞
<ul id="feedUl">
    <!-- フィードの内容が出力される/エラー表示が出力される -->
</ul>
＜CSS＞
#feedUl {
	text-align:left;
}

#feedUl li {
	padding:10px 10px 10px 0;
	background:url(../images/dotted_x.gif) repeat-x left bottom;
}

#feedUl li span {
	padding:0 15px;
	background:url(../images/li_arrow.gif) no-repeat 0 0;
}
Page 1 of 212
Return to page top.

About

mooco
[mooco]

東京を中心にWebデザイナーとして活動しています。

趣味は愛猫と遊ぶこと。 web周りのあれこれで遊ぶことです。

MolabBlog Clock02
Tag Cloud RSS
after effects AIR Amon2 AS3.0 Blender Bootstrap Butterfly dairy Delicious Design DownLoad earthquake Flash flashdevelop Icon Illustrator iPhone javascript jQuery Knockout linux M.ZUIKO DIGITAL ED 14-42mm f3.5-5.6 L mooco Movable Type OLYMPUS PEN Lite E-PL1 patern perl Photo photoshop pochy Progression shape shell text Wallpaper WordPress xampp まだら

Search

Categories

Archives

My Delicious Delicious