GetSimple Support Forum

Full Version: Need some help with javascript & php please re Slideshow in a theme
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
I want to improve my Holford theme with an integral slideshow as a header image. I have found what appears to be a suitable script for a php environment here:
http://www.softcomplex.com/products/tigra_fader/
I am keen to use this script because a user can just put any number of any images, pngs, gifs, with any name and any size in the folder in the theme and they will be used in the slideshow, and the settings allow its use as a random image selector as well as a slide fader.

Anyway. This is the sample page provided to show the implementation of the script:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <title>Tigra Fader Sample #4 - Automatically show all image files in the directory</title>

    <!-- link Tigra Fader script file in the header or anywhere before the first slide show initialization -->
    <script language="JavaScript" src="tFader.js"></script>
</head>
<body>

<!-- at the location where you want slideshow to appear configure and initialize the instance -->
<script language="JavaScript">

    // configuration structure
    var A_TPL = {
        // randomize the array each time page loads
        'random' : false,
        // number of transparency changes during the transition
        //    increase for smoother transition, reduce for less CPU usage
        'steps' : 20,
        // transition duration in seconds
        'transtime': .5,
        // slide time in seconds
        'slidetime': 1,
        // width of the slide (optional)
        'width' : 300,
        // height of the slide (optional)
        'height': 225,
        // alt text for the image (optional)
        'alt' : 'Sample Tigra Fader Slideshow',
        // css class assigned to the slide <img> (optional)
        'css' : ''
    };

    // list of images to display
    var A_ITEMS = [<?php
        $s_path = 'img/';
        $a_types = array ('jpg', 'gif', 'jpeg', 'png');
        $a_images = array ();
        $h_dir = opendir($s_path);
        while ($s_file = readdir($h_dir)) {
            $s_type = strtolower(substr(strrchr($s_file, '.'), 1));
            if (in_array($s_type, $a_types))
                array_push($a_images, "\n\t\t'$s_path$s_file'");
        }
        closedir($h_dir);
        sort($a_images);
        echo join(',', $a_images);
?>

    ];
    // fader initialization    
    var mySlideShow = new tFader (A_ITEMS, A_TPL);

</script>

</body>
</html>
So in the <head> section of my template.php I add the line as above but altered to
Code:
<script language="JavaScript" src="<?php get_theme_url(); ?>/tFader.js"></script>
And I can see I have to do something similar in the script configuration where it is
Code:
// list of images to display
    var A_ITEMS = [<?php
        $s_path = 'img/';  ....
To correct the path to the img folder.

And that's where I have been stuck for hours. I know php nested in php is a no no, and I know the php will need to be in double quotes if it is to be read as a string... but I cannot by thought, struggle or trial and error get the script to find the img folder.

Thanks
s_path = '<?php get_theme_url(); ?>/img/';
(2012-11-16, 21:55:07)leonku Wrote: [ -> ]s_path = '<?php get_theme_url(); ?>/img/';

Thanks but I am still getting an error - 'last element of the items structure is undefined'

And isn't that giving me php tags inside of php tags?

Actually if I write the absolute path out in full (http://localhost/Holford/theme/Holford/img/) I still get the error so I don't know what is going on there.

I will try uploading it maybe it is a wampserver thing.
Code:
$s_path = get_theme_url(false).'/img/';
(2012-11-17, 00:43:18)Carlos Wrote: [ -> ]
Code:
$s_path = get_theme_url(false).'/img/';

Thanks but still
"last element of the items structure is undefined"

and when I look at the page source it shows
Code:
var A_ITEMS = [    ];
Sorry, I answered too quickly, I hadn't understood.

What about this?
Code:
    var A_ITEMS = [
        '<?php get_theme_url(); ?>/img/pic01.jpg',
        /* ... */
        '<?php get_theme_url(); ?>/img/pic09.jpg'
    ];
Yes, if I manually write the filenames into the array the slideshow works alright, but the php is supposed to read the files in the folder and generate the array. That's what I can't get to work.

It's this section that I don't know what to do with. I always get an empty array, even when I define $s_path = 'http://fullpathtoimages';
Code:
// list of images to display
    var A_ITEMS = [<?php
        $s_path = 'img/';
        $a_types = array ('jpg', 'gif', 'jpeg', 'png');
        $a_images = array ();
        $h_dir = opendir($s_path);
        while ($s_file = readdir($h_dir)) {
            $s_type = strtolower(substr(strrchr($s_file, '.'), 1));
            if (in_array($s_type, $a_types))
                array_push($a_images, "\n\t\t'$s_path$s_file'");
        }
        closedir($h_dir);
        sort($a_images);
        echo join(',', $a_images);
?>
    ];
It works a treat in the standalone sample page but when I put it into my GS template.php I get nothing.
Code:
$s_path = GSTHEMESPATH.'img/';
You guys know you can use php code in here right ?

PHP Code:
// list of images to display
    
var A_ITEMS = [<?php
        $s_path 
'img/';
        
$a_types = array ('jpg''gif''jpeg''png');
        
$a_images = array ();
        
$h_dir opendir($s_path);
        while (
$s_file readdir($h_dir)) {
            
$s_type strtolower(substr(strrchr($s_file'.'), 1));
            if (
in_array($s_type$a_types))
                
array_push($a_images"\n\t\t'$s_path$s_file'");
        }
        
closedir($h_dir);
        
sort($a_images);
        echo 
join(','$a_images);
?>
    ]; 
sorry Carlos, I really appreciate your help but it was me who had not understood and asked the wrong question to start with. The problem is not defining the path to the images, I was doing that right in the first place probably.

The problem is that the php which generates the javascript array which is the list of images doesn't work when I paste it into my GS template - it returns an empty array even when I am sure I have the path correct.

But maybe I am out of my depth.
Maybe I should just paddle my own canoe.
@shawn_a
Yeah I realized how a while ago :-) but anyway this is javascript, with some php inside.
heh all the same.
I wonder if we can get syntax highlighting working for normal code tags.
hmm
@Timbow

But, have you tried with GSTHEMESPATH?
You should use something like that to access the filesystem to get the list of files. You probably can't do it with paths like 'http://...' (unless your server allows that)

(2012-11-17, 04:39:50)shawn_a Wrote: [ -> ]heh all the same.

Ah yes, it's a simple highlighting that seems to work for both...
(Codemirror doesn't work the same if it's js or php/html...)

(2012-11-17, 04:39:50)shawn_a Wrote: [ -> ]I wonder if we can get syntax highlighting working for normal code tags.

It seems that it doesn't work so well for css code:

PHP Code:
#nav ul {
    
list-stylenone;
    list-
style-typenone;
    
margin3px 0 0 0;
    
padding0;

I had a careful look at it all and tried out the
PHP Code:
$s_path GSTHEMESPATH.'img/'
and
PHP Code:
$s_path GSTHEMESPATH./'img/'
and
PHP Code:
$s_path 'GSTHEMESPATH./img/'
but I am still getting nowhere with it.
@Timbow

I realised that GSTHEMESPATH returns the 'themes' folder path, not the theme's path.

So maybe with this:
PHP Code:
$s_path GSTHEMESPATH.'MyThemeFolder/img/'

(Not sure if there's an easy way to get the current theme folder...)
give me a minute... you may have cracked it...

the images aren't displaying.. but I have the 'alt' text.. let me see??

The php is generating an array!

But wampserver has fouled it up with backslashes.

This will be easily rectified. I will let you know...
Actually I didn't get anywhere with that stuff after all. But Carlos - thanks for your help, I really appreciate it. I may have another try. Happy Xmas too.