Displaying full-screen images

I'm going to have to create the ability to display images. Not an automated slideshow, but I'll be grabbing a bunch of information from the database providing a directory where the image files are, and displaying them full screen.......

Questions:
The slideshow applications that display "full screen" - are they resizing to fit the space? The requirement is that the slides be 1024 px on the longest side. SO, on a 1024x768 monitor (or projector) they're NOT going to fit at 1024x768... I've got the resize set up already, so it's not a big deal, but is there some magical command in php that'll take a file of whatever size, and have it fit to the screen space in html?

Moving from slide to slide - I want to use the left and right arrows. How do I get html to do a "submit" from an arrow key and get back to php so I can grab the next image?

I'd like to run the slides in a separate window - one WITHOUT all the browser junk. Can I do this and control it from the browser?
If so, how? If NOT, can I at least run the slides in a separate tab? If so, how?

this is more to do with client side technologies and html

There's only so much data in an image, so if you try to re-size up then you'll loose quality. You could do this resize in the html - javascript could grab the screen size and alter the height and width attibutes.

It could be done server side as well, with the gd library, but it would still need the screen dimensions from a cookie or something and as you're not going to get any extra quality there's really no point

As for getting rid of all the browser crap, hit F11 and see what happens

The resizing isn't the problem... I've got all that covered. Nothing is going to be upsized. All images will come in as 1024 on the longest side, so any resizing will be to make them SMALLER.

Thanks for the F11 thing. That works good. DIFFERENTLY, of course, since on FF it clears the screen and on IE it leaves the status bar, but that's no big deal...

SO, ignore all the resizing stuff... Here's what I want to do:

Put up form - go through all the up-front stuff to get to the point where user hits a button to display images (this is already done)

One user hits button, create a new tab or new window or whatever, and programatically do the F11 so it's full-screen.

Display the image (this part is working fine)

Hit RIGHT arrow to go to next image - this needs to leave the form, go back to php to get the image, then display it

OR, hit LEFT arrow to go to previous image - same thing

When through the images, hit ESC or some other key to get rid of the tab or new window or whatever and be back on the form where they and hit another button to display different images............

--------------------

That's what I want to do. I need a couple things:

I've found POSSIBLY, how to create a new tab. Can I create a new window instead? If so, how?

How do I do the F11 from the program so my tab is full-screen?

How do I get the arrow keys and send whatever back to php? I found a little javascript (at least I THINK it's javascript) script (I put it below) that may do the keys, but I'm too javascript challenged to use it. Can someone tell me what it's doing, and if it's the right way to go, how to have it work? If not, can someone point me to something that'll work?

function keyControl(evnt){
if (!evnt) evnt = window.event;
if (evnt.which) {
evntkeycode = evnt.which;
}
else if (evnt.keyCode) {
evntkeycode = evnt.keyCode;
}
"; // ----- what does this thing with the "; do?

if($offset>0) echo " if(evntkeycode==37)
location.href=\"$priorPageLink\";
"; // ------- same question here - it looks like the end of the echo, but ?

if($offset+$maxperpage<sizeof($filter_files))
echo " if(evntkeycode==39)
location.href=\"$nextPageLink\";
";
echo "}

document.onkeyup = keyControl;

-------------

I'm GUESSING that what I want to do is somehow have javascript run, figure out left (37) or right (39) arrow, set a variable that'll come back in the post (hidden variable?), then somehow get out of the html form and back to php so I can process the variable? I can probably eventually fumble my way into setting the variable, but how do I leave the form and get back to php?

1024 was the "max resolution" 8 years ago maybe. My monitors here are 1600x1050, and at home they're even larger.

This is impossible, the best you can do is spawn a popup without the menus (the pop-up javascript function has options for this) and resize it to be the size of the monitor. Also, users absolutely hate this.

All of this can be handled by "key handling" in javascript. When the user presses a key, the onKeyPress event for the document body is triggered, and you handle it there. Don't think about it as "leaving the form, going to the PHP, and going back." For every image, also print the next and previous image IDs, so if the user hits the appropriate key you can just fetch the new URL. You'll never go back to the other window with the form in it, that's too difficult and unnecessary.

That javascript looks messy, google for a better one. "Key press handling javascript" should be good enough.

-Dan

not php related, but:

Touching on the screen re-sizing issue, how do sites like youtube and the bbc iplayer make their flash videos full size?

Flash is handled by an extension of the browser, it's not a "page level" element to my knowledge.

Hilariously enough, with the way my monitors are set up, making a youtube video full screen actually covers the OTHER monitor with video, leaving the "normal" sized video paused.

-Dan

If you link to jQuery you can use this key handling code:


What you'll need to do is fill in the part that say "redirect" so that it sends the user to the page of your choice. You can generate the "redirect" URLs using PHP as well if you want to embed IDs in it.


It's also pretty easy to get the dimension of the user's browser screen:



It's not possible to control whether you create a new tab or a new window, it depends on the browser's settings. However, this code will generate a new tab/window with minimal "junk":

Not to get into a urination festival here, but don't worry about the resolution issue....... Yeah, I KNOW monitors aren't 1024 these days... The two in front of me are running 1920 x 1200..... But, these won't be ON my monitors, or yours.... They'll be projected on a digital projector that's limited to 1024 x 768 (as is every one I've seen in any photo club meeting).....

>This is impossible, the best you can do is spawn a popup without the menus (the pop-up javascript function has options for this) and resize it to be the size of the monitor. Also, users absolutely hate this.

I found a chunk of javascript that'll do the "full screen", which I believe I can make work so when they hit the "display this set of images" button, it'll create a new window. It sort-of works - doesn't get rid of all the browser stuff, but reduces it. Buy, WHY would user's hate this? They're sitting in chairs looking at a projected image, and listening to some guy talk about it. I must be missing something here 'cause I'm not sure why they'd "hate this"? Can you elaborate?

>All of this can be handled by "key handling" in javascript. When the user presses a key, the onKeyPress event for the document body is triggered, and you handle it there. Don't think about it as "leaving the form, going to the PHP, and going back." For every image, also print the next and previous image IDs, so if the user hits the appropriate key you can just fetch the new URL. You'll never go back to the other window with the form in it, that's too difficult and unnecessary.

I'll try a different search, and I found the keyPress thing. But, I'm a bit lost on the processing again.......

I've got an array sitting in php. In that array is a file specification. The filespec points to an image file in a local directory on the client machine. CURRENTLY, I have a "next" and a "previous" button on the form that displays the images. User hits next, it does a submit, php knows it was a "next", increments a counter in the array, and the next image gets displayed.... All I want to do is substitute an arrow for the button. I'm looking for a way, apparently in javascript, to communicate that the right arrow key was pressed (39) to php so it can do exactly what it does now when the "next" button gets hit... I'll try the search you recommended.

When you say you're making a webpage in PHP and HTML...we assumed it would be a webpage and responded as such. Obviously if you're creating an application to be used on a specific device by a trained person your requirements are different. "Users" in the PHP forum are "random people viewing a website you're creating," not "people watching a slideshow in a dark room."

Use the key handling script given below, and alter your PHP page to handle GET as well as POST, that way you can just redirect to a new URL (with all the GET variables represented the same as your form post for "next" and "previous").

-Dan

Yeah, some pieces of this whole mess will have "normal" people doing data entry things in front of a browser, others will be displaying images to a group, and another will be a gallery to let users view images on their screens...
This is one of those "no good deed goes unpunished" situations... "Helping" a club "make a little thing to get competition entries on the Internet" instead of having one person enter the information using Access the way they've been for the last 5 years. And then it's another thing and another and another...

Anyhow, it looks like I can do a sort-of full-screen display, get arrow keys and such, so now all I need to figure out is how, from a javascript script do I do a submit or something that'll get me back to php.

Flash supports maximizing a view to true full-screen. Perhaps you could make a swf that serves as the gallery viewer, pulling its data from an XML file that your PHP generates. In fact, I'm pretty sure there are quite a few out there that does just this. The only thing that may be difficult to find is one that supports viewing in full screen.

OK, the "grunty" parts of this mess are set up........ I'm opening a form, getting the images to display (there are up to 6 sets), and have a table set up so the person running things can select which set to display..... All HAPPY.........

SO, on the form, the user presses the "run slideshow x" button.
It gets back to php, grabs the right set of images, and now I need to open/create a completely independent window...

I can do this from the form using a button with an
onClick="window.open('slideshowform.php', '', 'fullScreen=yes, alwaysRaised, scrollbars=no');"

This WORKS fine, but it doesn't do me any good because when I press the button I NEED TO GET BACK TO PHP to set up the show BEFORE opening the window... And when I use the button, the window opens (I presume) so fast, the php hasn't gotten the new show set up...

SO, is there a way for me to open an independent full-screen window from php so things are properly synchronized? OR, some way to have the php from the new window (there's a separate php file running behind the new form) synchronize with the old one?

You don't seem to understand how PHP (or client-server programming in general) works. When a user visits a PHP page, that page runs, and then dies. PHP forgets anything that happened on that page unless you store it somewhere else (like a database or the session). When the user visits another PHP page, that page runs and then dies, completely ignorant of where the user has been, how many pages they have visited, or how long they've been on the site.

In your example, slideshowform.php should show the previously selected slideshow. Store it in the session. If they're selecting a slideshow and THEN popping up the slideshowform page, use javascript to insert a GET variable into the window.open command so slideshowform.php knows which slideshow to display.

There is no "going back to PHP" in the sense that you're thinking of. You go to PHP, it returns text, then everything dies. The next page request is a completely new instance of the application, the only thing that ties PHP scripts together are GET, POST, a database, and the session.

-Dan

Yeah, I know...... The problem is coordination.... I'm setting a session variable in A when I hit the submit that's getting used in B, which is being opened by the onclick on the button in A... I'd set the stuff in B except that they're specific to the button that gets pressed and I don't know how to get that info to B.....

I put a submit button on B. It works.... I'd rather they coordinated on their own, but this works.