Making a facebook album slideshow with php, html? jquery? - php

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

Related

Rotate images from auto rotate using jquery cycle for Photo Slideshow

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 . '"/>';

PHP variable as Javascript popup not working

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.

how to read files saved on the server using php and make a call to that php page using ajax to display the list of files

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>

how do i implement a jquery background messages?

for example when you get a new badge on stack overflow, you get the notifaction message on the top, telling you have a new badge, it deos that on the backgroung!! is thier a toturial or article that can help me with this kind eventing updates!!
You should look into notifications such as jGrowl. The site has some samples to help you get going :)
EDIT
How will you be storing notifications? Within a DB? I will get back to you later - My lunch break is over for now :(
EDIT 2
Here is a basic example of how to get it working with php by declaring an array of messages which you could easily populate from a database. You could make this more advanced by using the other options offered by jGrowl such as stickies etc by using a multidimentional array to store such options and outputting the correct javascript.
<?php
$messages = array("This is a message", "And this is another", "etc...");
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jGrowl and PHP Test</title>
<link type="text/css" rel="stylesheet" href="jquery.jgrowl.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.jgrowl.js"></script>
<script type="text/javascript">
$(document).ready(function() {
<?php foreach ($messages as $message) { ?>
$.jGrowl("<?php echo $message; ?>", { life: 3000 });
<?php } ?>
});
</script>
</head>
<body>
</body>

How do I style a PHP form RESULTS page?

I've gota working form that when you click "submit" it takes you to a results page - all fine.
However, is it possible to add divs etc to make the page look a bit nicer? If so, how? At the moment when i add divs in it just ignores them!
Thanks,
Steph
<!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>
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico" />
<link rel="stylesheet" href="styleResults.css" type="text/css" media="all" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<TITLE>Ideo Accounting - Results</TITLE>
</head>
<body>
<H2>Results</H2>
<?
$customers = $_POST['customers'];
$suppliers = $_POST['suppliers'];
$bank = $_POST['bank'];
$creditcard = $_POST['creditcard'];
$totalqty = 0;
$totalamount = 0.00;
define("PRICE", 0.75);
$totalqty = $customers + $suppliers + $bank + $creditcard;
$totalamount = number_format($totalqty*PRICE, 2);
echo "<BR>\n";
echo "Total transactions: $totalqty<br>\n";
echo "Estimated monthly fee: £$totalamount<BR>\n";
?>
</body>
</html>
You can put any HTML styling elements in between the " double quotes after the echo statements, they will definitely not be ignored.
Look into your browser's "view source" page to see whether they get output or not. My guess is the divs you output have no CSS styling at all, so you won't see anything.
Code improvement suggestion:
It might be easier to work with the HTML if you change its structure a bit. Remove the three echo lines, and after the ?> add
<BR>
Total transactions: <?php echo $totalqty;?><br>
Estimated monthly fee: £<?php echo $totalamount;?><BR>
the PHP output is then part of your HTML code, and you can place divs and other elements as you please without having to take care not to break the PHP string. You can even move the <?php=$...?> snippets around, you just have to be careful that they stay intact.

Categories