I'm using some slideshow code I found. I got it up an running and shows the pictures great. The TV I'm running the slideshow on is turned 90 degrees. But it's only physically turned. It's not turned in the OS. So I need to rotate all the images 90 degrees
I can't seem to get the code right to flip it. I've tried PHP but my limited knowledge is preventing me from getting it right.
Here's the code I'm using
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Slideshow</title><!-- -->
<script src="scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="scripts/jquery.cycle.lite.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#myslides').cycle({
fit: 1, pause: 1, timeout: 4000
});
});
</script>
<link rel="stylesheet" href="styles/dynamicslides.css" type="text/css" media="screen" />
</head>
<body>
<?php
$directory = 'images/slideshow';
try {
// Styling for images
echo '<div id="myslides">';
foreach ( new DirectoryIterator($directory) as $item ) {
if ($item->isFile()) {
$path = $directory . '/' . $item;
echo '<img src="' . $path . '"/>';
}
}
echo '</div>';
}
catch(Exception $e) {
echo 'No images found for this slideshow.<br />';
}
?>
</body>
</html>
there are mutiple kind of "rotation", but I think the one you want is simply "dislpay the image at 90 degrees".
In that case, I'd suggest CSS over PHP. Make sure the rotation doesn't truncate any of you image.
#90Image
{
/* Firefox */
-moz-transform:rotate(90deg);
/* Safari and Chrome */
-webkit-transform:rotate(90deg);
/* Opera */
-o-transform:rotate(90deg);
/* IE9 */
-ms-transform:rotate(90deg);
}
and modify you code to:
echo '<img id="90Image" src="' . $path . '"/>';
Related
My page is split in 4 sections, and each section is generated by a method of a php object.
The first section shows just a text and works well, the second and the fourth nothing (so far).
My problem is with the third section that is supposed to show an embedded Google spreadsheet.
The php page creates the correct html code, in fact the title text shows up correctly, but the iframe shows a message from Google saying that the requested file doesn't exist.
Then I press Ctrl+U to open the page source (I'm using Firefox), copy the text, paste it in a new test.html, save it to the server, open the new test.html in Firefox, and now Google likes it and the iframe shows up correctly.
Why do I have two pages with identical source, but one works and the other doesn't?
Here is the full php code for the page:
<?php
$filename = "parameters-test.txt";
$file_size = filesize($filename);
$handle = fopen($filename, "r");
$content = fread($handle, $file_size);
fclose($handle);
$content = str_replace('\"', '"', $content); // ??? why do I need this? And do I need only this? Isn't there some decode function?
$alldata = json_decode($content);
$pages = $alldata->page;
$parameters = $alldata->parameters[0];
$websiteTitle = $parameters->websiteTitle;
$sheets = array();
foreach($pages as $page) {
$sheet = new Sheet();
$sheet->load($page);
array_push($sheets, $sheet);
}
if(isset($_GET["pageId"])) $currentSheet = $_GET["pageId"];
else $currentSheet = 0; // this is the Welcome page
class Sheet {
public $definition = '';
public function load($parameters) {
$this->definition = $parameters;
}
public function showTitle() {
echo '<h1>';
echo $this->definition->title;
echo '</h1>';
echo "\n";
}
public function showHeader() {
if($this->definition->heightHeader) {
echo '<iframe width="';
echo $this->definition->width;
echo '" height="';
echo $this->definition->heightHeader;
echo '" frameborder="0" src="https://docs.google.com/spreadsheet/pub?key=';
echo $this->definition->documentId;
echo '&single=true&gid=';
echo $this->definition->headerSheetId;
echo '&output=html&widget=false&gridlines=false&range=';
echo str_replace(':', '%3AD', $this->definition->rangeHeader);
echo '"></iframe><br />';
echo "\n";
}
}
public function showBody() {
echo '<iframe width="';
echo $this->definition->width;
echo '" height="';
echo $this->definition->heightBody;
echo '" frameborder="0" src="https://docs.google.com/spreadsheet/pub?key=';
echo $this->definition->documentId;
echo '&single=true&gid=';
echo $this->definition->bodySheetId;
echo '&output=html&widget=false&gridlines=false&range=';
echo str_replace(':', '%3AD', $this->definition->rangeBody);
echo '"></iframe><br />';
echo "\n";
}
public function showLinks() {
}
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="favicon.ico" rel="icon" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="index.css" />
<title><?php echo $websiteTitle; ?></title>
</head>
<body>
<?php
$sheets[$currentSheet]->showTitle();
$sheets[$currentSheet]->showHeader();
$sheets[$currentSheet]->showBody();
$sheets[$currentSheet]->showLinks();
?>
</body>
</html>
And here is the html generated, which only works if it comes out of a test.html, not out of a test.php:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="favicon.ico" rel="icon" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="index.css" />
<title>this is the title</title>
</head>
<body>
<h1>Hotshots pool league</h1>
<iframe width="500" height="300" frameborder="0" src="https://docs.google.com/spreadsheet/pub?key=0AqEyi7du69LQdHRJXzViMlhEdHVYY2E4X1hnZ21EQ2c&single=true&gid=12&output=html&widget=false&gridlines=false&range=A1%3ADZ999"></iframe><br />
</body>
</html>
I am using a PHP variable called LeagueLink. When the user is not logged in I want the variable to read the text (Already have a league...) followed by a link to a popup window. So far it is displaying correctly except when I click on the link nothing happens. I think I just have a syntax error from mixing so much PHP and JS, but I can't figure out where. Please help make the popup window link work if you can...
<?php
// this starts the session
session_start();
$_SESSION['userid'];
$message = "";
if ($_SESSION['userid'] == "") {
$message = "You must create an account or sign in to play!";
$LeagueLink = "Already have a league...<a href='JavaScript:newPopup(\"http://www.yourfantasyfootballreality.com/signin.php\");' class='two'>Sign In</a>";
} else {
$message = "Hello, " .$_SESSION['userid'] . " make your picks!";
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="js/jquery-easing-1.3.pack.js"></script>
<script type="text/javascript" src="js/jquery-easing-compatibility.1.2.pack.js"></script>
<script type="text/javascript" src="js/coda-slider.1.1.1.pack.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="icon" href="http://www.indiana.edu/favicon.ico" />
<title>YourFantasyFootballReality</title>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
<body>
<?=$message?>
<?=$LeagueLink?>
<?=$ActionLink?>
</body>
</html>
JavaScript:newPopup is a function that needs to be defined.
I think what you are looking for is the following: You don't need javascript to open the page in a new window. Just set the target property of the link to _blank.
$LeagueLink = "Already have a league...<a href='http://www.yourfantasyfootballreality.com/signin.php' target='_blank' class='two'>Sign In</a>";
EDIT: If you want it popping up, rather than opening in a new tab, you can resize it immediately after it is spawned. Add the following to your javascript.
function newPopup()
{
var url='http://www.yourfantasyfootballreality.com/signin.php';
windowProperties = "toolbar=no,menubar=no,scrollbars=no,statusbar=no,height=500px,width=500px,left=50%,top=50%";
popWin = window.open(url,'newWin',windowProperties);
}
and keep your PHP the same as before.
Hello I'm making a website, and I want the albums and photos from a facebook page to be shown in a box.
Here is an example
I want the albums and photos to be shown just like this, in a slide, instead of finding the it automatically takes the photos from any decided album.
Example page
Here is the code used in the example page, this takes random pictures stored in a folder and displays them, same method should be used for the facebook album. This is where I'm stuck.
The code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>*title*</title>
<script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="scripts/jquery.cycle.all.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#myslides').cycle({
fit: 1, pause: 2, timeout: 200
});
});
</script>
<link rel="stylesheet" href="styles/dynamicslides.css" type="text/css" media="screen" />
</head>
<body>
<?php
$directory = 'images/slideshow/';
try {
// Styling for images
echo "<div id=\"myslides\">";
foreach ( new DirectoryIterator($directory) as $item ) {
if ($item->isFile()) {
$path = $directory . "/" . $item;
echo "<img src=\"" . $path . "\" />";
}
}
echo "</div>";
}
catch(Exception $e) {
echo 'No images found for this slideshow.<br />';
}
?>
</body>
</html>
Hope you understand what I'm trying to say here :)
I have little knowledge about this, so be easy one me.
Sorry for my bad English.
From what i have understood
Give a name tag to each of the photos in an album.. when u click on one album all you need to do is run the a loop for that name tag.
If this doesn't suffice, explain your problem clearly. Some code will actually help understand the problem better
how to rad the names of all files saved in the folder on the server using php.
and then make a call to that php page using ajax to display that list of files
This is the code to display file list:
$dir = '/tmp'; // your directory path
$files = scandir($dir);
foreach ($files as $file)
{
if (is_file($file))
{
echo $file . '<br />';
}
}
This is the HTML/JavaScript to display the file list (if you use jQuery which is highly advised):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>File list</title>
</head>
<body>
<div id="content"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$("#content").load('<your listing PHP URL>');
</script>
</body>
</html>
I have a simple upload form working in PHP (works in web) and also am able to capture a photo from iPhone using PhoneGap (base64) and displaying it on the device.
But I can't figure out how to upload it to my server with PHP.
Here's the code running in PHP:
INDEX.PHP
<?
//print_r($_POST);
if($_POST["action"] == "Upload Image")
{
unset($imagename);
if(!isset($_FILES) && isset($HTTP_POST_FILES))
$_FILES = $HTTP_POST_FILES;
if(!isset($_FILES['image_file']))
$error["image_file"] = "An image was not found.";
$imagename = basename($_FILES['image_file']['name']);
//echo $imagename;
if(empty($imagename))
$error["imagename"] = "The name of the image was not found.";
if(empty($error))
{
$newimage = "images/" . $imagename;
//echo $newimage;
$result = #move_uploaded_file($_FILES['image_file']['tmp_name'], $newimage);
if(empty($result))
$error["result"] = "There was an error moving the uploaded file.";
}
}
include("upload_form.php");
if(is_array($error))
{
while(list($key, $val) = each($error))
{
echo $val;
echo "<br>\n";
}
}
include("list_images.php");
?>
And here are the two includes...
UPLOAD_FORM.PHP
<form method="POST" enctype="multipart/form-data" name="image_upload_form" action="<?$_SERVER["PHP_SELF"];?>">
<p><input type="file" name="image_file" size="20" value="beautiful.jpg"></p>
<p><input type="submit" value="Upload Image" name="action"></p>
</form>
LIST_IMAGES.PHP
<?
$handle = #opendir("images");
if(!empty($handle))
{
while(false !== ($file = readdir($handle)))
{
if(is_file("images/" . $file))
echo '<img src="images/' . $file . '"><br><br>';
}
}
closedir($handle);
?>
Here's the code running on iPhone 4 (iOS 4.2) in PhoneGap
INDEX.HTML (running in WWW directory in PhoneGap)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<!-- Change this if you want to allow scaling -->
<meta name="viewport" content="width=default-width; user-scalable=yes" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link type="text/css" rel="stylesheet" href="style.css">
<!-- iPad/iPhone specific css below, add after your main css >
<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" type="text/css" />
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />
-->
<!-- If you application is targeting iOS BEFORE 4.0 you MUST put json2.js from http://www.JSON.org/json2.js into your www directory and include it here -->
<script type="text/javascript" charset="utf-8" src="phonegap.0.9.4.min.js"></script>
<script type="text/javascript" charset="utf-8">
// If you want to prevent dragging, uncomment this section
/*
function preventBehavior(e)
{
e.preventDefault();
};
document.addEventListener("touchmove", preventBehavior, false);
*/
function onBodyLoad()
{
document.addEventListener("deviceready",onDeviceReady,false);
}
/* When this function is called, PhoneGap has been initialized and is ready to roll */
function onDeviceReady()
{
// do your thing!
}
function getPicture(sourceType)
{
var options = { quality: 10 };
if (sourceType != undefined) {
options["sourceType"] = sourceType;
}
// if no sourceType specified, the default is CAMERA
navigator.camera.getPicture(getPicture_Success, null, options);
};
function getPicture_Success(imageData)
{
//alert("getpic success");
document.getElementById("test_img").src = "data:image/jpeg;base64," + imageData;
}
</script>
</head>
<body onload="onBodyLoad()" marginheight=0 marginwidth=0 leftmargin=0 topmargin=0>
<h1>Camera</h1>
<img style="width:80px;height:120px" id="test_img" src="" />
<p>
<!-- for testing, add the buttons below -->
<button onclick="getPicture()">From Camera</button>
<p>
<button onclick="getPicture(PictureSourceType.PHOTO_LIBRARY)">From Photo Library</button>
</body>
</html>
</html>
Incidentally, while I can grab a fresh picture from the device camera, I've been completely unable to get images from the Library... if anyone knows how to do that, I'd appreciate feedback there too.
Had anyone been able to upload photos from PhoneGap/iPhone to PHP? Any source code on both sides of this would be GREATLY appreciated.
The Base64 option is really just for ease of displaying on the webpage. if it's not needed then don't use it.
i'd say your best option is to use FILE_URI instead of DATA_URL for Camera.DestinationType
check out http://docs.phonegap.com/phonegap_camera_camera.md.html for more info
Use options PHOTOLIBRARY or SAVEDPHOTOALBUM to get existing pictures from your phone. See more at http://docs.phonegap.com/en/1.4.0/phonegap_camera_camera.md.html#Camera.
In phonegap:
$.post(URLReport,{
pic1: document.getElementById("image1").src.slice(23),
}, function(xml) {
//stuff to do on success
});
On server:
if (isset($_POST['pic1'])) {
$pic = base64_decode( $_POST['pic1']);
if (strlen($pic) > 9 ) {
$fh = fopen(yourfilename, 'w') or die("can't open file");
fwrite($fh, $pic);
fclose($fh);
}
}
Easy peasy.