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: [chris] Slideshow with text and links

Hi, Chris.

One small problem: I need to be able to add links to the text that appears on top of the images. The current line of code looks like this:

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

I need to be able to replace index.shtml with the url that is entered into the info2 field for the image in CMSB. I'm assuming that the section of code would be <?php echo json_encode($upload['info2']) ?>, but when I use this to replace index.shtml the image doesn't appear on the page.

Any suggestions, 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 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: [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