<!DOCTYPE html>
<html>
<head>
<link href="galleria.classic.css" rel="stylesheet" type="text/css">
<style>
/* Example Styles for Demo */
.etabs { margin: 0; padding: 0; }
.tab { display: inline-block; zoom:1; *display:inline; background: #eee; border: solid 1px #999; border-bottom: none; -moz-border-radius: 4px 4px 0 0; -webkit-border-radius: 4px 4px 0 0; }
.tab a { font-size: 14px; line-height: 2em; display: block; padding: 0 10px; outline: none; }
.tab a:hover { text-decoration: underline; }
.tab.active { background: #fff; padding-top: 6px; position: relative; top: 1px; border-color: #666; }
.tab a.active { font-weight: bold; }
.tab-container .panel-container { background: #fff; border: solid #666 1px; padding: 10px; -moz-border-radius: 0 4px 4px 4px; -webkit-border-radius: 0 4px 4px 4px; }
.panel-container { margin-bottom: 10px; }
#side{
float:center;
display:block;
width:400px;
}
#footer{
clear:both;
padding:1em 0;
margin:0 20px;
}
#tags ul{
margin:1em 0;
padding:.5em 10px;
text-align:center;
background:#71b5e9;
}
#tags li{
margin:0;
padding:0;
list-style:none;
display:inline;
}
#tags li a{
text-decoration:none;
color:#fff;
padding:0 2px;
}
#tags li a:hover{
color:#cff400;
}
.tag1{font-size:100%;}
.tag2{font-size:120%;}
.tag3{font-size:140%;}
.tag4{font-size:160%;}
.tag5{font-size:180%;}
/* alternative layout */
#tags .alt{
text-align:left;
padding:0;
background:none;
}
#tags .alt li{
padding:2px 10px;
background:#efefef;
display:block;
}
#tags .alt .tag1,
#tags .alt .tag2,
#tags .alt .tag3,
#tags .alt .tag4,
#tags .alt .tag5{font-size:100%;}
#tags .alt .tag1{background:#7cc0f4;}
#tags .alt .tag2{background:#67abe0;}
#tags .alt .tag3{background:#4d92c7;}
#tags .alt .tag4{background:#3277ad;}
#tags .alt .tag5{background:#266ca2;}
/* Demo styles */
.content{color:#777;font:12px/1.4 "helvetica neue",arial,sans-serif;height:450px;width:620px;margin:20px auto;}
h1{font-size:12px;font-weight:normal;color:#ddd;margin:0;}
p{margin:0 0 20px}
a {color:#22BCB9;text-decoration:none;}
.cred{margin-top:20px;font-size:11px;}
/* This rule is read by Galleria to define the gallery height: */
#galleria{height:400px;width:600px;}
#galleria1{height:400px;width:600px;}
#galleria2{height:400px;width:600px;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="jquery.hashchange.min.js" type="text/javascript"></script>
<script src="jquery.easytabs.min.js" type="text/javascript"></script>
<script src="galleria-1.2.9.js"></script>
</head>
<!-- <body onLoad="intilization()"> -->
<body>
<center><h2>Venue Sementic Example</h2></center>
<center><div id="tab-container" class='tab-container'>
<ul class='etabs'>
<li class='tab'><a href="#tabs1-html">First Topic</a></li>
<li class='tab'><a href="#tabs1-js">Second Topic</a></li>
<li class='tab'><a href="#tabs1-css">Third Topic</a></li>
</ul>
<div class='panel-container'>
<div id="tabs1-html"></div>
<div id="tabs1-js"></div>
<div id="tabs1-css"></div>
</div>
</div>
</center>
<script type="text/javascript">
// Load the classic theme
var myjson;
$(document).ready( function() {
$('#tab-container').easytabs();
});
function intilization()
{
console.log("initialize");
//alert('hello');
var url = location.href;
//alert(url);
var venueid = url.substring(url.indexOf("=")+1,url.length);
venueid = venueid.replace(/\s+/, '');
console.log(venueid);
//alert(venueid);
venueid = '4bf299a21cd9d13a03d3ed76';
$.ajax({
url:"showvenue.php",
data: {"venueid" : venueid },
//timeout:3000,
type:"post",
success: function(data) {
console.log(data);
myjson = eval(data);
//alert(myjson);
ShowImagelist();
},
});
//alert('132'+myjson);
}
function ShowImagelist()
{
//alert('hello');
console.log("before show image");
var imagelist1;
var imagelist2;
var imagelist3;
imagelist1 = myjson[0];
imagelist2 = myjson[1];
imagelist3 = myjson[2];
var str1 = "<div class=\"content\"><div id=\"galleria1\">";
//alert(imagelist1.length);
for(var i=0;i<imagelist1.length; i++)
{
var imageurl = imagelist1[i];
//alert(imageurl);
str1 = str1 + "<img src=\"" + imagelist1[i] + '\" width=\"100px\" height=\"100px\">';
//alert(str);
}
str1 = str1+"<\div><\div>";
//$("#tabs1-html").html(str);
var str2 = "<div class=\"content\"><div id=\"galleria2\">";
//alert(imagelist1.length);
for(var i=0;i<imagelist2.length; i++)
{
var imageurl = imagelist2[i];
//alert(imageurl);
str2 = str2 + "<img src=\"" + imagelist2[i] + '\" width=\"100px\" height=\"100px\">';
//alert(str);
}
str2 = str2+"<\div><\div>";
//$("#tabs1-js").html(str);
var str3 = "<div class=\"content\"><div id=\"galleria\">";
//alert(imagelist1.length);
for(var i=0;i<imagelist3.length; i++)
{
var imageurl = imagelist3[i];
//alert(imageurl);
str3 = str3 + "<img src=\"" + imagelist3[i] + '\" width=\"100px\" height=\"100px\">';
//str3 = str3 + "<a href=\""+imageurl+"\"><img src=\"" + imagelist3[i] + "\" data-big=\"" + imagelist3[i] + "\><\a>";
//alert(str3);
}
str3 = str3+"</div></div>";
//$("#tabs1-css").html(str);
var topic1 = myjson[3];
//alert(topic1);
var topic2 = myjson[4];
var topic3 = myjson[5];
//alert(topic1);
var str = '<center><div id="side">\n<div id="tags">\n<ul>\n';
//alert(topic1.length);
for(var i=0;i<topic1.length;i++)
{
var word = topic1[i];
if(i<5){
str = str+"<li class=\"tag5\"><a href=\"#\">"+word+"</a></li>\n";
//alert(str);
}
else{
if(i<10){
str = str+"<li class=\"tag4\"><a href=\"#\">"+word+"</a></li>\n";
}
else{
str = str+"<li class=\"tag3\"><a href=\"#\">"+word+"</a></li>\n";
}
}
}
str = str+"</ul>\n</div>\n</div>\n</center>";
str = str+str1;
$("#tabs1-html").html(str);
var str = '<center><div id="side">\n<div id="tags">\n<ul>\n';
for(var i=0;i<topic2.length;i++)
{
var word = topic2[i];
if(i<5){
str = str+"<li class=\"tag5\"><a href=\"#\">"+word+"</a></li>\n";
//alert(str);
}
else{
if(i<10){
str = str+"<li class=\"tag4\"><a href=\"#\">"+word+"</a></li>\n";
}
else{
str = str+"<li class=\"tag3\"><a href=\"#\">"+word+"</a></li>\n";
}
}
}
str = str+"</ul>\n</div>\n</div>\n</center>";
//alert(str);
str = str+str2;
$("#tabs1-js").html(str);
var str = '<center><div id="side">\n<div id="tags">\n<ul>\n';
for(var i=0;i<topic3.length;i++)
{
var word = topic3[i];
if(i<5){
str = str+"<li class=\"tag5\"><a href=\"#\">"+word+"</a></li>\n";
//alert(str);
}
else{
if(i<10){
str = str+"<li class=\"tag4\"><a href=\"#\">"+word+"</a></li>\n";
}
else{
str = str+"<li class=\"tag3\"><a href=\"#\">"+word+"</a></li>\n";
}
}
}
str = str+"</ul>\n</div>\n</div>\n</center>";
//alert(str);
str = str+str3;
//alert(str3);
$("#tabs1-css").html(str);
console.log("end of finish");
console.log("finish");
}
</script>
<script>
$(document).ready(function() {
Galleria.loadTheme('galleria.classic.min.js');
Galleria.run('#galleria');
console.log("1");
Galleria.run('#galleria1');
console.log("2");
Galleria.run('#galleria2');
console.log("3");
});
</script>
<script>
intilization();
</script>
</body>
</html>