I want to cycle some images... Any help would be great

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
Cloud_Battery
Forum Newbie
Posts: 3
Joined: Wed Sep 24, 2008 12:59 am

I want to cycle some images... Any help would be great

Post by Cloud_Battery »

Hi people.

This is the website http://www.creativestar.co.nz/clients/amber/

I am creating a website for a friend it is in its early stages so none of the buttons work and the colors are a bit off but, i thought it would be cool to have this "quick view" feature where people could cycle through a few pictures and click on them to go to a page including more information.

My PHP knowledge is still at the PHP for dummies stage, but this is what I want hope somebody can help.

Every time the page loads in the quick view there is 1 random image showing from about 10 different images. If someone is interested they click on the image and it goes to a different page bypassing the gallery page.
The arrows will have to load the previous|next picture and cycle through the 10 different pictures without having to refresh the page.

Is this difficult ?

Thanks
User avatar
pcoder
Forum Contributor
Posts: 230
Joined: Fri Nov 03, 2006 5:19 am

Re: I want to cycle some images... Any help would be great

Post by pcoder »

I think this is not the PHP related stuff.
For this, better to use Adobe Flash.
Cloud_Battery
Forum Newbie
Posts: 3
Joined: Wed Sep 24, 2008 12:59 am

Re: I want to cycle some images... Any help would be great

Post by Cloud_Battery »

I could... But i am looking for alternatives that don't require a plug in.

Is this not possible in PHP ?
gethinw
Forum Newbie
Posts: 16
Joined: Tue Sep 23, 2008 4:02 am

Re: I want to cycle some images... Any help would be great

Post by gethinw »

PHP won't do that directly - if you don't want the page to reload you need to use client-side scripting such as javascript rather than server-side scripting such as php. There are millions of tutorials and examples of how to change images using javascript - google will point you in the right direction.
Darkzaelus
Forum Commoner
Posts: 94
Joined: Tue Sep 09, 2008 7:02 am

Re: I want to cycle some images... Any help would be great

Post by Darkzaelus »

It is possible. First you would need to get an array of filenames, which can be gotten with this handy piece of code: http://www.phpjabbers.com/ask91-read-fi ... g-php.html.
Then you will need to generate a random number between 0 and the size of the said array -1. Then, set the variable holding the image path as the index of the array, which is generated by the random number. I use mt_rand() as it faster than rand(), but both do the same job.

Code: Select all

 
$image_file_path = '/home/user/www/path/'; - this is the full server path to your images folder
 
$d = dir($image_file_path) or die("Wrong path: $image_file_path");
while (false !== ($entry = $d->read())) {
if($entry != '.' && $entry != '..' && !is_dir($dir.$entry)) 
$Images[] = $entry;
}
$d->close();
$random=mt_rand(0,sizeof($Images)-1);
$image_path=$Images[$random];
 
This will select a random image when loaded. Then yes, you will need javascript to go through the images.

Cheers,

Darkzaelus
Cloud_Battery
Forum Newbie
Posts: 3
Joined: Wed Sep 24, 2008 12:59 am

Re: I want to cycle some images... Any help would be great

Post by Cloud_Battery »

I managed to get this far using the code you gave me and inserting

Code: Select all

<img src="images/cycle/<?php echo $image_path ?>" alt="" />
where i want the picture.

http://www.creativestar.co.nz/clients/amber/index.php

What would I add to the buttons to make it scroll to the previous|next pic without them being random ?

Thanks
Darkzaelus
Forum Commoner
Posts: 94
Joined: Tue Sep 09, 2008 7:02 am

Re: I want to cycle some images... Any help would be great

Post by Darkzaelus »

Create a hidden field that holds the index of the current image. You will need to create a javscript array holding all the filenames, and then when you click on each button, increment the index counter, and change the source of the image tag:

Code: Select all

 
<img src="images/cycle/TestA.jpg" alt="" /> //TO::
<img src="images/cycle/TestA.jpg" alt="" id="img"/>
 
Hope this helps.

Cheers,

Darkzaelus.
Post Reply