• forked:宇部市の文化財
Import an externally hosted application
Check style

  • JavaScript
  • CSS
  • HTML
  • Images
  • Input Data
  • ReadMe
  • forked:宇部市の文化財
  • jquery-1.11.2.min.js  
  • imgLiquid.js  
  •  
  • history 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
 
var PG = PG || {};
 
// ※表示タイトル
PG.title = "宇部市の文化財";
 
// ※プロパティの設定
PG.property = {
    image : "http://xmlns.com/foaf/0.1/depiction",
    label : "http://www.w3.org/2000/01/rdf-schema#label",
    detail : "remarks",
    address : "residence",
    long : "http://www.w3.org/2003/01/geo/wgs84_pos#long",
    lat : "http://www.w3.org/2003/01/geo/wgs84_pos#lat"
}
 
window.onload = function() {
    var list = "";
    $("#container").prepend("<h3>" + PG.title + "</h3>");
    // 指定されたworkを全件取得
    $.each(LinkData.getWorks(), function(workKey, workValue) {
        // workに含まれるfileを全件取得
        var propUri = stringToUri(PG.property, workValue);
        $.each(LinkData.getFiles(workValue), function(fileKey, fileValue) {
            // subjectを全件取得
            $.each(LinkData.getSubjects(workValue, fileValue), function(subjKey, subjValue) {
                var image = "";
                var label = "";
                var detail = "";
                var address = "";
                var longitude = "";
                var latitude = "";
                var str = "";
                $.each( LinkData.getTriplesBySubject(workValue, fileValue, subjValue), function( tripleKey, tripleValue ) {
                    var prop = tripleValue.property;
                    var obj = tripleValue.object;
                    if ( prop == propUri.image )  image = obj;
                    else if ( prop == propUri.label ) label = obj ;
                    else if ( prop == propUri.detail ) detail = obj ;
                    else if ( prop == propUri.address && obj.length != 0) address = "<p class=\"address\"><img src=\"http://app.linkdata.org/asset/47cb55da.png\" />" + obj + "</p>" ;
                    else if ( prop == propUri.long ) longitude = obj;
                    else if ( prop == propUri.lat ) latitude = obj;
                });
                str += "<li class=\"flipImage\"><div class=\"front\"><a href='#'><img src=\"" + image + "\" alt=\"image\" /></a></div><div class=\"back\"><p class=\"label\">" + label + "<p class=\"detail\">" + detail  + "</p>" + address + "<span class=\"button\">" + addLinkToMap(latitude, longitude) + "</span></div></li>"
                list += str;
            });
        });
    });
    $("#result").append( list );
    
    // 画像を正方形にトリミング
    $(".front").imgLiquid();
    
    // 画像が読み込めなかった時の処理
    $("img").error(function(){
        $(this).before("No Image");
    });
    
    $( 'a' )
      .bind( 'touchstart', function(){
       $( this ).addClass( 'hover' );
    }).bind( 'touchend', function(){
        $( this ).removeClass( 'hover' );
    });
};
 
// Google Mapのルート検索へのリンクを追加
function addLinkToMap( latitude, longitude )
{
    var str = "";
    if (latitude.length != 0 && longitude.length != 0) {
        str = "<a target=\"_blank\" class=\"object\" href=\"http://maps.google.co.jp/maps?daddr=" + latitude + "," + longitude + "\">ルート検索</a>"
    }
    return str;
}
 
function stringToUri (p, workId) {
    $.each (p, function(propKey, propVal){
        if(propVal.indexOf("http") != 0){
            p[propKey] = "http://linkdata.org/property/" + workId + "#" + encodeURIComponent(propVal);
        }
    })
    return p;
}
jquery-1.11.2.min.js
imgLiquid.js 
Playing...

jquery-1.11.2.min.js
imgLiquid.js