Menu
Hello this is my first post here and i have to say that your posts in this forum have been very helpful for my projects. At the moment I’m working on a thumbnail generator as you can see bellow we retrieve a json object decode it which has thumbnail information in it sizes, dimensions, urls, media urls, etc, etc. so far the code is as follows:
this is the page that will display the results and includes an other php file in it.
[code=html]<!DOCTYPE html>
<html>
<head>
<title>Results</title>
<style type=”text/css”>
html, body{
margin:0px;
padding:0px;
}
#rs_ls{
margin: 0px;
padding-bottom: 0px;
padding-right: 0px;
padding-left: 0px;
padding-top: 0px;
height: 520px;
width: 100%;
position: absolute;
border: 1px #104E8B solid;
overflow-y: scroll;
overflow-x: hidden;
right: 0px;
bottom: 25px;
display:block;
}
.sp_ls{
}
.img_ls{
-webkit-padding-start: 0px;
margin: 0px;
padding: 0px;
width:100%;
display:inline;
}
.img_li{
display:inline-block;
margin:0px 0px 20px 20px;
overflow:hidden;
vertical-align: middle;
}
.a_tmb{
display:block;
}
.img_c{
display:inline-block;
}
.img_r{
background-color: #f0f0f0;
padding:5px;
border:1px #DFDFDF solid;
}
.img_r:hover{
background-color: #f0f0f0;
border-color:#104E8B;
}
</style>
<script src=”Js/jQuery.js” type=”text/javascript”></script>
<script src=”Js/test.js”type=”text/javascript”></script>
<script type=”text/javascript”>
</script>
</head>
<body>
<div id=’rs_ls’>
<?php include “getMedia.php”?>
</div>
</body>
</html>
Here is the getMedia php file that gets the json obj and dispays the results inside the previous div.
[code=php]<?php
$APPID = “BING APP ID HERE”;
$Query = $_GET[“Query”];
$request = ‘http://api.search.live.net/json.aspx?Appid=’ . $APPID . ‘&sources=image&adult=off&Image.Offset=0&image.Count=50&Adult=Off&query=’ . urlencode($Query) . “”;
$response = file_get_contents($request);
$jsonobj = json_decode($response);
//echo var_dump($jsonobj);
writeHTML($jsonobj);
function resizeElement($eleWidth, $eleHeight, $target) {
if ($eleHeight < $target) {
$newHeight = $eleHeight;
$newWidth = $eleWidth;
} else {
//if ($eleWidth > $eleHeight) {
// $percentage = ($target / $eleWidth);
//} else {
$percentage = ($target / $eleHeight);
//}
$newWidth = number_format(round($eleWidth * $percentage, 0, PHP_ROUND_HALF_EVEN), 0);
$newHeight = number_format(round($eleHeight * $percentage, 0,PHP_ROUND_HALF_EVEN), 0);
}
if($newWidth < $target){
$leftMargin = ($target – $newWidth) / 2;
}else{
$leftMargin = 0;
}
$results = array($newWidth, $newHeight, $leftMargin);
return $results;
}
function writeHTML($jsonobj) {
echo “<span class=’sp_ls’>”;
echo “<ul class=’img_ls’>”;
foreach ($jsonobj->SearchResponse->Image->Results as $value) {
$newDims = resizeElement($value->Thumbnail->Width, $value->Thumbnail->Height, 88);
$newWidth = $newDims[0];
$newHeight = $newDims[1];
$newMargin = $newDims[2];
$newWidthTotal = $newWidth + 10 + 2;
$newHeightTotal = $newHeight + 10 + 2;
$style_c = “style=”width:” . $newWidthTotal . “px;height:” . $newHeightTotal . “px;””;
$style_li = “style=”width:” . $newWidthTotal . “px;height:” . $newHeightTotal . “px;margin-left:” . $newMargin . “px;””;
$style_a = “style=”width:” . $newWidthTotal . “px;height:” . $newHeightTotal . “px;””;
$style_i = “style=”width:” . $newWidth. “px;height:” . $newHeight . “px;””;
$imgAttr = “width=”” . $newWidth . “” height=”” . $newHeight . “””;
echo “<li class=’img_li'” . $style_c . “>”;
echo “<span class=’img_c’ ” . $style_c . “>”;
echo “<a class=’a_tmb'” . $style_a . ” href='” . $value->MediaUrl . “‘><img class=’img_r’ ” . $style_i . ” ” . $imgAttr . ” src='” . $value->Thumbnail->Url . “‘ onmouseover=’expandImg(” . $value->Width . “,” . $value->Height . “,” . $value->Thumbnail->Width . “,” . $value->Thumbnail->Height . “,” . $value->FileSize . “,this)’ onmouseout=’shrinkImg(this)’></a>”;
echo “</span>”;
echo “</li>”;
}
echo “</ul>”;
echo “</span>”;
}
?>
the result of this is a list of 50 images inside the div. All of the images are lined up on the left side of the div(rs_ls) as expected. The question is how would it be possible to present these thumbs in such a way that they ll be aligned from the right side too? something like google image results. I’m assuming that google uses some javascript that resizes the images everytime you mess with your window.Besides that would it be possible to align the results with php + css manipulation?
Thank you in advance for your time. ?