Postingan lainnya
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
Setelah gambar di crop tidak muncul
mohon bantuannya kak. gambar nya saya ganti dan sebelumnya gamabrnya saya crop dulu dan tidak muncul. maaf kalau kodenya kepanjangan, saya masih kurang mengerti. terimakasih
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="image_src" href="/images/panorama_viewer_image.png" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Pacifico:400' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="jquery.panorama_viewer.js"></script>
<link href='panorama_viewer.css' rel='stylesheet' type='text/css'>
<style>
html {
height: 100%;
}
body {
background: #F1f1f2;
padding: 0;
text-align: center;
font-family: 'open sans';
position: relative;
margin: 0;
height: 100%;
}
.wrapper {
height: auto !important;
height: 100%;
margin: 0 auto;
overflow: hidden;
}
a {
text-decoration: none;
}
h1, h2 {
width: 100%;
float: left;
}
h1 {
margin-top: 100px;
color: #999;
margin-bottom: 5px;
font-size: 70px;
font-weight: 100;
}
h2 {
padding: 00px 20px 30px 20px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
letter-spacing: 0px;
color: #888;
font-size: 20px;
line-height: 160%;
font-weight: 100;
margin-top: 10px;
margin-bottom: 0;
}
.pointer {
color: #00B0FF;
font-family: 'Pacifico';
font-size: 24px;
margin-top: 15px;
position: absolute;
top: 130px;
right: -40px;
}
.pointer2 {
color: #00B0FF;
font-family: 'Pacifico';
font-size: 24px;
margin-top: 15px;
position: absolute;
top: 130px;
left: -40px;
}
pre {
margin: 80px auto;
}
pre code {
padding: 35px;
border-radius: 5px;
font-size: 15px;
background: rgba(0,0,0,0.1);
border: rgba(0,0,0,0.05) 5px solid;
max-width: 500px;
}
.main {
float: left;
width: 100%;
margin: 0 auto;
}
.main h1 {
padding:20px 50px 10px;
float: left;
width: 100%;
font-size: 60px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
font-weight: 100;
margin: 0;
padding-top: 55px;
font-family: 'Open Sans';
letter-spacing: -1px;
text-transform: capitalize;
}
.main h1.demo1 {
background: #1ABC9C;
}
.reload.bell {
font-size: 12px;
padding: 20px;
width: 45px;
text-align: center;
height: 47px;
border-radius: 50px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
}
.reload.bell #notification {
font-size: 25px;
line-height: 140%;
}
.reload, .btn{
display: inline-block;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
display: inline-block;
line-height: 100%;
padding: 0.7em;
text-decoration: none;
width: 100px;
line-height: 140%;
font-size: 17px;
font-family: Open Sans;
font-weight: bold;
-webkit-box-shadow: none;
box-shadow: none;
background-color: #4D90FE;
background-image: -webkit-linear-gradient(top,#4D90FE,#4787ED);
background-image: -webkit-moz-gradient(top,#4D90FE,#4787ED);
background-image: linear-gradient(top,#4d90fe,#4787ed);
border: 1px solid #3079ED;
color: #FFF;
}
.reload:hover{
background: #317af2;
}
.btn {
width: 200px;
-webkit-box-shadow: none;
box-shadow: none;
background-color: #4D90FE;
background-image: -webkit-linear-gradient(top,#4D90FE,#4787ED);
background-image: -moz-linear-gradient(top,#4D90FE,#4787ED);
background-image: linear-gradient(top,#4d90fe,#4787ed);
border: 1px solid #3079ED;
color: #FFF;
}
.clear {
width: auto;
}
.btn:hover, .btn:hover {
background: #317af2;
}
.btns {
float: left;
width: 100%;
margin: 50px auto;
}
.credit {
text-align: center;
color: #888;
padding: 10px 10px;
margin: 0 0 0 0;
background: #f5f5f5;
float: left;
width: 100%;
}
.credit a {
text-decoration: none;
font-weight: bold;
color: black;
}
.back {
position: absolute;
top: 0;
left: 0;
text-align: center;
display: block;
padding: 7px;
width: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
background:#f5f5f5;
font-weight: bold;
font-size: 13px;
color: #888;
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
transition: all 200ms ease-out;
}
.back:hover {
background: #eee;
}
.page-container {
float: left;
width: 100%;
margin: 0 auto 300px;
position: relative;
}
.panorama {
width: 100%;
float: left;
margin-top: -5px;
height: 750px;
position: relative;
}
.panorama .credit {
background: rgba(0,0,0,0.2);
color: white;
font-size: 12px;
text-align: center;
position: absolute;
bottom: 0;
right: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
float: right;
}
</style>
<script>
// Use $(window).load() on live site instead of document ready. This is for the purpose of running locally only
$(document).ready(function(){
$(".panorama").panorama_viewer({
repeat: true
});
});
</script>
</head>
<body>
<div class="wrapper">
<div class="main">
<div class="header">
<h1>Universitas Samudra</h1>
<h2>Embed a Panorama Pictures on Your Website</h2>
</div>
</div>
<div class="panorama">
<img src="1.jpg">
</div>
</div>
</div>
</body>
</html>
0
2 Jawaban:
Jawaban Terpilih
kalau gambar tidak terdisplay
- pastikan lokasi gambar benar
- pastikan nama gambar benar
- klik kanan > inspect > cek di tab console ada tulisan error nya apa
2
