SimplePortal
Customization => Blocks and Modifications => Block Requests => Topic started 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.
$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...
[img id="myImage1" src="button1.gif" onmouseclick="document.getElementById('myImage1').src='button1pressed.gif';"]
or maybe even this...
<a href="<?php echo $images[0]['url']; ?>" rel="fancybox">
<img src="<?php echo $images[0]['url']; ?>" /></a>
Or something like this
$("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...
$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?
-
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.
$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?
-
:whistle:
-
SMiller,
$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.
-
@Underdog,
Thanks a million plus one! It werks fantastic!
:D
-
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.
$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