Login

**Timbow** · 2012-11-16, 21:16:35

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

leonku · 2012-11-16, 21:55:07

s_path = '<?php get_theme_url(); ?>/img/';

**Timbow** · 2012-11-16, 22:53:22

(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.

Carlos · 2012-11-17, 00:43:18

Code:
$s_path = get_theme_url(false).'/img/';

**Timbow** · (This post was last modified: 2012-11-17, 01:09:51 by Timbow.)

(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 = [    ];

Carlos · (This post was last modified: 2012-11-17, 01:48:05 by Carlos.)

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'

    ];

**Timbow** · 2012-11-17, 04:08:16

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.

Carlos · (This post was last modified: 2012-11-17, 04:20:05 by Carlos.)

Code:
$s_path = GSTHEMESPATH.'img/';

***shawn_a*** · 2012-11-17, 04:25:30

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);
?>
    ]; 

**Timbow** · (This post was last modified: 2012-11-17, 04:31:43 by Timbow.)

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.

Carlos · (This post was last modified: 2012-11-17, 04:31:42 by Carlos.)

@shawn_a
Yeah I realized how a while ago :-) but anyway this is javascript, with some php inside.

***shawn_a*** · 2012-11-17, 04:39:50

heh all the same.
I wonder if we can get syntax highlighting working for normal code tags.
hmm

Carlos · (This post was last modified: 2012-11-17, 04:56:54 by Carlos.)

@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-style: none;
    list-style-type: none;
    margin: 3px 0 0 0;
    padding: 0;
} 

**Timbow** · 2012-11-17, 05:15:00

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.

Carlos · 2012-11-17, 05:16:45

@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...)

**Timbow** · 2012-11-17, 05:26:18

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...

**Timbow** · 2012-12-24, 21:08:25

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.

Login
Username:
Password:	Lost Password?
	Remember me