Dynamic Drive slideshow script with CMSB

20 posts by 4 authors in: Forums > CMS Builder
Last Post: March 1, 2013   (RSS)

Hi, there.

I'm using a slideshow script (http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm) from Dynamic Drive that I can get working with hard coding, but I'd like to use images, captions and links that have been added via CMSB. Here's the hand coded version - http://www.masselsmarine.com/index-slideshow.php - and this is my attempt at making it work via CMSB - http://www.masselsmarine.com/index-slideshow-cms.php.

======

Here's the relevant slideshow code in the hand coded version:

<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
    imagearray: [
        ["slides/dog.jpg", "http://www.masselsmarine.com/marine.php", "_top", "Caption #1 goes here."],
        ["slides/fishing.jpg", "http://www.masselsmarine.com/snowmobiles.php", "_top", "Caption #2 goes here."],
        ["slides/relaxing.jpg", "http://www.masselsmarine.com/customers.php", "_top", "Caption #3 goes here."],
        ["slides/storefront.jpg", "http://www.masselsmarine.com/about-boating.php", "_top", "Caption #4 goes here."]
 //<--no trailing comma after very last image element!
    ],
    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>

======

This is my CMSB adaptation:

<?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: [999, 324], //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>

======

Both versions are attached.

Any idea what I'm doing wrong, please?

Hi Nigel,

If you look at the page source for http://www.masselsmarine.com/index-slideshow-cms.php you can see that your getting this error:

Notice: Undefined variable: record in /home/masselsm/public_html/index-slideshow-cms.php on line 58

This is because your calling the variable record, which doesn't exist. I think a simpler method for creating the slideshow might be something like this:

<?php
  //get the total number of items in the slideshow
  $numItems = count(@$homepage_slideshow['slideshow']);
  //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['slideshow']): ?>
  imagearray: [
    <?php foreach($homepage_slideshow['slideshow'] as $slide): ?>
    ["<?php echo $slide['thumbUrlPath']; ?>", "<?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>

This is just an example, so you might have to change some of the variable names that you're using to get this working.

I wasn't sure were you're storing each images link, so I've used the variable 'info2' in this example. 

Let me know if you have any questions.

Thanks!

Greg

Greg Thomas







PHP Programmer - interactivetools.com

Hi, Greg. Thanks for having a look at this.

I tried adding your code, but now I'm getting an error message: http://www.masselsmarine.com/index-slideshow-cms.php

Any idea where I've gone wrong, please?

Hi Nigel,

Looks like I missed a closing semicolon on line 58. I've attached the updated code to this post.

Thanks!

Greg

Greg Thomas







PHP Programmer - interactivetools.com

By CommonSenseDesign - February 20, 2013 - edited: February 20, 2013

I'm not getting the error message, but the slides aren't appearing, I'm afraid.

http://www.masselsmarine.com/index-slideshow-cms_003.php

I've attached the code generated by CMSB, if that helps.

Hi Nigel,

Attaching the code generator file was a good idea, after looking at it I think I can see the problem. The upload field is called content, but I thought it was called slideshow. I've made the changes on lines 55 and 57 so that the $homepage_slideshow['slideshow'] variable is called $homepage_slideshow['content'] instead. 

Thanks!

Greg

Greg Thomas







PHP Programmer - interactivetools.com

Hi Nigel, 

Would you mind filling out a second level support request for me? You can find the form here:

https://www.interactivetools.com/support/email_support_form.php

Then I can take a closer look at the issue for you.

Thanks

Greg

Greg Thomas







PHP Programmer - interactivetools.com

Will do. Thanks, Greg.

My 2 cents ... you cannot have a trailing comma after the last image.  I solved it by pre counting the images and conditionally writing the code without the comma on the last image in the array.

See this post http://www.interactivetools.com/forum/forum-posts.php?postNum=2219069#post2219069

Ron Conring
Conring Automation Services
----------------------------------------
Software for Business and Industry Since 1987