Topic: Slideshow or Image rotator

[zapiy]

I use a php slideshow on my smf1.1.10 and tp 1.03 site and i want to use a similar thing on my next site..

Which is smf 2.0 and simple portal (latest ver)

Cheers

[Nathaniel]

Put the code below into a custom PHP block.

Code: [Select]

$images = array(
    'image1_url',
    'image2_url',
    'image3_url',
    'image4_url',
);

$delay = 1;

$num_images = count($images);
echo '
<img id="slideshow" src="" />
<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
    var images = [';

for ($i = 0; $i < $num_images; $i++)
    echo '["', $images[$i], '"]', ($i == $num_images - 1) ? '' : ',';
   
echo '];
    var current_image = 0;
    var num_images = ', $num_images, ';
    var timer;

    function changeImage()
    {
        if (current_image == num_images)
            current_image = 0;
        document.getElementById("slideshow").src = images[current_image];
        current_image = current_image + 1;
        var timer = setTimeout("changeImage();", ', $delay * 1000, ');
    }

    changeImage();
    // ]]></script>';
Change the $delay variable to change the ammount of time between slides, change the $images variable to the list of image urls that you want to show.

[zapiy]

Nice one, works a treat.

[dang2k]

Dear sir,
I don't no how to insert image url  'image1_url' , please help me, Thanks you.

I have insert on Help.template.php file
$images = array(
$settings['image_url'] = "'/Big_set/b-picture1.jpg'",
$settings['image_url'] = "'/Big_set/b-picture1.jpg'",
$settings['image_url'] = "'/Big_set/b-picture1.jpg'",
$settings['image_url'] = "'/Big_set/b-picture1.jpg'",
);

$delay = 1;

$num_images = count($images);
echo '
<img id="slideshow" src="" />
<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
var images = [';

for ($i = 0; $i < $num_images; $i++)
echo '["', $images[$i], '"]', ($i == $num_images - 1) ? '' : ',';

echo '];
var current_image = 0;
var num_images = ', $num_images, ';
var timer;

function changeImage()
{
if (current_image == num_images)
current_image = 0;
document.getElementById("slideshow").src = images[current_image];
current_image = current_image + 1;
var timer = setTimeout("changeImage();", ', $delay * 1000, ');
}

changeImage();
// ]]></script>';

[Maarten]

Dear sir,
I don't no how to insert image url  'image1_url' , please help me, Thanks you.

I have insert on Help.template.php file
$images = array(
$settings['image_url'] = "'/Big_set/b-picture1.jpg'",
$settings['image_url'] = "'/Big_set/b-picture1.jpg'",
$settings['image_url'] = "'/Big_set/b-picture1.jpg'",
$settings['image_url'] = "'/Big_set/b-picture1.jpg'",
);

$delay = 1;

$num_images = count($images);
echo '
<img id="slideshow" src="" />
<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
var images = [';

for ($i = 0; $i < $num_images; $i++)
echo '["', $images[$i], '"]', ($i == $num_images - 1) ? '' : ',';

echo '];
var current_image = 0;
var num_images = ', $num_images, ';
var timer;

function changeImage()
{
if (current_image == num_images)
current_image = 0;
document.getElementById("slideshow").src = images[current_image];
current_image = current_image + 1;
var timer = setTimeout("changeImage();", ', $delay * 1000, ');
}

changeImage();
// ]]></script>';

Eey, I found the mistake?
$images = array(
$settings['image_url'] = "'/Big_set/b-picture1.jpg'",
$settings['image1_url'] = "'/Big_set/b-picture1.jpg'",
$settings['image2_url'] = "'/Big_set/b-picture1.jpg'",
$settings['image3_url'] = "'/Big_set/b-picture1.jpg'",
);

Idk what the script does, but you forgot to insert the numbers???

[Nathaniel]

Try:

Code: [Select]

$images = array(
    '/Big_set/b-picture1.jpg',
    '/Big_set/b-picture1.jpg',
    '/Big_set/b-picture1.jpg',
    '/Big_set/b-picture1.jpg',
);
for the images array part of the code.

[dang2k]

Dear Sir,
       I have alreday put the code follow your suggestion and it abnormal working because it not found image to display. In my opinion(not sure), the url in form of php is wrong?

note:
-I use SMF 10.1.11 and put the code on index.themplate.php
C:\AppServ\www\telemusic\Themes\ciziksehir\images\Big_set    -> image url
C:\AppServ\www\telemusic\Themes\ciziksehir\index.template.php  -> file script to insert

Please advice me how to correct. Thanks you.  (Sorry, I'm not advance in english)

$images = array(  '/Big_set/b-picture1.jpg', '/Big_set/b-picture2.jpg', '/Big_set/b-picture3.jpg', '/Big_set/b-picture4.jpg', );
$delay = 1;
$num_images = count($images);
echo '
<img id="slideshow" src="" />
<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
var images = [';
for ($i = 0; $i < $num_images; $i++)
echo '["', $images[$i], '"]', ($i == $num_images - 1) ? '' : ',';
echo '];
var current_image = 0;
var num_images = ', $num_images, ';
var timer;
function changeImage()
{
if (current_image == num_images)
current_image = 0;
document.getElementById("slideshow").src = images[current_image];
current_image = current_image + 1;
var timer = setTimeout("changeImage();", ', $delay * 1000, ');
}
changeImage();
// ]]></script>';

[Nathaniel]

"C:\AppServ\www\telemusic\Themes\ciziksehir\images\Big_set" is not a url, that is a file path.

A url looks like this 'http://www.site.com/Big_set/b-picture1.jpg' (which is what you currently have for the images array).

[dang2k]

Dear Nathaniel,

     Thanks you for your response. I'm just understand for the url is 'http://www.site.com/Big_set/b-picture1.jpg'.
So, if I would like to use image path how could I perform that?

Note: For the array(  '/Big_set/b-picture1.jpg', '/Big_set/b-picture2.jpg', '/Big_set/b-picture3.jpg', '/Big_set/b-picture4.jpg', ); is not work now.

[Nathaniel]

Try using the exact url for those images, like 'http://www.site.com/Big_set/b-picture1.jpg' instead of '/Big_set/b-picture1.jpg'. Make sure that the url for each image is correct. (you should be able to put that url into your browser and view the image with your browser)

[Ares]

could this code be change to get random images from a file basically set a file url not image url

[igirisjin]

Think this would make a good feature addition. At the moment there are only old posts with bits of pieces of code and references to outside links and files. I had to spend quite a bit of time to find a php script that would rotate images in a block for me. Edits and php files in folders - better if an easier setup via a standard block with options.

Would be nice to see a standard block for this as it is a very common feature of websites. Not just for the front page but thats the main one people want to use images to attract people to stay on the site.

Almost all CMSs offer a variety of mods for this - Joomla, Wordpress etc, but not much for SMF and they dont look so good. One portal I think comes with what looks like a sliding front page image banner. Also as an introduction for pages with categories like Joomla K2.

Block with options for:

Folder the files are in.
Type of rotation - refresh or time interval.
Rotation effect (if easy to implement - simple swap, slide, fade etc)

[teos]

I know this is an old topic, but I use this block at my site  . How can I center the images ?
Any guidance will be highly appreciated.

[igirisjin]

I use a php script for rotating images every time the page loads. You can find it in many locations on the internet - tiny portal, another smf portal also had an old topic about it.

Images go in a 'FOLDER-NAME' with the rotator.php script.
In the block all you need to do is this:

Code: [Select]

<p align="center"><img src="http://yourwebsite.com/FOLDER-NAME/rotate.php" alt="OCJ Photo" /></p>
The html  alignment tag centers everything.
There are settings that can be changed for the rotator - need to look for that. And there are many others out there you can try.

[teos]

Thanks igirisjin,
  Couldnt find the rotator.php ( tiny portal etc.) .  Can you pls attach the one you use ?

[igirisjin]

TPortal was a topic about it but if you search online you will find the same one with the script.

Here is my copy but you may need to search online for the settings details.

[teos]

Thanks.  Download link is not  working at tportal.

[AngelinaBelle]

There is an article on it, and the download available, at marcofolio.net
http://www.marcofolio.net/webdesign/php_random_image_rotation.html

[teos]

Thanks for the info Angelinabelle,
 Actually, I need the code here, because without refreshing I need to show several images.
Only problem with this code is to center the images in the block.
Can you help ?
 

[AngelinaBelle]

The rotator only shows one image at a time.
How did you get it to show two?
What does your block look like now?