Setup basic style for individual image viewing.
This commit is contained in:
parent
74bebb570c
commit
ccd7abbf0e
2 changed files with 53 additions and 12 deletions
|
@ -19,6 +19,7 @@
|
|||
|
||||
html {
|
||||
background-color: #c0c0c0;
|
||||
background-image: url(../img/concrete_wall_3.png);
|
||||
min-height: 100%;
|
||||
position: relative;
|
||||
|
||||
|
@ -54,12 +55,13 @@ header {
|
|||
|
||||
header{
|
||||
background-color: #303030;
|
||||
position: fixed;
|
||||
background-image: url(../img/dark_circles.png);
|
||||
/*position: fixed;*/
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
height: 25px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 100000;
|
||||
/*z-index: 100000;*/
|
||||
|
||||
box-shadow: 0 1px 2px #303030;
|
||||
-webkit-box-shadow: 0 1px 2px #303030;
|
||||
|
@ -81,6 +83,7 @@ h1{
|
|||
|
||||
#dropbox {
|
||||
background-color: #a0a0a0;
|
||||
background-image: url(../img/brushed_alu_dark.png);
|
||||
|
||||
border-radius: 3px;
|
||||
position: relative;
|
||||
|
@ -182,7 +185,8 @@ h1{
|
|||
}
|
||||
|
||||
#dropbox .progress {
|
||||
background-color: #2586d0;
|
||||
background-color: #c0c0c0;
|
||||
background-image: url(../img/concrete_wall_3.png);
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
|
@ -218,3 +222,32 @@ h1{
|
|||
#dropbox .linkHolder input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
/*-------------------------
|
||||
Uploaded Image
|
||||
--------------------------*/
|
||||
|
||||
#imageContainer {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-top: 25px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.image {
|
||||
max-width: 920px;
|
||||
}
|
||||
|
||||
#message {
|
||||
background-color: #a0a0a0;
|
||||
background-image: url(../img/brushed_alu_dark.png);
|
||||
|
||||
border-radius: 3px;
|
||||
margin: auto;
|
||||
overflow: hidden;
|
||||
width: 600px;
|
||||
padding: 10px;
|
||||
|
||||
box-shadow: 0 0 4px rgba(0,0,0,0.3) inset,0 -3px 2px rgba(0,0,0,0.1);
|
||||
}
|
22
index.php
22
index.php
|
@ -8,22 +8,24 @@ if($id == '' ) {
|
|||
$content = 'id not set';
|
||||
} else {
|
||||
if(!is_numeric($id) || $id <= 0) {
|
||||
$content = 'This image does not exist: bad id format (' . $id . ')';
|
||||
$message = 'This image does not exist: bad id format (' . $id . ')';
|
||||
} else {
|
||||
$db = mysqli_init();
|
||||
$db->real_connect($conf->hostname, $conf->username, $conf->password, $conf->database);
|
||||
|
||||
$query = "SELECT extension, created FROM screens WHERE id = $id";
|
||||
$query = "SELECT extension, created, original FROM screens WHERE id = $id";
|
||||
$result = $db->query($query);
|
||||
|
||||
if($result->num_rows == 0) {
|
||||
$content = 'This image does not exist: not in database';
|
||||
$message = 'This image does not exist: not in database';
|
||||
} else {
|
||||
// load tags
|
||||
|
||||
$image = $result->fetch_object();
|
||||
$content = '<img src="uploads/' . $id . '.' . $image->extension . '" />';
|
||||
$content .= '<br/>Created on: ' . $image->created;
|
||||
$imageOutput = '<img src="uploads/' . $id . '.' . $image->extension . '" class="image" />';
|
||||
$message = 'Uploaded on: ' . $image->created;
|
||||
$message .= '<br/>Original name: ' . $image->original;
|
||||
$message .= '<br/>View Raw: <a href="uploads/' . $id . '.' . $image->extension . '">'. $id . '.' . $image->extension . '</a>';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -45,9 +47,15 @@ if($id == '' ) {
|
|||
<header>
|
||||
<h1>title or navigation or something</h1>
|
||||
</header>
|
||||
<?if (isset($imageOutput)) { ?>
|
||||
<div id="imageContainer">
|
||||
<?php echo $imageOutput; ?>
|
||||
</div>
|
||||
<?php } ?>
|
||||
<div id="message">
|
||||
<?php echo $message; ?>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 200px;">
|
||||
<?php echo $content; ?>
|
||||
</div>
|
||||
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
|
||||
|
|
Loading…
Reference in a new issue