Getting my slideshow to work

10 posts by 2 authors in: Forums > CMS Builder
Last Post: June 26, 2014   (RSS)

By claire - June 26, 2014

Hey there

Try this code:

<script type="text/javascript">

var translideshow1=new translideshow({
    wrapperid: "myslideshow", //ID of blank DIV on page to house Slideshow
    dimensions: [970, 350], //width/height of gallery in pixels. Should reflect dimensions of largest image
    imagearray: [
        <?php foreach ($homepage_slideshowRecord['slide'] as $index => $upload) {

echo '["' . $upload['urlPath'] . '", "' . htmlencode($upload['info1']) . '"]';


} ?>
    ],
    displaymode: {type:'auto', pause:4500, cycles:0, pauseonmouseover:true},
    orientation: "h", //Valid values: "h" or "v"
    persist: true, //remember last viewed slide and recall within same session?
    slideduration: 900 //transition duration (milliseconds)
})

</script>

This should insert the slide records into the slideshow Javascript. Let me know if it works.

--------------------

Claire Ryan
interactivetools.com

Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/

By CommonSenseDesign - June 26, 2014

Hi, Claire. Thanks for your reply.

Unfortunately, no. The slideshow isn't appearing at all. http://healthyfoodsandmore.com/home0.php

Attachments:

home0.php 9K

By claire - June 26, 2014

Apologies, I missed a comma there. Can you replace this line?

echo '["' . $upload['urlPath'] . '", "' . htmlencode($upload['info1']) . '"],';

If this doesn't work, I can log in and edit the file directly for you. All you'll have to do is email me the details.

--------------------

Claire Ryan
interactivetools.com

Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/

By CommonSenseDesign - June 26, 2014 - edited: June 26, 2014

Perfect - thank you! The slides are showing up okay.

Is there a way of getting the navigation under the slides to work so that the numbers reflect the number of images that have been uploaded? At the moment, they're showing up like this: « 1  |  2  |  3 ». I've hard-coded these, but I only have two images that were added via CMSB, so I'd like it to look like this: « 1  |  2 ».

Of course, if there are, say, five slides, then the numbers should go up to 5.

Attachments:

home0.php 9K

By claire - June 26, 2014

Sure - this is a little trickier but very doable.

Take this line:

<p align="center" class="pNoPad">
<a href="javascript:translideshow1.navigate('back')" style="margin-right:40px;">&laquo;</a><a href="javascript:translideshow1.navigate(0)">1</a>&nbsp;&nbsp;<span class="spanLightGreen">|</span>&nbsp;&nbsp;<a href="javascript:translideshow1.navigate(1)">2</a>&nbsp;&nbsp;<span class="spanLightGreen">|</span>&nbsp;&nbsp;<a href="javascript:translideshow1.navigate(2)">3</a><a href="javascript:translideshow1.navigate('forth')" style="margin-left:40px;">&raquo;</a>
</p>

Replace it with this:

<p align="center" class="pNoPad">
  <a href="javascript:translideshow1.navigate('back')" style="margin-right:40px;">&laquo;</a>
  <?php for ($count = 0; $count < count($homepage_slideshowRecord['slide']); $count++) : ?>
    <a href="javascript:translideshow1.navigate(<?php echo $count; ?>)"><?php echo $count + 1; ?></a>&nbsp;&nbsp;
    <?php if(($count +1) < count($homepage_slideshowRecord['slide'])) : ?>
      <span class="spanLightGreen">|</span>&nbsp;&nbsp;
    <?php endif; ?>
  <?php endfor; ?>
  <a href="javascript:translideshow1.navigate('forth')" style="margin-left:40px;">&raquo;</a>
</p>

This should work fine, but let me know if it doesn't.

--------------------

Claire Ryan
interactivetools.com

Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/

By CommonSenseDesign - June 26, 2014

Genius! :-) That's absolutely perfect. Thanks so much for your help.

By CommonSenseDesign - June 26, 2014

Sorry, one more thing, Claire - when you click on one of the slides, it opens the link in a new window. How do I get this to open in the same window/tab? I'm assuming it's something to do with this line, but I don't know the syntax.

echo '["' . $upload['urlPath'] . '", "' . htmlencode($upload['info1']) . ', "],';


Thanks.

By claire - June 26, 2014

It should open in the same frame by default. The actual slider Javascript is just being a little ornery, as far as I can see.

Change the line like so, hopefully this will work:

echo '["' . $upload['urlPath'] . '", "' . htmlencode($upload['info1']) . '", "_self"],';

--------------------

Claire Ryan
interactivetools.com

Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/

By CommonSenseDesign - June 26, 2014

Yeah, that does the trick. Thank you.