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
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?
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
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.
Chris
Re: [chris] Slideshow with text and links
Thank you so much for your help.
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
Looks great! Nice work! :)
Chris
Re: [chris] Slideshow with text and links
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?
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
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.
Chris
Re: [chris] Slideshow with text and links
Thank you!
Common Sense Design: User-focused Web design
Tel: 001 519 342 5348 | Web: www.commonsensedesign.net
Re: [Chris] Slideshow with text and links
By NigelGordijk - May 16, 2011
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.
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
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?
Chris
Re: [Chris] Slideshow with text and links
By NigelGordijk - May 18, 2011
http://www.nithvalley.com/home.php
Thanks for your advice, Chris. :-)
Common Sense Design: User-focused Web design
Tel: 001 519 342 5348 | Web: www.commonsensedesign.net