JavaScript + Ajax 実践サンプル集

AjaxでFlickrの写真をスライドで表示(雪)

説明コードコメント投稿

このサンプルは、Flickrで検索した画像の上に雪を降らせます。

メルマガ登録！ (ドラッグ＆リサイズ可)

苗字
メール

このメルマガを購読すると、新着サンプルの情報を受け取ることができます。「苗字」と「メールアドレス」を入力したら[登録]ボタンをクリックしてください。このウィンドウは、任意の場所に移動したりリサイズすることができます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Flickr Fade-in Slide Show with Snow</title>
<style type="text/css">
.contentslide{
border: 10px solid navy;
border-bottom-width: 6px;
padding: 8px;
width: 300px;
height: 140px;
}

.contentslide .contentdiv{
display: none;
}

.pagination{
width: 316px; /* width+(padding*2) =>  300+(8*2)  */
text-align: right;
background-color: navy;
border: 10px solid navy;
border-width: 0 10px; /* Left/right border width of pagination DIV.*/
padding: 0 0 4px 0;
}

* html .pagination{
width: 200px; /*IE5 width*/
width: 216px; /*IE6 width*/
}

.pagination a{
padding: 0 5px;
text-decoration: none; 
color: #2e6ab1;
background-color: white;
}

.pagination a:hover, .pagination a.selected{
color: #000;
background-color: #FEE496;
}

img { border:0} 
} 
</style>  
<script type="text/javascript" src="../../MSAjax/MicrosoftAjax.js"></script>
<script type="text/javascript" src="../../WebServices/FlickrWebService2.asmx/js"></script>
<script type="text/javascript">

</script>

function DoSearch() {
    FlickrWebService2.GetFlickr2("桜吹雪",onComplete, onError,"Flickr")
}

function onComplete(result) {
  for (var i=0; i<result.length; i++) {
     largeImages[i] = [result[i].PhotoUrl, result[i].PhotoUrl, "_blank"];          
  }

// fadeshow(outelement, theimages, fadewidth, fadeheight, 
  //          borderwidth, delay, pause, displayorder)

new fadeshow($get("divLargeImages"),largeImages, 500, 400, 0, 3000, 1, "R");   
 
}

function onError(error) {
  alert(error.get_message());
}
</script>

</head>
<body>
<div id="divLargeImages" style="float:left"></div>

/******************************************
* Snow Effect Script- By Altan d.o.o. 
* (http://www.altan.hr/snow/index.html)
******************************************/
  
  // 雪のイメージのパスを設定
  var snowsrc="images/snow.gif"
  // 表示する雪の個数を設定
  var no = 10;
  // 雪の表示頻度を設定（秒単位）(0=表示しない):
  var hidesnowtime = 0;
  // "windowheight" or "pageheight"
  var snowdistance = "pageheight";

var ie4up = (document.all) ? 1 : 0;
  var ns6up = (document.getElementById&&!document.all) ? 1 : 0;

function iecompattest(){
	return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
	}

var dx, xp, yp;    
  var am, stx, sty;  
  var i, doc_width = 800, doc_height = 600; 
  
  if (ns6up) {
    doc_width = self.innerWidth;
    doc_height = self.innerHeight;
  } else if (ie4up) {
    doc_width = iecompattest().clientWidth;
    doc_height = iecompattest().clientHeight;
  }

dx = new Array();
  xp = new Array();
  yp = new Array();
  am = new Array();
  stx = new Array();
  sty = new Array();

for (i = 0; i < no; ++ i) {  
    dx[i] = 0;                        // set coordinate variables
    xp[i] = Math.random()*(doc_width-50);  // set position variables
    yp[i] = Math.random()*doc_height;
    am[i] = Math.random()*20;         // set amplitude variables
    stx[i] = 0.02 + Math.random()/10; // set step variables
    sty[i] = 0.7 + Math.random();     // set step variables
		if (ie4up||ns6up) {
      if (i == 0) {
        document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://dynamicdrive.com\"><img src='"+snowsrc+"' border=\"0\"><\/a><\/div>");
      } else {
        document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");
      }
    }
  }

function hidesnow(){
		if (window.snowtimer) clearTimeout(snowtimer)
		for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
	}

if (ie4up||ns6up){
    snowIE_NS6();
		if (hidesnowtime>0)
		setTimeout("hidesnow()", hidesnowtime*1000)
		}

</script>
  
</body>
</html>

このサンプルは、Flickrで検索した画像の上に雪を降らせます。

このサンプルを編集して試してみる!

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中...

AjaxでFlickrの写真をスライドで表示(雪)