FRIHOST • FORUMS • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

PHP Image Questions

   Frihost Forum Index -> Scripting -> Php and MySQL
 


eday2010
While I search for answers in FriHost for other questions I have, I thought I wouls start seeking answers t otwo more questions.

1. I know there are ample random image scripts in PHP lying around. They all seem to change the image on a page refresh. Is there one that will change the image after a given amount of time, like 20 seconds without the page needing to be refreshed? I know that Javascript does this, but I am trying to stay away from Javascript. Also is there a method in PHP to have the images transition from one to the next (cross-fade type thing). Again, I know Javascript does this, but...

2. I will be having an image gallery that is laid out differently than it is now. I am going to have an area at the top, with thumbnails under that, and when the user rolls over the thumbnail, the image appears in the area above (and if they click the image, it opens in a new window). I have a script to do this in Javascript, but I would like to do it in PHP if possible. Is it possible? I have not found anything online for this nor the first question.

Sometimes I wonder why I am building such a complicated site. And then I remember that it's to learn how to do it Razz
Sappho
I think you are missing one important thing and thats that PHP is a SERVER side script, so anything PHP do you need to get to the client and therefore you will need to refresh the page. Unless you have some client side script that will handle the data change and refresh only what you want to.

Javascript is client side script so of course its all possible to do in Javascript as you said.
Philip
i think u need to write a iframe inside your html code that link to other html that contain images.

and don;t forget to put this

<meta http-equiv="refresh" content="1200;URL=cek.php"> between <head> tag , this would make the html pages inside the iframe auto refresh, so the image contained that php will refreshed also. Wink

ot there is other way, like using javascript, but u need your browser to download all images first ! and switch it using by a timer using setTimeout function. Wink
dac_nip
you can do it in php with the help of javasvript for the time delay. Very Happy use AJAX. atleast, you're doing the image processing in PHP. just wondering, why don't you want to use javascript? for what reason.
eday2010
I don't want to use Javascript because it's disabled by some viewers, plus I find that Javascript code is often super long, and I want to keep the amount of script as low as possible since I want to do so many things.

I will look into AJAX since I will almost certainly be using it to target links in my navigation area to change the content of only one of my divs.

I can use the PHP suggested by Philip to do the refresh that I want and that would be simple enough. The reason I asked about cross-fading is because part of the changing image is the border, so if one image faded into another, then it wouldn't be noticable. It might be an AJAX/Javascript task afterall Smile.

I was just asking if it was possible to do Javascript type things with PHP because I know PHP is very powerful.
Esch
First of all, AJAX stands for "Asynchronous Javascript And XML" -- it's just Javascript with the use of the XmlHttpRequest object so you can get information from the server without visibly refreshing the page. In any case, you don't need it here, really.

To resolve some confusion about PHP, PHP is a *server-side* language that simply outputs data to the user (be it a page, or an image, or whatever else PHP could be used to process). Once the user has received the page, PHP's role is finished (until the user requests a new page, of course). This means that it can only change the page on a user refresh. It has no control over what happens when the user is simply viewing a page; you need a client-side scripting language like Javascript to do things here (which PHP can include in the page, since it controls what information the page contains, but it's still Javascript at work and not PHP).

Heh, finally, to address your question, you'd be best served by including an array of images in the page output via PHP, and using Javascript to loop through that array and change your image; here's a brief example (note that I haven't tested this -- it's only to give you an idea):

Code:

<?php
// delay before a new image is shown; set to whatever you like
$delay = 10000;
// you'll be filling this array with PHP; use whichever method you prefer
$images = array("myfile1.jpg", "dog.jpg", "cat.jpg");

// here we're inserting javascript into the page that the user's browser
// will execute upon receiving it
print "<script language=\"Javascript\">\n";
print "delay = ".$delay."; // delay before new image is displayed\n";
print "cur_image = 0; // global var storing current image\n";
print "image_array = new Array(); // global var storing filenames\n";

$i = 0;
foreach($images as $image)
{
   print "image_array[".($i++)."] = '".$image."';\n";
}

print "function loopImages() {\n";
print "   var img = document.getElementById('img_placer');\n";
print "   img.src = image_array[(cur_image++)%(image_array.length)];\n";
print "   setTimeout('loopImages();', delay);\n";
print "}\n";

print "</script>\n";

<!-- ...etc... -->

<body onload="loopImages();">

<img id="img_placer">

</body>

?>


That'll loop through the images you specified in a PHP array with some delay; if you want to display images randomly, it's not much harder (just use a random number rather than incrementing cur_image).

Hope that helps.
kv
You can still refresh a page without using java script. Just put this line in the head of your html.

Code:
<meta http-equiv="refresh" content="10">


The page will refresh every 10 seconds.
Sappho
kv wrote:
You can still refresh a page without using java script. Just put this line in the head of your html.

Code:
<meta http-equiv="refresh" content="10">


The page will refresh every 10 seconds.


Problem was that he didn't want to refresh it, he just want to change the image content. Wink
Philip
eday2010 wrote:

I will look into AJAX since I will almost certainly be using it to target links in my navigation area to change the content of only one of my divs.


AJAX is using javascript though for accesing server sites. Cool

Quote:
Problem was that he didn't want to refresh it, he just want to change the image content


Put that code and image at a iframe, it should be work Wink
and dont targeting parent since it will refresh whole pages ok Smile
eday2010
I still haven't decided what I will be doing, but thanks for all the suggestions Smile. I will probably try out a few methods and use the one that works best. I know that PHP is powerful, but I wasn't sure what it could and could not do. I have found Javascripts for rotate through images and cross-fade bewteen them. Perfect, but the script is enormous. I also found PHP scripts to plop out a random image on each page refresh, and it's 5 lines long. I just wanted to see if there was a happy medium.

I knew that AJAX was Javascript based, but for what I wanted, it did the job, so I'd have to go with it. For the random image, I wasn't sure what could do what Smile. The code Esch created looks interesting, so I will be trying that one out for sure.

From the answers, I am concluding that I will need javascript for the function of rolling over a thumbnail and having a larger version pop up in an area above the thumbnails, as specified in my second question Smile
bladesage
eday2010 wrote:
I still haven't decided what I will be doing, but thanks for all the suggestions Smile. I will probably try out a few methods and use the one that works best. I know that PHP is powerful, but I wasn't sure what it could and could not do. I have found Javascripts for rotate through images and cross-fade bewteen them. Perfect, but the script is enormous. I also found PHP scripts to plop out a random image on each page refresh, and it's 5 lines long. I just wanted to see if there was a happy medium.

I knew that AJAX was Javascript based, but for what I wanted, it did the job, so I'd have to go with it. For the random image, I wasn't sure what could do what Smile. The code Esch created looks interesting, so I will be trying that one out for sure.

From the answers, I am concluding that I will need javascript for the function of rolling over a thumbnail and having a larger version pop up in an area above the thumbnails, as specified in my second question Smile


ImageMagick has all the tools you could possibly need. It can be run from any language that can execute programs outside the script, PHP being my favorite. It has the power to animate images dynamically (with proper instructions from PHP), cross-fade (I believe), interlace, convert image formats, and animate a whole directory of images in just a couple commands.

Most of the more popular webhosts (such as Frihost Smile) already have ImageMagick installed, and you need only ask the path to the ImageMagick files, and run simple functions like
Code:
exec('usr/bin/animate (parameters here)');


If you need help with figuring out how to do exactly what you need, visit their site or ask an ImageMagick expert here on Frihost's forums (I'd reccommend Jamatu), but not me, as I'm still trying to work out the whole parameters thing.
kv
Sappho wrote:
kv wrote:
You can still refresh a page without using java script. Just put this line in the head of your html.

Code:
<meta http-equiv="refresh" content="10">


The page will refresh every 10 seconds.


Problem was that he didn't want to refresh it, he just want to change the image content. Wink


From eday2010's question, I thought he just wanted to avoid javascript. It doesn't look like he is avoiding refresh altogether.
Sappho
kv wrote:
Sappho wrote:
kv wrote:
You can still refresh a page without using java script. Just put this line in the head of your html.

Code:
<meta http-equiv="refresh" content="10">


The page will refresh every 10 seconds.


Problem was that he didn't want to refresh it, he just want to change the image content. Wink


From eday2010's question, I thought he just wanted to avoid javascript. It doesn't look like he is avoiding refresh altogether.


Maybe you should reread his question. Wink Here you go:

eday2010 wrote:
Is there one that will change the image after a given amount of time, like 20 seconds without the page needing to be refreshed?
eday2010
Haha! I was basically asking about a Javascript-type function that would fade from ont image to another every x-seconds instead of refreshing the div the image is in. Looks like what I want is a javascript task, although I will be checking out ImageMagick to see what that's about. Of course, if I can get the Javascript effects I want using CSS, I'd go with that for sure!
Sappho
eday2010 wrote:
Haha! I was basically asking about a Javascript-type function that would fade from ont image to another every x-seconds instead of refreshing the div the image is in. Looks like what I want is a javascript task, although I will be checking out ImageMagick to see what that's about. Of course, if I can get the Javascript effects I want using CSS, I'd go with that for sure!


I wonder why you didn't consider Flash, it sure can communicate with PHP and doesn't need refresh. Wink I am aware that some ppl can have Flash disabled but as you said some do have JS disabled as well. Smile
eday2010
I didn't consider Flash because I am going to have so many images to be randomly rotated through that the file would become enormous. I am by no means an expert in Flash, so if there is a way for it to call up files externally, I don't know how to do it.

I want the files loaded as they're used, otherwise it will take forever for the script of whatever to load Razz. My menu is already Flash, and there will be a text based menu at the bottom for those who are flash handicapped.

I still have some research to do before I decide on how to go about this task Smile
Sappho
eday2010 wrote:
I didn't consider Flash because I am going to have so many images to be randomly rotated through that the file would become enormous. I am by no means an expert in Flash, so if there is a way for it to call up files externally, I don't know how to do it.


Of course there are functions for it, you can use obsolete loadMovie method of MovieClip class or the new MovieClipLoader class and its methods. The latter also supports events for loading progress handling. Wink

It would be pretty easy Actionscript code to implement loading of XML list from PHP which would contain list of images to be rotated and then usage of beforementioned methods to load em.

I am aware that for a Flash beginner it may be a problem, but anyway you can try to learn what i said using google for example, or you can simply offer $Frih in Marketplace section and someone will maybe do it for you, if there is someone here skilled enough and has nothing to do.

I would suggest you to use Flash since you are already using Flash for menu so you no longer consider non Flash users anyway.
eday2010
I have considered non-Flash users by having the menu links at the bottom of the page too.

The page is basically my online portfolio, so most of the people seeing it will have Flash and JavaScript enabled. Basically I want to use whatever is fastest and smallest (in code and size). I'll search Google for the method of using the MovieClipLoader and the loading of an XML list. I would rather do it myself than have it done for me. I'm not so much as Flash beginner, it's just that I haven't used it in a few years before starting my very basic and rudimentary menu. That. of course will be improved once I get it's functionality working. But that's another issue Smile.
Reply to topic    Frihost Forum Index -> Scripting -> Php and MySQL

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.