PDA

View Full Version : Resolved Flexi Slideshow Tweak



theremotedr
05-11-2015, 09:50 AM
I have installed the Flexi Slideshow from DD,
http://www.dynamicdrive.com/dynamicindex14/flexislide.htm

Here it is on my page,
http://www.theremotedoctor.co.uk/for_sale_slideshow.html

Can it be tweaked so it plays from a folder as opposed to adding numerous links for it to show the images.
I mean there is say 100 images at present that i would like to use but as the list gets bigger some new images will be forgotten to be added to the slideshow.
If it could play from a folder then remembering to add to slideshow every time would not be necessary.
The images do not even need to play in any order so the script can play any random image it likes.

Thanks.

jscheuer1
05-11-2015, 02:59 PM
We would need server side code like PHP or asp to fetch the filenames of a folder and perform a simple test(s) to see whether or not they're images. I have code like that for both PHP and asp if either is available for your use on the server. Is there PHP or asp availability on the server?

Otherwise, you could have javascript fetch the files, but it cannot read the file listings of a folder. So, for it to work, each filename would have to be either numerically and/or alphabetically sequential in a predictable fashion, like:

car_1.jpg
car_2.jpg
car_3.jpg

and so on. There could be no gaps in the sequence because the first image that wouldn't load would end the search. Or you could have a limit, pick a random amount from the files which would still have to be sequential but could have gaps to fill out that limit, which would have to always be less than the total number of images available.

theremotedr
05-11-2015, 04:03 PM
I am not sure so i have just asked the support team.
As soon as i know i will post a reply here.

The file names at the moment are like so.
AUDI001.jpg
AUDI002.jpg
BMW001.jpg
BMW002.jpg
FORD001.jpg
etc etc

theremotedr
05-11-2015, 04:37 PM
Here is there reply,

We have PHP available with version 5.2, 5.3 and 5.4 but I'm afraid as this is a Linux server we don't have an option for ASP. I should clarify that Linux is the only operating system that we offer for our hosting and I'm sorry if that causes any inconvenience.

jscheuer1
05-11-2015, 04:39 PM
Those names could be more sequential. There are gaps between the makes that could only be accounted for by listing each make in the code. And they're not what I see in the source code. There I see hosted images (photobucket) with these filenames (which are definitely not sequential):

advert-slideshow.jpg
accord-saloon-slideshow.jpg
accord-tourer-slideshow.jpg
3button-key-remote-slideshow.jpg
civic-slideshow.jpg
crv-slideshow.jpg
2button-key-remote-slideshow.jpg
frv-slideshow.jpg
jazz-slideshow.jpg
dr-slideshow.jpg

But none of that will matter if you can host these images on the theremotedoctor server and have PHP or asp available. So let me know.

theremotedr
05-11-2015, 04:42 PM
The photobucket links are just there as it allows the slideshow to be seen working.
This is when i thought about the folder option.
Once the folder option is set up the photobucket links on this page will be removed.

theremotedr
05-11-2015, 05:59 PM
Hi,
I would like the php slideshow please.

jscheuer1
05-11-2015, 07:17 PM
Yeah, OK. I missed that the server had PHP. I was answering at about the same time that you posted that. Let's first make sure the PHP is working/active/turned on. Save this file as test.php and put it on the server and navigate to it:


<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

</head>
<body>
<pre>
<?php
$dir = './';
$files1 = scandir($dir);
print_r($files1);
?>
</pre>
</body>
</html>

It should show something like so:


Array
(
[0] => .
[1] => ..
[2] => 12345.htm
[3] => 14
[4] => AHH44Mckye6.swf
[5] => ASongOfSpring_1.swf
[6] => CompPlansShow.htm
[7] => CompPlansShow2.htm
[8] => MSG-3_first_image_large.jpg
[9] => YT-NoAds
[10] => addimage-but.htm
[11] => addimage-but.htm.php
[12] => ajfmrf
[13] => alphaimag . . .

listing out the files and folders in the folder where it is located.

theremotedr
05-11-2015, 07:35 PM
Ok
I have done that.
http://www.theremotedoctor.co.uk/test.php.html
Shows 500 internal server error.

Please take a look.

theremotedr
05-11-2015, 07:47 PM
I have sent a message to the server support team to check it.
I will message here when i get reply from them.

Beverleyh
05-11-2015, 07:57 PM
The file should be named test.php not test.php.html

theremotedr
05-11-2015, 08:11 PM
The html is put on automatically.
How do i change it

theremotedr
05-11-2015, 08:19 PM
Ok i got it.

Take a look now http://www.theremotedoctor.co.uk/test.php

jscheuer1
05-11-2015, 10:32 PM
OK, that worked, which folder has these images you are talking about?

theremotedr
05-11-2015, 10:34 PM
They are on my pc,is that ok ?

Or must they be in a folder on photobucket ?

theremotedr
05-11-2015, 10:42 PM
On my pc they are in a folder called photos
The path is Ian,Z THE REMOTE DOCTOR,m-images,photos

jscheuer1
05-11-2015, 11:26 PM
They have to be on the theremotedoctor.co.uk server. We can use m-images/photos/ for this. You can put this file in there too, call it - variableslides.php


<?php
Header("content-type: application/x-javascript");
function returnimages(){
$photovar = isset($_GET['var'])? $_GET['var'] : 'variableslide';
if (!preg_match('#^[a-z_][a-z0-9_]+$#i', $photovar)){
echo 'alert("var name must be at least two characters and contain only letters, numbers, or underscore, and cannot start with a number")';
die();
}
$dirname = '.';
$path = str_replace(' ', '%20', str_replace($_SERVER['DOCUMENT_ROOT'], '', str_replace('\\', '/', getcwd())));
$base = 'http://' . preg_replace('#/{2,}#', '/', "{$_SERVER["SERVER_NAME"]}/$path/");
$dirname = '.';
$pattern = '#\.(jpg|jpeg|png|gif|bmp)$#i';
$files = array();
if($handle = opendir($dirname)){
clearstatcache();
while(false !== ($file = readdir($handle))){
if(preg_match($pattern, $file)){
$files[$file] = filemtime($file);
}
}
closedir($handle);
}
arsort($files, SORT_NUMERIC);
$files = array_keys($files);
return "var $photovar = [\n ['$base" . implode("', '', ''],\n ['$base", $files) . "', '', '']\n];";
}

echo returnimages();
die();
?>

And then, on the for_sale_slideshow.html page, change:


<!--SLIDESHOW BELOW-->
<script language="JavaScript1.2">

/***********************************************
* Flexi Slideshow- Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

var variableslide=new Array()

//variableslide[x]=["path to image", "OPTIONAL link for image", "OPTIONAL text description (supports HTML tags)"]
variableslide[0]=["http://i670.photobucket.com/albums/vv62/ipbr21054/PROGRAMMING/advert-slideshow.jpg", "", ""]
variableslide[1]=["http://i670.photobucket.com/albums/vv62/ipbr21054/PROGRAMMING/accord-saloon-slideshow.jpg", "", ""]
variableslide[2]=["http://i670.photobucket.com/albums/vv62/ipbr21054/PROGRAMMING/accord-tourer-slideshow.jpg", "", ""]
variableslide[3]=["http://i670.photobucket.com/albums/vv62/ipbr21054/PROGRAMMING/3button-key-remote-slideshow.jpg", "", ""]
variableslide[4]=["http://i670.photobucket.com/albums/vv62/ipbr21054/PROGRAMMING/civic-slideshow.jpg", "", ""]
variableslide[5]=["http://i670.photobucket.com/albums/vv62/ipbr21054/PROGRAMMING/crv-slideshow.jpg", "", ""]
variableslide[6]=["http://i670.photobucket.com/albums/vv62/ipbr21054/PROGRAMMING/2button-key-remote-slideshow.jpg", "", ""]
variableslide[7]=["http://i670.photobucket.com/albums/vv62/ipbr21054/PROGRAMMING/frv-slideshow.jpg", "", ""]
variableslide[8]=["http://i670.photobucket.com/albums/vv62/ipbr21054/PROGRAMMING/jazz-slideshow.jpg", "", ""]
variableslide[9]=["http://i670.photobucket.com/albums/vv62/ipbr21054/PROGRAMMING/dr-slideshow.jpg", "", ""]


//configure the below 3 variables to set the dimension/background color of the slideshow

to:


<!--SLIDESHOW BELOW-->
<script type="text/javascript" src="m-images/photos/variableslides.php"></script>
<script language="JavaScript1.2">

/***********************************************
* Flexi Slideshow- Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

//configure the below 3 variables to set the dimension/background color of the slideshow

theremotedr
05-12-2015, 09:15 AM
I have done the above but no slideshow.
Please could you check and advise.

http://www.theremotedoctor.co.uk/for_sale_slideshow.html

I also looked here http://www.theremotedoctor.co.uk/m-images/photos/variableslides.php

Thanks

jscheuer1
05-12-2015, 11:06 AM
The variableslides.php file looks like it has leading garbage and/or something added to it at the beginning. There cannot be anything added at the beginning of it. It must be only as shown inside the code block for it in my previous post.

Now, it's possible something was added by the server. But if anything was added by you or by your editor, that has to be removed. If it's the server, we will have to find a way to work around that or to get the server not to add it. But let's first make sure nothing has been added by you or your editor. To create the file for instance, use a plain text editor like NotePad.

theremotedr
05-12-2015, 11:26 AM
I did use notepad.
I will do it again now and report back in 5 minutes

theremotedr
05-12-2015, 11:35 AM
Deleted file then started again.
Checking in dream weaver the code is as shown like you advise BUT i see this message at the top of the screen.

See here http://i670.photobucket.com/albums/vv62/ipbr21054/FORUM%20POSTS/php.jpg

jscheuer1
05-12-2015, 11:46 AM
This file should never get near to dream weaver.

jscheuer1
05-12-2015, 11:47 AM
Anyways, it's still the same problem.

The problem looks like an invisible garbage character (a BOM maybe) or even just a space on a blank line or two are in there. Because it shows exactly what it's supposed to show, except there's an error message that content was sent before the header. However, that content cannot be seen.
If it still doesn't work, sometimes it doesn't matter that a javascript header is sent, and removing that might fix it, try:


<?php
function returnimages(){
$photovar = isset($_GET['var'])? $_GET['var'] : 'variableslide';
if (!preg_match('#^[a-z_][a-z0-9_]+$#i', $photovar)){
echo 'alert("var name must be at least two characters and contain only letters, numbers, or underscore, and cannot start with a number")';
die();
}
$dirname = '.';
$path = str_replace(' ', '%20', str_replace($_SERVER['DOCUMENT_ROOT'], '', str_replace('\\', '/', getcwd())));
$base = 'http://' . preg_replace('#/{2,}#', '/', "{$_SERVER["SERVER_NAME"]}/$path/");
$dirname = '.';
$pattern = '#\.(jpg|jpeg|png|gif|bmp)$#i';
$files = array();
if($handle = opendir($dirname)){
clearstatcache();
while(false !== ($file = readdir($handle))){
if(preg_match($pattern, $file)){
$files[$file] = filemtime($file);
}
}
closedir($handle);
}
arsort($files, SORT_NUMERIC);
$files = array_keys($files);
return "var $photovar = [\n ['$base" . implode("', '', ''],\n ['$base", $files) . "', '', '']\n];";
}

echo returnimages();
die();
?>

theremotedr
05-12-2015, 11:57 AM
I have now replaced the file with the new code shown above.
Looking on the page something is now working but now & then you see a broken image icon & its not flowing nice.

theremotedr
05-12-2015, 12:01 PM
I think the above was due to the first run.
Looking at it now seems ok,does it look ok at your end ?

I need to adjust speed i think.

jscheuer1
05-12-2015, 01:45 PM
Worked great here. I probably have a faster connection than you do. But that's something to think about. A different slideshow, or even a different approach with this one could attempt to preload the images so that first time through there would be fewer or possibly no broken image tokens, depending upon the speed of the connection. With a really poor connection, no amount of preloading will help, it might even hurt. But I think we can be happy with what we have.

As currently set, the images are I believe being shown in order of most recent to oldest. We can change that to have the opposite, or even use alphabetical in either ascending or descending order. Or we could randomize them, or we could take a random subset each time the page is shown.

Oh, yeah, and about the speed, that's up to you. It's pretty fast, but that has its merits. Folks will see that you have a wide inventory, but they might miss a particular item. If slowed, they might miss items too, out of boredom and switching away. I think fast is good here. But if you want to slow it down, you know where to do that, right? You use the (on the slideshow page):


//configure the below variable to determine the delay between image rotations (in miliseconds)
var slidedelay=700


Increase that number.

Oh, and you should get rid of that test.php file we made. It gives away information about the folder contents that probably shouldn't be made easily available to the public.

Also, I've checked. The server appears to be sending an overriding response header of mime type text/html for all .php files, which is not standard but understandable. It will limit what can be done with PHP on your site. Fortunately the browsers I've checked have no problem with it for a javascript. But Chrome notices. It might be an issue with some older browsers, or with some mobiles. Less so with mobiles though possible with them. It (the overriding mime type) is usually set in the server's control panel, and can also be set in .htaccess which I see (from test.php) exists in the root. Since I cannot see any of the details of this from here, it's still possible that some preceding content - apparently unseen, has crept into the file. But more than likely it's a server/site setting, as I've just been mentioning.

theremotedr
05-12-2015, 03:40 PM
Yep
Speed was 1000 but i changed it to 700
Having the images shown as random would be nice as my Honda items are numbered 1-42 so opposed to 1,2,3 etc etc if we use random at least it would be Honda001,Fiat001,Vw004,Mazda004 etc etc.
Can you advise please where/what i need to add/edit the code.

jscheuer1
05-12-2015, 03:58 PM
I just added this to the prior message, but I think you had already read it by the time I made the changes:

"Oh, and you should get rid of that test.php file we made. It gives away information about the folder contents that probably shouldn't be made easily available to the public.

Also, I've checked. The server appears to be sending an overriding response header of mime type text/html for all .php files, which is not standard but understandable. It will limit what can be done with PHP on your site. Fortunately the browsers I've checked have no problem with it for a javascript. But Chrome notices. It might be an issue with some older browsers, or with some mobiles. Less so with mobiles though possible with them. It (the overriding mime type) is usually set in the server's control panel, and can also be set in .htaccess which I see (from test.php) exists in the root. Since I cannot see any of the details of this from here, it's still possible that some preceding content - apparently unseen, has crept into the file. But more than likely it's a server/site setting, as I've just been mentioning."

As to randomizing, that's easy, add the highlighted on the slideshow page as shown:


<script language="JavaScript1.2">

/***********************************************
* Flexi Slideshow- Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
variableslide.sort(function(){return 0.5 - Math.random();});

//configure the below 3 variables to set the dimension/background color of the slideshow

var slidebgcolor='#ffffff'

theremotedr
05-12-2015, 04:10 PM
test.php now deleted.
Random now applied.

Just to put this topic to an end.
On some of my image logos on the site i use class="shadow"
Can a border with this class be added to the slideshow so the random images change within it ?
If so please advise where i need to apply it.

jscheuer1
05-12-2015, 05:59 PM
For the shadow add the highlighted as shown to the rotateimafes function in the on page script:


function rotateimages(){
contentcontainer='<center>'
if (variableslide[currentslide][1]!="")
contentcontainer+='<a href="'+variableslide[currentslide][1]+'">'
contentcontainer+='<img class="shadow" src="'+variableslide[currentslide][0]+'" border="0" vspace="3">'
if (variableslide[currentslide][1]!="")
contentcontainer+='</a>'
contentcontainer+='</center>'
if (variableslide[currentslide][2]!="")
contentcontainer+=variableslide[currentslide][2]

if (document.layers){
crossrotateobj.document.write(contentcontainer)
crossrotateobj.document.close()
}
else if (ie||dom)
crossrotateobj.innerHTML=contentcontainer
if (currentslide==variableslide.length-1) currentslide=0
else currentslide++
setTimeout("rotateimages()",slidedelay)
}


One other modification that I think would be good for now is here (also in the on page script and found just below the above function):


if (ie||dom)
document.write('<div id="slidedom" style="min-height: 491px; width: 100%; max-width: 650px; height: auto; float: left; background-color:'+slidebgcolor+'"></div>')

Since all of the images, or most at least seem to be that height, that will prevent the page from jumping occasionally between images. If you get/have taller images, you can increase the min-height. And, come to think of it, with the shadow, you might want to add another 3 or 5 px to accommodate that as well.

theremotedr
05-12-2015, 06:46 PM
Both the above now done.
Looking through the images 2 were slightly different size so now making them 640x480 like the others.