Dynamic Drive slideshow script with CMSB

Try something like this for the trailing comma in the head section,

<script>
        window.addEvent('domready', function(){
            
            
            var data = { <?php $blank = "'" ?><?php
    $output = '';
     if ($home_page_slidesRecord['randomize_images']== 1) {shuffle($home_page_slidesRecord['images']) ;}
    foreach ($home_page_slidesRecord['images'] as $upload) {
        
      $output .= "'". $upload['thumbUrlPath3']. "'". ": { caption: " ."'4'"." }" . ",";
    }
    $output = rtrim($output,","); // remove trailing comma
    print $output;
?>

The format for $output is what my slide show requires. Change to suit. The 4 is a dummy required value.

There are other slide show recipes that I've converted to use with CMSB in my CMSB Cookbook http://www.thecmsbcookbook.com

Hope that helps.

Jerry Kornbluth

Hi Nigel,

I couldn't get your link to work.

However, unless you've got some specific requirement for the show that requires the one you're using, I've been using SLIDESHOW II - A JAVASCRIPT CLASS FOR MOOTOOLS  http://www.electricprism.com/aeron/slideshow/ for quite a while and there's a recipe for CMSB implementation in my CMSB cookbook http://www.thecmsbcookbook.com.

It should be pretty east to use the same editors that you've already set up and I've never had a complaint.

Hope that helps,

Jerry Kornbluth

Hi Nigel,

The problem is with Internet Explorers really strict JavaScript validation. The final image in your JavaScript array of images has a comma at the end. I did try to set up an if statement at the end of the code to stop it putting a comma on the final item (<?php if(++$i != $numItems){ echo ','}; ?>), but it doesn't appear to be working. I think this is because the count function isn't counting the correct array of items. 

You will need to amend this line of code:

$numItems = count(@$homepage_slideshow['slideshow']);

So that it is counting the correct array, it needs to count the same array as is used in the foreach loop to create the images.

If you have any trouble making the changes, could you post your new slideshow code into a post for me? Then I can explain the exact changes you need to make. 

Thanks!

Greg

I am using that script on multiple websites and have tested them with all major browsers and android tablet.  Never had anyone say it didn't work but I am not surprised that the failure is with IE.  Did he say what version?  I have only tested with IE7, 8, 9.

It doesn't work for me in IE either, and I'm running 8.0.6001.18702 on Windows XP Professional.

Thanks, Jerry. For now, I'm going to try to amend the version that Greg has been working on for me before I try an alternative.

Hi, Greg.

Thanks for your advice. Implementing your solution turned out to be pretty easy. All I did was change

$numItems = count(@$homepage_slideshow['slideshow']);

to

$numItems = count(@$homepage_slideshow['content']);

Now the slideshow seems to be working perfectly in IE, Firefox and Chrome: www.masselsmarine.com

Thanks again for your help and patience.

For anyone who's interested, here's the full code for the slideshow. It's based on this from Dynamic Drive: http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm. You'll need to visit that page to download the three images and one external js file that this references.

In CMSB, I set up a single page that enables you to upload images, plus add captions and a link URL, if desired.

Here's the full code of my template:

<?php header('Content-type: text/html; charset=utf-8'); ?>
<?php
  /* STEP 1: LOAD RECORDS - Copy this PHP code block near the TOP of your page */

  // load viewer library
  $libraryPath = 'cmsAdmin/lib/viewer_functions.php';
  $dirsToCheck = array('/home/masselsm/public_html/','','../','../../','../../../');
  foreach ($dirsToCheck as $dir) { if (@include_once("$dir$libraryPath")) { break; }}
  if (!function_exists('getRecords')) { die("Couldn't load viewer library, check filepath in sourcecode."); }

  // load records
  list($homepage_slideshowRecords, $homepage_slideshowMetaData) = getRecords(array(
    'tableName'   => 'homepage_slideshow',
    'where'       => whereRecordNumberInUrl(1),
    'limit'       => '1',
  ));
  $homepage_slideshow = @$homepage_slideshowRecords[0]; // get first record

  // show error message if no matching record is found
  if (!$homepage_slideshow) {
    header("HTTP/1.0 404 Not Found");
    print "Record not found!";
    exit;
  }

?>
<!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">
 <head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<TITLE>Welcome to Massel's Marine</TITLE>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

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

/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<?php
  //get the total number of items in the slideshow
  $numItems = count(@$homepage_slideshow['content']);
  //create variable that can be used as a counter
  $i = 0;
?>

<script type="text/javascript">

var mygallery2=new fadeSlideShow({
  wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
  dimensions: [999, 324], //width/height of gallery in pixels. Should reflect dimensions of largest image
  <?php if(@$homepage_slideshow['content']): ?>
  imagearray: [
    <?php foreach($homepage_slideshow['content'] as $slide): ?>
    ["<?php echo $slide['urlPath']; ?>", "<?php echo @$slide['info2']; ?>", "_top", "<?php echo $slide['info1']; ?>"]<?php if(++$i != $numItems){ echo ','; }; ?>
    <?php endforeach; ?>
 //<--no trailing comma after very last image element!
  ],
  <?php endif; ?>
  displaymode: {type:'auto', pause:2500, 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>

<link href="styles.css" rel="stylesheet" type="text/css">
</HEAD>

<BODY>
<TABLE WIDTH="100" BORDER="0" ALIGN="CENTER" CELLPADDING="0" CELLSPACING="0">
<TR>
<TD class="tdMainImageCell">
<div id="fadeshow2"></div></TD>
</TR>
</TABLE>
</BODY>
</HTML>


Here's what that looks like: http://www.masselsmarine.com/index-slideshow-cms2.php

Many thanks to Greg for doing the heavy lifting to get this working for me.