SimplePortal

Customization => Blocks and Modifications => Block Requests => Topic started by: SMiller on March 09, 2014, 01:21:23 PM

Title: Advance slideshow with click
Post by: SMiller 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?

Title: Re: Advance slideshow with click
Post by: SMiller 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?

Title: Polite bump
Post by: SMiller on March 14, 2014, 09:42:04 PM

 :whistle:

Title: Re: Advance slideshow with click
Post by: Chen Zhen 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.

Title: Thank!
Post by: SMiller on March 21, 2014, 05:46:41 PM

@Underdog,

Thanks a million plus one! It werks fantastic!

 :D

Title: How about this?
Post by: SMiller 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