Image Gallery Example

最新推荐文章于 2024-08-30 09:37:13 发布
Json_Nie
最新推荐文章于 2024-08-30 09:37:13 发布
阅读量1.7k
点赞数
CC 4.0 BY-SA版权
分类专栏： JaveScript Jquery
本文链接：https://blog.youkuaiyun.com/DreamD1987/article/details/9268827
JaveScript 同时被 2 个专栏收录
7 篇文章
订阅专栏
Jquery
3 篇文章
订阅专栏
<html>
<title>Venue Sementic</title>
<head>
<link rel="stylesheet" href="css/skin.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="style2.css" />
<script type="text/javascript" src="tinybox.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="js/jquery.flowgallery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&language=ja"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=geometry&sensor=true"></script>

<script type="text/javascript" charset="utf-8">  

var sgLat = 1.287266;
var sgLng = 103.85444;
var map;
var markers = [];
var Locat = [];
var count = 0;
var countf = 500;
var counts = 500;
var linewidth = 1;
var cityCircle;
var cityCircle2;
var cityCircle1s = [];
var cityCircle2s = [];
var lineM = [];
var templat;
var templng;
var myjson;
var marker;
var theme;
  
function calcDistance (fromLat, fromLng, toLat, toLng) {
      return google.maps.geometry.spherical.computeDistanceBetween(
        new google.maps.LatLng(fromLat, fromLng), new google.maps.LatLng(toLat, toLng));
}
	  
function initialize() 
{  
	//alert("hello the word!")
	var latlng = new google.maps.LatLng(sgLat, sgLng);     
	var myOptions = {zoom: 10,       
					center: latlng,      
					mapTypeId: google.maps.MapTypeId.ROADMAP};     
					
	map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
    
	//alert("test:"+templat);
	//var myLatlng = new google.maps.LatLng(sgLat,sgLng);
	getServerData();
}

function getServerData()
{
	$.ajax({
		url:"GetVenueData.php",
		//data:"name=周&sex=男&age=11",
		//timeout:3000,
		type:"POST",
		error:function (XMLHttpRequest, textStatus, errorThrown) {},
		beforeSend:function (XMLHttpRequest) {},
		success: function (data, textStatus) {},  
		complete:handleResponse
	}); 
}

function aaa(param) 
{
	//alert($(param).attr('name'));
	var templat;
	var templng;
	if(marker!=null){
		marker.setMap(null);
	}
	//marker.setMap(null);
	//alert(marker);
	theme = $(param).attr('name');
	//alert(myjson.length);
	for(var i=0; i<myjson.length; i++)
	{	
		id = myjson[i]._id;
		if(id==theme){
			templat = myjson[i].lat;
			templng = myjson[i].lng;
			break;
		}
	}
	//alert(templat, templng);
	var myLatlng = new google.maps.LatLng(templat, templng);
	marker = new google.maps.Marker({
		map:map,
		draggable:true,
		animation: google.maps.Animation.DROP,
		position: myLatlng
	});
	
	google.maps.event.addListener(marker, 'click', toggleBounce);
	//alert(theme);
	//var str = "https://foursquare.com/v/the-singapore-flyer/" + theme;
	//var str = ""
	//window.open(str);
	//var str = "showvenue.php?venue_id="+theme;
	//alert(str);
	//this.location = str;
	
}

function toggleBounce() {
    var str = "EachVenueShow.html?venue_id="+theme;
	console.log(str);
	console.log("before excute");
	TINY.box.show({iframe:str,boxid:'frameless',width:800,height:800,fixed:false,maskid:'bluemask',maskopacity:40});
	console.log("after excute");
  //var str = "showvenue.php?venue_id="+theme;
  //window.open(str);
  //this.location = str;
  //alert(str);
}

function handleResponse(XMLHttpRequest, textStatus) 
{
	//alert('...'+XMLHttpRequest);
	var latlng = new google.maps.LatLng(sgLat, sgLng);   
	var myOptions = {zoom: 15,       
					  center: latlng,      
					  mapTypeId: google.maps.MapTypeId.ROADMAP};     
					
	map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
	
	myjson = eval(XMLHttpRequest.responseText);
	
	drwointilize();
}

function drwointilize() 
{ 

	//alert('hello');
	var str="";
	var center = map.getCenter();
	//alert(center);
	for(var i=0;i<myjson.length;i++){
	
		//alert(myjson[i]);
		//var center = map.getCenter();
		var myLatlng = new google.maps.LatLng(myjson[i].lat,myjson[i].lng);
		var distance = google.maps.geometry.spherical.computeDistanceBetween(center, myLatlng);
		var northeastlat = map.getBounds().getNorthEast().lat();
		var southwestlat = map.getBounds().getSouthWest().lat();
		var northeastlng = map.getBounds().getNorthEast().lng();
		var southwestlng = map.getBounds().getSouthWest().lng();
		//alert(northeastlat);
		//alert(southwestlat);
		//alert(myjson[i].lat);
		if(myjson[i].lat<northeastlat&&myjson[i].lat>southwestlat&&myjson[i].lng<northeastlng&&myjson[i].lng>southwestlng){
			var countf = 100;
			var populationOptions = {
					strokeColor: '#FFFFFF',
					strokeOpacity: 0.8,
					strokeWeight: 2,
					fillColor: '#FF0000',
					fillOpacity: 0.35,
					map: map,
					center: myLatlng,
					radius: countf
				  };
			cityCircle = new google.maps.Circle(populationOptions);
			cityCircle1s.push(cityCircle);
			//alert(myjson[i]["Photos"]["1"]["Url"]);
			//alert(myjson[i]["Title"]);
			//str = str+"<li><img onclick='aaa(this)' name = '"+ myjson[i]["Title"]+"' title='" + myjson[i]["Venue_id"] + "' src=\"" + myjson[i]["Photos"]["1"]["Url"] + "\" width=\"100\" height=\"100\"></li>";
		}
	}
	//alert($("#result").html());
	//$("#gallery").html(str);
	//alert($("#result").html());
	//$("#result").append('<input type="button" value="清除数据" id="btn2" />'); 
	//$('#btn2').click(function (){ $("#result").html(''); });
}



$(function() {
	$('#gallery').flowGallery({
	  easing: 'linear',
	  activeIndex: 10,
	  imagePadding: 1,
	  thumbWidth: 120,
	  forceHeight: 200,
	  forceWidth: 200
	});
});
	  
</script>
</head> 
<body onLoad="initialize()">  
    <center><h1>Singapore Venue Sementic</h1></center>
	<center><div id="map_canvas" style="width: 70%; height: 60%"></div></center>
	<ul class="gal" id="gallery">
	<li><img onclick="aaa(this)" name="4b5953d3f964a520318528e3" title="Starbucks" src="https://irs0.4sqi.net/img/general/width960/2708054_Dx1Xvf60JnEe9T12FZjvkgPSLv-e_YEBSvhzydkl224.jpg" width="100" height="100"></li>
	<li><img onclick="aaa(this)" name="4b715e83f964a52035432de3" title="WARAKU Japanese Casual Dining" src="https://irs0.4sqi.net/img/general/width960/1-nA5Tm_gJTltisn6yBtmbjaky_z2KKgEjfxSk5gyOQ.jpg" width="100" height="100"></li>
	<li><img onclick="aaa(this)" name="4b05880bf964a520e8ad22e3" title="The Fullerton Hotel" src="https://irs0.4sqi.net/img/general/width960/18830967_mIK9Rq4YVhYYZo_NvijTizFx7xCpZt7qhhbHIrTSxf0.jpg" width="100" height="100"></li>
	<li><img onclick="aaa(this)" name="4b05880ef964a520d6ae22e3" title="Clarke Quay" src="https://irs0.4sqi.net/img/general/width960/13912368_dUzmE1i8Xg3pdkLCJ-AIuC4DjllIGmTObRwp9YcF-LQ.jpg" width="100" height="100"></li>
	<li><img onclick="aaa(this)" name="4b058810f964a52054af22e3" title="The Singapore Flyer" src="https://irs0.4sqi.net/img/general/width960/28945077_u_6-R-_rqvT8N8SqAQ-DBnbCXEmSUBZfp2ZfiEt3OhM.jpg" width="100" height="100"></li>
	<li><img onclick="aaa(this)" name="4bdc378cc79cc9281c9685e9" title="Fuse - Downtown Core" src="https://irs0.4sqi.net/img/general/width960/MMwTBM6NmCZxmgcilGIgBqfBKhfZqMRCUuxrTEx4wzY.jpg" width="100" height="100"></li>
	<li><img onclick="aaa(this)" name="4b0cc2b9f964a520ac4123e3" title="Great World City" src="https://irs0.4sqi.net/img/general/width960/0Z4GbdyFSv-qYgUMm9YyBwgIX6tc5mSiCoFnWWImY2I.jpg" width="100" height="100"></li>
	<li><img onclick="aaa(this)" name="4b0eee50f964a520f05c23e3" title="Spize" src="https://irs0.4sqi.net/img/general/width960/40617356_wikjmME3FCCKHm3SB9NefJJqHXfEgAYTO4sUg77C72w.jpg" width="100" height="100"></li>
	<li><img onclick="aaa(this)" name="4b305537f964a520fef824e3" title="Amoy Street Food Centre" src="https://irs0.4sqi.net/img/general/width960/030LHJTU1FPICFSWGQKQVSD42OGX0MKYD4H0GPM5SI1YKHBD.jpg" width="100" height="100"></li>
	<li><img onclick="aaa(this)" name="4c8259fe6bd49521e137c4d2" title="Filter Members Club" src="https://irs0.4sqi.net/img/general/width960/255781_s0crmcjZhF3SHOyEshwOQZog5bqWiSEH4vzRm3REoN4.jpg" width="100" height="100"></li>
	<li><img onclick="aaa(this)" name="4b658f2af964a5206ef42ae3" title="The Pizza Place" src="https://irs0.4sqi.net/img/general/width960/E2IPSMFLJ0YUJCPBX4XENYT41ZZUTN3ZZ54BEMJ1U5J1BY1V.jpg" width="100" height="100"></li>
	<li><img onclick="aaa(this)" name="4cff793a6923721ecf7cbf3b" title="LeVeL 33 Craft-Brewery Restaurant & Lounge" src="https://irs0.4sqi.net/img/general/width960/5796192_nK741M95Qmpbl73x4cISAS_f_l8S4WrxNP98pp1zD5M.jpg" width="100" height="100"></li>
	<li><img onclick="aaa(this)" name="4bd311cd046076b027107571" title="Tiong Bahru Plaza" src="https://irs0.4sqi.net/img/general/width960/41864012_xf_m_qb38_3HQ4T6GvhUG4AqCBBw2DAJAYertgUqfZs.jpg" width="100" height="100"></li>
	<li><img onclick="aaa(this)" name="4e6ca596b993061ea8e39772" title="Louis Vuitton Island Maison" src="https://irs0.4sqi.net/img/general/width960/78XQNHNEfuIeWeQch4U7xhrOT8mt4UR1BiuiZG4RGao.jpg" width="100" height="100"></li>
	<li><img onclick="aaa(this)" name="4bcd7959fb84c9b6a10b223e" title="Library @ Esplanade" src="https://irs0.4sqi.net/img/general/width960/-cNb3jjTa5UooPoO4GtVJ_Q3YlUKeEId0GJsVHNSyzw.jpg" width="100" height="100"></li>
	<li><img onclick="aaa(this)" name="4b949764f964a5202f7e34e3" title="The Helix (Double Helix Bridge)" src="https://irs0.4sqi.net/img/general/width960/11973206_KOYrxUEgAiL0J9FlLHGX4XEz-vbBxAOpZAkGxZ8pVic.jpg" width="100" height="100"></li>
	<li><img onclick="aaa(this)" name="4b05880bf964a520c6ad22e3" title="The Ritz-Carlton" src="https://irs0.4sqi.net/img/general/width960/-it8LsVpN7C3jsIoBmW9AjCgtOCFgobB9dgIAYTfk1w.jpg" width="100" height="100"></li>
	<li><img onclick="aaa(this)" name="4b05880bf964a520ecad22e3" title="Holiday Inn Singapore Atrium" src="https://irs0.4sqi.net/img/general/width960/2303563_rNSTCpg2RsFj1-L3sxvNZLsuunC6h9hxdmMD_wlrZ38.jpg" width="100" height="100"></li>
	<li><img onclick="aaa(this)" name="4b058814f964a52090b022e3" title="Esplanade" src="https://irs0.4sqi.net/img/general/width960/3508342_trxJxLUO0Zk2KeCIq-oMuyUF6bSMgsKmXFbgezJR_OU.jpg" width="100" height="100"></li>
	<li><img onclick="aaa(this)" name="4b949b12f964a5208e7e34e3" title="Gardens By The Bay" src="https://irs0.4sqi.net/img/general/width960/217365_w5-zqqCeyJorItL2GRBXo_4P78uhI3DLOPxTRndIFfY.jpg" width="100" height="100"></li>
	<li><img onclick="aaa(this)" name="4bf7c0404a67c928061924cf" title="Marina Bay Sands Hotel" src="https://irs0.4sqi.net/img/general/width960/13430601_m79z1P9osnCreRLSyZNFRaIqGW9VB3qhnK6w0BS2n2Q.jpg" width="100" height="100"></li>
	<li><img onclick="aaa(this)" name="4cf6ef5d1801a143eedbecd4" title="db Bistro Moderne" src="https://irs0.4sqi.net/img/general/width960/511761__AOJtq_2Pw9TXWxpP2WVvQs127z6rTcifEXhvEwRbnc.jpg" width="100" height="100"></li>
	<li><img onclick="aaa(this)" name="4c35c5693ffc9521753b91f5" title="Marina Bay Waterfront Promenade" src="https://irs0.4sqi.net/img/general/width960/29068579_ZjXqjF9NvLZYvcAQhrW2aPByBKzJoceFcVeLWrg49Y8.jpg" width="100" height="100"></li>
	<li><img onclick="aaa(this)" name="4b05880cf964a5202eae22e3" title="New Asia Bar" src="https://irs0.4sqi.net/img/general/width960/aQaOvZXKfzUOefk7aA0RGphwveOv_S-iqYFMmYGC1UE.jpg" width="100" height="100"></li>
	<li><img onclick="aaa(this)" name="4b058815f964a520acb022e3" title="Marina Square" src="https://irs0.4sqi.net/img/general/width960/mX5wH1gSEUEjs_ZoTDQy84s0yzUFiOF2Fd5nF0xmp6s.jpg" width="100" height="100"></li>
	<li><img onclick="aaa(this)" name="4bfb8d0265fbc9b62e88916c" title="The Coffee Bean & Tea Leaf Beanstro" src="https://irs0.4sqi.net/img/general/width960/349258_6PKoGBn8bnZakeVNIvIVUJv0xxzya8kfQW5JHmr-Hss.jpg" width="100" height="100"></li>
	<li><img onclick="aaa(this)" name="4c9b4767db10b60ccc96996d" title="Avalon" src="https://irs0.4sqi.net/img/general/width960/42477737_pzFEMu17nn33FdRitc7g5jN-z6oPN2nV8a5ABfz2xWo.jpg" width="100" height="100"></li>
	<li><img onclick="aaa(this)" name="4b9b895df964a520bd0d36e3" title="The Float @ Marina Bay" src="https://irs0.4sqi.net/img/general/width960/an39kf1jSIR2dBkcaV51Oi6HBgF8hkYV5MtIGMJgdjo.jpg" width="100" height="100"></li>
	<li><img onclick="aaa(this)" name="4afa194af964a520b71622e3" title="The Central" src="https://irs0.4sqi.net/img/general/width960/-SFhURPYrWK_OnwBo7mEUb6ApOU3OaAy-ElUOyltc8w.jpg" width="100" height="100"></li>
	<li><img onclick="aaa(this)" name="4b949891f964a5204f7e34e3" title="Sands SkyPark" src="https://irs0.4sqi.net/img/general/width960/1466779_As-5CqbUNk-Fn1aGyxqWvCypAFJhn-rL_DYsejFHcxk.jpg" width="100" height="100"></li>
	<li><img onclick="aaa(this)" name="4b058815f964a520adb022e3" title="Funan DigitaLife Mall" src="https://irs0.4sqi.net/img/general/width960/30685052_6eNK9SH31qziye_tHy5Fp1QZoatfcSX_1PnrP5HPBLc.jpg" width="100" height="100"></li>
	<li><img onclick="aaa(this)" name="4b05880bf964a520c8ad22e3" title="Swisstel The Stamford" src="https://irs0.4sqi.net/img/general/width960/-UMKX_nQEoYdU2vFpaBQyn6IodjIyzcM22GM6W21xX4.jpg" width="100" height="100"></li>
	<li><img onclick="aaa(this)" name="4b05880bf964a520f4ad22e3" title="Brewerkz Restaurant & Microbrewery" src="https://irs0.4sqi.net/img/general/width960/30944106_rZurOVwVvOA_tOupNgGWuDUrNv2tqRHqf7nn3bV0OM8.jpg" width="100" height="100"></li>
	<li><img onclick="aaa(this)" name="4b57f725f964a5207a4728e3" title="Cafe Iguana" src="https://irs0.4sqi.net/img/general/width960/l0546L0_ABbsFtiQd-ENZdjRrUlkEvJObpakoYaEc_w.jpg" width="100" height="100"></li>
	<li><img onclick="aaa(this)" name="4bd3f2f577b29c74edfa9182" title="Mei Heong Yuen Dessert" src="https://irs0.4sqi.net/img/general/width960/39116470_kVcu0QhaN892nvmiqkc-4L6ahKwUZYiQshbzFn97CcU.jpg" width="100" height="100"></li>
	<li><img onclick="aaa(this)" name="4b058810f964a52040af22e3" title="Marina Barrage" src="https://irs0.4sqi.net/img/general/width960/4iwd4fNq5S1846FaErRpaFq_DiLjJGbBoF3Wft3lTQU.jpg" width="100" height="100"></li>
	<li><img onclick="aaa(this)" name="4b764f18f964a520b2472ee3" title="Queensway Shopping Centre" src="https://irs0.4sqi.net/img/general/width960/7988511_WEnhCfQ6mrjVk2UTOcqoIX1clffKs8DptA5VztIq3tQ.jpg" width="100" height="100"></li>
	<li><img onclick="aaa(this)" name="4c5fd36e1e5cd13a3d58a0ed" title="Marina Bay Sands Integrated Resort" src="https://irs0.4sqi.net/img/general/width960/32407234_BSGIMpZm7u1FaMXvrDELOXbPNczp3axaJGmTtLkA4Ag.jpg" width="100" height="100"></li>
	<li><img onclick="aaa(this)" name="4b05880cf964a52030ae22e3" title="Attica" src="https://irs0.4sqi.net/img/general/width960/jQdp8i_IL7pD4YMVhHlobsIxJ9TI-PCwezAGC6zrhB8.jpg" width="100" height="100"></li>
	<li><img onclick="aaa(this)" name="4bf299a21cd9d13a03d3ed76" title="Rise - Downtown Core" src="https://irs0.4sqi.net/img/general/width960/GQdeX-J3kEr-I3t8S6680wV1fmLXoySxo8R7Kk5dLEM.jpg" width="100" height="100"></li>
	<li><img onclick="aaa(this)" name="4d35442cf8c9224b2380cad2" title="Rasapura Masters Food Court" src="https://irs0.4sqi.net/img/general/width960/34054900_ojE8HsSkuLLIfAsPcPJPMmPFycTykMpBVEeFPw9dkZs.jpg" width="100" height="100"></li>
	</ul>
</body> 
</html>