Slideshow with text and links

10 posts by 2 authors in: Forums > CMS Builder
Last Post: May 18, 2011   (RSS)

By NigelGordijk - December 23, 2010 - edited: December 23, 2010

Hi, there.

I'm working on a client's site that has a six-image slideshow on the homepage. Here's a hand-coded version of the page: http://www.tomlinsonelitehockey.com/index-02.shtml. And this is the code I'm using (sourced from DynamicDrive.com):

<SCRIPT TYPE="text/javascript" SRC="fadeslideshow.js"></SCRIPT>

<SCRIPT TYPE="text/javascript">

var mygallery=new fadeSlideShow({
wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
dimensions: [756, 261], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["images-slides/main-image-home-01.jpg", "", "", "<a href='index.shtml' class='aWhite'>Caption #1</a>"],
["images-slides/main-image-home-02.jpg", "", "", "<a href='sign.shtml' class='aWhite'>Reach your goals! Sign up today for our Summer 2011 programs.</a>"],
["images-slides/main-image-home-03.jpg", "", "", "<a href='newsPage.php?Introducing_Tomlinson_Elite_Hockey_s_new_logo-32/' class='aWhite'>New year, new programs, and a new logo...</a>"],
["images-slides/main-image-home-04.jpg", "", "", "<a href='index.shtml' class='aWhite'>Caption #4</a>"],
["images-slides/main-image-home-05.jpg", "", "", "<a href='index.shtml' class='aWhite'>Caption #5</a>"],
["images-slides/main-image-home-06.jpg", "", "", "<a href='index.shtml' class='aWhite'>Caption #6</a>"] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:3500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "always",
togglerid: "fadeshow2toggler"
})

</SCRIPT>

I'm trying to set this up so that the images, text and links can be changed by the client using CMS Builder (they're using a really old version - 1.09). I've substituted code generated by CMSB where I thought it should go, so that it now looks like this:
<script type="text/javascript" src="fadeslideshow.js"></script>

<!-- STEP1: Load Record (Paste this above other step) -->
<?php
require_once "/home/tomhoc/public_html/cmsAdmin/lib/viewer_functions.php";
$options = array(); // NOTE: see online documentation for more details on these options
$options['tableName'] = 'slideshow'; // (REQUIRED) MySQL tablename to list record from. Example: "article";
$options['recordNum'] = ''; // (optional) Record number to display. Example: "1"; Defaults to number on end of url, then 1
$options['where'] = ''; // (ADVANCED) MySQL WHERE conditions to use INSTEAD of recordNum to look up record. Example: "fieldname = 'value'"
$record = getRecord($options);
?>
<!-- /STEP1: Load Record -->

<!-- STEP2: Display Record (Paste this where you want your record displayed and re-arrange fields) -->
<?php if ($record): ?>
<?php endif ?>

<?php if (empty($record)): ?>
<?php endif ?>
<!-- STEP2: /Display Record -->


<script type="text/javascript">

var mygallery=new fadeSlideShow({
wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
dimensions: [756, 261], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
[" <!-- STEP3: Display Uploads from 'content' (Paste this where you want your uploads displayed) -->
<!-- Upload Program Fields : num, createdTime, tableName, fieldName, recordNum, preSaveTempId, filePath, filename, extension, thumbFilePath -->
<!-- Upload Image Fields : isImage, hasThumbnail, urlPath, width, height, thumbUrlPath, thumbWidth, thumbHeight -->
<!-- Upload Info Fields : info1, info2, info3, info4, info5 -->
<?php if ($record): ?>
<?php foreach (getUploads($options['tableName'], 'content', $record['num']) as $upload): ?>
<?php if ($upload['hasThumbnail']): ?>
<img src="<?php echo $upload['thumbUrlPath'] ?>" width="<?php echo $upload['thumbWidth'] ?>" height="<?php echo $upload['thumbHeight'] ?>" />

<?php elseif ($upload['isImage']): ?>
<img src="<?php echo $upload['urlPath'] ?>" width="<?php echo $upload['width'] ?>" height="<?php echo $upload['height'] ?>" />

<?php else: ?><?php endif ?>
<?php endforeach ?>
<?php endif ?>
<!-- STEP3: /Display Uploads from 'content' -->"] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:3500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "always",
togglerid: "fadeshow2toggler"
})

</script>

Unfortunately, the slide images aren't showing up: http://www.tomlinsonelitehockey.com/index-03.shtml

Does anyone know why, please?
Nigel Gordijk

Common Sense Design: User-focused Web design
Tel: 001 519 342 5348 | Web: www.commonsensedesign.net

Re: [NigelGordijk] Slideshow with text and links

By Chris - December 23, 2010

Hi Nigel,

Something like this code should do the trick:

imagearray: [
<?php $firstImage = true ?>
<?php if ($record): ?>
<?php foreach (getUploads($options['tableName'], 'content', $record['num']) as $upload): ?>
<?php if ($upload['hasThumbnail']): ?>

<?php if (!$firstImage): ?>
,
<?php endif ?>
<?php $firstImage = false ?>

[<?php echo json_encode($upload['thumbUrlPath']) ?>, "", "", "<a href='index.shtml' class='aWhite'>" + <?php echo json_encode($upload['info1']) ?> + "</a>"]

<?php endif ?>
<?php endforeach ?>
<?php endif ?>
],


The other thing is that PHP isn't being executed in your index-03.shtml page. You'll probably simply need to rename it to index-03.php.

I hope this helps! Please let me know if you have any questions.
All the best,
Chris

Re: [chris] Slideshow with text and links

Perfect! http://www.tomlinsonelitehockey.com/index-03.php

Thank you so much for your help.
Nigel Gordijk

Common Sense Design: User-focused Web design
Tel: 001 519 342 5348 | Web: www.commonsensedesign.net

Re: [NigelGordijk] Slideshow with text and links

By Chris - December 28, 2010

Hi Nigel,

Looks great! Nice work! :)
All the best,
Chris

Re: [NigelGordijk] Slideshow with text and links

By Chris - December 29, 2010

Hi Nigel,

json_encode() will return a fully-qualified JavaScript object, so in this case, it'll return a string including the surrounding quotes. Try this:

[
<?php echo json_encode($upload['thumbUrlPath']) ?>,
"",
"",
"<a href='" + <?php echo json_encode($upload['info2']) ?> + "' class='aWhite'>"
+ <?php echo json_encode($upload['info1']) ?> + "</a>"
]


Does that help? If you're still having trouble, please post a URL that shows the problem so I can inspect the source code.
All the best,
Chris

Re: [chris] Slideshow with text and links

Great stuff - http://www.tomlinsonelitehockey.com/index-03.php.

Thank you!
Nigel Gordijk

Common Sense Design: User-focused Web design
Tel: 001 519 342 5348 | Web: www.commonsensedesign.net

Re: [Chris] Slideshow with text and links

Hi, Chris.

Sorry, I'm having a similar problem on another site! Here's the code that I have in the head of my document:

<script type="text/javascript" src="fadeslideshow.js"></script>

<!-- STEP1: Load Record (Paste this above other step) -->
<?php
require_once "cmsAdmin/lib/viewer_functions.php";
$options = array(); // NOTE: see online documentation for more details on these options
$options['tableName'] = 'homepage'; // (REQUIRED) MySQL tablename to list record from. Example: "article";
$options['recordNum'] = ''; // (optional) Record number to display. Example: "1"; Defaults to number on end of url, then 1
$options['where'] = ''; // (ADVANCED) MySQL WHERE conditions to use INSTEAD of recordNum to look up record. Example: "fieldname = 'value'"
$record = getRecord($options);
?>
<!-- /STEP1: Load Record -->

<!-- STEP2: Display Record (Paste this where you want your record displayed and re-arrange fields) -->
<?php if ($record): ?>
<?php endif ?>

<?php if (empty($record)): ?>
<?php endif ?>
<!-- STEP2: /Display Record -->

<script type="text/javascript">

var mygallery=new fadeSlideShow({
wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
dimensions: [450, 299], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
<?php $firstImage = true ?>
<?php if ($record): ?>
<?php foreach (getUploads($options['tableName'], 'slideshow', $record['num']) as $upload): ?>
<?php if ($upload['hasThumbnail']): ?>

<?php if (!$firstImage): ?>
,
<?php endif ?>
<?php $firstImage = false ?>

[
<?php echo json_encode($upload['thumbUrlPath']) ?>,
"",
"",
"<?php echo json_encode($upload['info1']) ?>"
]

<?php endif ?>
<?php endforeach ?>
<?php endif ?>
],
displaymode: {type:'auto', pause:2000, cycles:0, wraparound:false},
persist: true, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "always",
togglerid: "fadeshow2toggler"
})

</script>

And this is the live page, which isn't loading the images that have been uploaded via CMSB:
http://www.nithvalley.com/home.php.

Any idea where I'm going wrong, please?

Thanks.
Nigel Gordijk

Common Sense Design: User-focused Web design
Tel: 001 519 342 5348 | Web: www.commonsensedesign.net

Re: [NigelGordijk] Slideshow with text and links

By Chris - May 16, 2011

Hi Nigel,

From looking at your code and the source of the page, I'm certain that either $record isn't being loaded, getUploads(...) is empty, or none of your uploads have thumbnails. Try adding this code below /STEP1 to make sure you're loading your record properly:

<?php echo "record = "; showme($record) ?>

By chance, are you using a single-record section? Could it be that you've never clicked "Save" on it?
All the best,
Chris

Re: [Chris] Slideshow with text and links

No idea what I did right, but I got it working!

http://www.nithvalley.com/home.php

Thanks for your advice, Chris. :-)
Nigel Gordijk

Common Sense Design: User-focused Web design
Tel: 001 519 342 5348 | Web: www.commonsensedesign.net