collapse

* Simple Portal Archived Forum

This is an Archive Forum.

The content in this forum may be out-of-date or have been superseded by newer information, and links in forum pages to other sites may not work.
This forum contains archives for future reference.

Visit our thread at Simple Machines Forum for current support.

SMF 2.1 users: EhPortal is a ported version of Simple Portal specifically designed for the SMF 2.1 branch.
Please visit web-develop.ca to download EhPortal and for its support.

* User Info

 
 
Welcome, Guest. Please login or register.

* Who's Online

  • Dot Guests: 530
  • Dot Hidden: 0
  • Dot Users: 0

There aren't any users online.

* Shoutbox

Refresh History
  • Shoutbox is not for support!
  • {OCS}MasterSeal: Yup, Still adore SP
    April 21, 2019, 07:08:06 PM
  • {OCS}MasterSeal: STILL love SP :)
    November 24, 2018, 05:05:50 AM
  • ♦ Ninja ZX-10RR ♦: <3 aegersz
    September 13, 2018, 03:36:09 PM
  • aegersz: I STILL <3 LOVE SimplePortal
    September 13, 2018, 07:11:39 AM
  • aegersz: o LOVE you guys - Simple Portal rocks !
    May 09, 2018, 05:18:59 AM
  • Chen Zhen: our apologies for the site being down.. please read server issues topic
    March 22, 2018, 05:32:38 AM
  • {OCS}MasterSeal: LOL PLEASE forget I just posted that. I found the answer in my own dang post back in 2015. lol sorry!
    July 04, 2017, 10:47:55 PM
  • {OCS}MasterSeal: I know this SB isnt' for support, but I just have a general question. Who would I contact to find out where SP stores its block info? Is it DB driven or files? I searched the site but came up with nothing. probably my fault any insight is appreciated.
    July 04, 2017, 10:43:36 PM
  • ♦ Ninja ZX-10RR ♦: Excuse me but what does Simpleportal have to deal with that?
    February 05, 2017, 08:21:14 PM
  • WhiteEagle: of course IMHO that site appears to be dead :(
    February 04, 2017, 01:08:05 PM
  • WhiteEagle: If I can get that, then I'll use it for that site...
    February 04, 2017, 01:07:35 PM
  • WhiteEagle: decided to not use SMF for any projects, unless I can get a copy of the premium version of the fanfiction archive plugin
    February 04, 2017, 01:06:54 PM
  • expertdecisions: cloudflare
    January 28, 2017, 08:01:47 AM
  • aegersz: SM release 2.0.13 !
    January 12, 2017, 06:00:13 AM
  • raffo: Tks Emanuele, even if I didn't understand the fix :D
    November 07, 2016, 02:01:20 AM
  • emanuele: [link]
    November 01, 2016, 12:43:50 PM
  • emanuele: raffo: the English support board is a good place. ;)
    November 01, 2016, 12:43:38 PM
  • raffo: Where can I find the fix for the shoutbox?
    November 01, 2016, 05:06:09 AM
  • {OCS}MasterSeal: To the SP team, I make a point to come here and thank you as much as possible for your work.  so again, THANK YOU!
    October 28, 2016, 10:38:05 AM
  • emanuele: That's indeed funny, the limit is present only in the patch and not the full install.
    October 22, 2016, 06:14:58 PM

* Recent Posts

Adding Forums Button to Nav bar by jirapon
[August 01, 2019, 09:07:12 AM]


Re: Board Icons by ♦ Ninja ZX-10RR ♦
[July 30, 2019, 04:03:41 PM]


MOVED: Czech translation???? by ♦ Ninja ZX-10RR ♦
[July 30, 2019, 03:04:51 PM]


Board Icons by jirapon
[July 30, 2019, 07:28:44 AM]


Re: Thankyou Simpleportal, by ♦ Ninja ZX-10RR ♦
[July 29, 2019, 09:41:29 AM]

Installation errors? Mod incompatibilities? Upgrade problems? Make your way over to the Install and Upgrade Support board for all your solutions!

Author Topic: Advance slideshow with click  (Read 6387 times)

0 Members and 1 Guest are viewing this topic.

Offline SMiller

  • Semi Newbie
  • *
  • Posts: 21
  • SMF Version: 2.0.9
  • SP Version: 2.3.6
Advance slideshow with click
« on: March 09, 2014, 01:21:23 PM »
Hi,

I'm using the following code in a php block for a slideshow. Currently it's on a timer, but I'd like it to advance only when the user clicks on the image. Any help?

Thanks.

Code: [Select]
$images = array(
    'http://mahjong.us.com/random/image1.png',
    'http://mahjong.us.com/random/image2.png',
    'http://mahjong.us.com/random/image3.png',
    'http://mahjong.us.com/random/image4.png',
);

$delay = 10;

$num_images = count($images);
echo '
<img id="slideshow" src="" / width=554>
<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>';

Edit to add:

Been doing some reading... and came across this...
Code: [Select]
[img id="myImage1" src="button1.gif" onmouseclick="document.getElementById('myImage1').src='button1pressed.gif';"]
or maybe even this...
Code: [Select]
<a href="<?php echo $images[0]['url']; ?>" rel="fancybox">
       <img src="<?php echo $images[0]['url']; ?>" /></a>

Or something like this
Code: [Select]
$("img").on("click", function() {
    changeImage(); // switch now
});

Anyway, I took out the timer, and tried a simple onclick arguement, but it doesn't advance the pictures as hoped...

Code: [Select]
$images = array(
    'http://mahjong.us.com/random/image1.png',
    'http://mahjong.us.com/random/image2.png',
    'http://mahjong.us.com/random/image3.png',
    'http://mahjong.us.com/random/image4.png',
);

$num_images = count($images);
echo '
<center><img id="slideshow" onclick="changeImage();" src="" / width=554></center>

<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, ';

    function changeImage()
    {
        if (current_image == num_images)
            current_image = 0;
        document.getElementById("slideshow").src = images[current_image];
        current_image = current_image + 1;
    }

changeImage();

    // ]]></script>';

I've played with these ideas... so apparently there is a way to do it... I just can't either of them to work. Any help?
« Last Edit: March 09, 2014, 08:32:12 PM by SMiller »

Offline SMiller

  • Semi Newbie
  • *
  • Posts: 21
  • SMF Version: 2.0.9
  • SP Version: 2.3.6
Re: Advance slideshow with click
« Reply #1 on: March 09, 2014, 10:18:51 PM »
Ok, I'm trying to make progress with this while I await someone who knows what they are doing :D

The following code runs fine (ie causes no error when the block loads in preview)... but when I click the image, I get the error that no url home.php exists on the server.

I THINK home.php actually needs to be the php block's address... but I don't know how to determine the address of the block simpleportal assigned to this php block to call it up there.

Code: [Select]
$images = array(
    'http://mahjong.us.com/random/image1.png',
    'http://mahjong.us.com/random/image2.png',
    'http://mahjong.us.com/random/image3.png',
    'http://mahjong.us.com/random/image4.png',
);

$num_images = count($images);
echo '
<center><a href="home.php" id="nextLink" onclick="changeImage();"><img id="slideshow" src="" / width=554></center>

<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, ';

function initLinks(){
    document.getElementById("slideshow").onclick = changeImage;
    }

    function changeImage()
    {
        if (current_image == num_images)
            current_image = 0;
        document.getElementById("slideshow").src = images[current_image];
        current_image = current_image + 1;
    }

initLinks();
changeImage();

    // ]]></script>';

Am I getting close?

Offline SMiller

  • Semi Newbie
  • *
  • Posts: 21
  • SMF Version: 2.0.9
  • SP Version: 2.3.6
Polite bump
« Reply #2 on: March 14, 2014, 09:42:04 PM »
 :whistle:

Offline Chen Zhen

  • The Underdog
  • Operations Manager
  • *
  • Posts: 1350
  • Gender: Male
  • Kinesis
    • WebDev
  • SMF Version: 2.1
  • EhPortal Version: 1.22
Re: Advance slideshow with click
« Reply #3 on: March 15, 2014, 12:48:25 AM »
SMiller,

Code: [Select]
$images = array(
    'http://mahjong.us.com/random/image1.png',
    'http://mahjong.us.com/random/image2.png',
    'http://mahjong.us.com/random/image3.png',
    'http://mahjong.us.com/random/image4.png',
);

echo '
<div class="centertext">
<img style="width:554px;height:400px;" id="slideshow" onclick="changeImage();" src="' . $images[0] . '" alt="" />
</div>
<script type="text/javascript"><!-- // --><![CDATA[
var images = [';

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

echo '
];
var current_image = 1;
var num_images = ', count($images), ';
var timer;

function changeImage()
{
document.getElementById("slideshow").src = images[current_image];
current_image = current_image == num_images-1 ? 0 : current_image+1;
}
// ]]></script>';

  The image locations you gave are bogus but I suppose that was purposeful. I could have put the actual array within the javascript itself but perhaps it is better this way if you want to query that data from your database.

Regards.
« Last Edit: March 15, 2014, 01:25:10 AM by Underdog »

Offline SMiller

  • Semi Newbie
  • *
  • Posts: 21
  • SMF Version: 2.0.9
  • SP Version: 2.3.6
Thank!
« Reply #4 on: March 21, 2014, 05:46:41 PM »
@Underdog,

Thanks a million plus one! It werks fantastic!

 :D

Offline SMiller

  • Semi Newbie
  • *
  • Posts: 21
  • SMF Version: 2.0.9
  • SP Version: 2.3.6
How about this?
« Reply #5 on: March 21, 2014, 08:16:34 PM »
Ok, Underdog, your code works great!

So I changed it a tad so that the slideshow STARTS with a click, and then runs on a timer until the show starts over... then it waits for another click before starting again.

Code: [Select]
$dir = '../slideshow/';
$images = glob($dir. '*.{jpg,jpeg,png,gif}', GLOB_BRACE);

$delay = 4;

echo '
<div class="centertext">
<img style="width:554px;height:400px;" id="slideshow" onclick="startShow();" src="' . $images[0] . '" alt="" />
</div>
<script type="text/javascript"><!-- // --><![CDATA[
var images = [';

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

echo '
];
var current_image = 0;
var num_images = ', count($images), ';

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

My code works as described... but is there a more elegant way to do it (such as assign an onclick ONLY to the first slide, and not to every slide)?

Thanks a million for getting this onclick feature working for me! Much obliged!

 :D 8) ;D