Getting my slideshow to work
10 posts by 2 authors in: Forums > CMS Builder
Last Post: June 26, 2014 (RSS)
I'm using a script from www.dynamicdrive.com for a slideshow, and it works fine when hard-coded. However, I have no idea how to get this to work with images that have been added via CMSB.
This is the code in the head of the document:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<style type="text/css">
#myslideshow{ /*sample CSS for demo*/
border:0px solid black;
margin: 0px;
padding: 0px;
}
</style>
<script src="translucentslideshow.js" type="text/javascript">
/***********************************************
* Translucent slideshow- (c) Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
</script>
<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: [
["images/slide-01.jpg", "healthy-eating.php"], //["image_path", "optional_link", "optional_target"]
["images/slide-02.jpg", "nutrition-experts.php"], //["image_path", "optional_link", "optional_target"]
["images/slide-03.jpg", "blog.php"] //["image_path", "optional_link", "optional_target"]
],
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>
And this is the code for making the slideshow appear on the page:
<div id="myslideshow"></div>
<p align="center" class="pNoPad">
<a href="javascript:translideshow1.navigate('back')" style="margin-right:40px;">«</a><a href="javascript:translideshow1.navigate(0)">1</a> <span class="spanLightGreen">|</span> <a href="javascript:translideshow1.navigate(1)">2</a> <span class="spanLightGreen">|</span> <a href="javascript:translideshow1.navigate(2)">3</a><a href="javascript:translideshow1.navigate('forth')" style="margin-left:40px;">»</a>
</p>
You can see the live (non-CMSB) page here: http://healthyfoodsandmore.com/home.php . As you can see from this live page, there are also links to go to the next/previous slide (« and »), as well as choose the slide you want to see (1 | 2 | 3). If 5 slide images are uploaded, then this should be reflected in the numbers/links displayed (1 | 2 | 3 | 4 | 5 ).
I'm using a single record page and each of the slides will an image upload. I'm using upload field "info1" to input a url that the slide will link to when clicked on.
This is the CMSB code:
<?php foreach ($homepage_slideshowRecord['slide'] as $index => $upload): ?>
<img src="<?php echo $upload['urlPath'] ?>" width="<?php echo $upload['width'] ?>" height="<?php echo $upload['height'] ?>" alt="" /><br/>
info1 (Link) : <?php echo htmlencode($upload['info1']) ?>
<?php endforeach ?>
Any suggestions, please?
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/
Hi, Claire. Thanks for your reply.
Unfortunately, no. The slideshow isn't appearing at all. http://healthyfoodsandmore.com/home0.php
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.
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;">«</a><a href="javascript:translideshow1.navigate(0)">1</a> <span class="spanLightGreen">|</span> <a href="javascript:translideshow1.navigate(1)">2</a> <span class="spanLightGreen">|</span> <a href="javascript:translideshow1.navigate(2)">3</a><a href="javascript:translideshow1.navigate('forth')" style="margin-left:40px;">»</a>
</p>
Replace it with this:
<p align="center" class="pNoPad">
<a href="javascript:translideshow1.navigate('back')" style="margin-right:40px;">«</a>
<?php for ($count = 0; $count < count($homepage_slideshowRecord['slide']); $count++) : ?>
<a href="javascript:translideshow1.navigate(<?php echo $count; ?>)"><?php echo $count + 1; ?></a>
<?php if(($count +1) < count($homepage_slideshowRecord['slide'])) : ?>
<span class="spanLightGreen">|</span>
<?php endif; ?>
<?php endfor; ?>
<a href="javascript:translideshow1.navigate('forth')" style="margin-left:40px;">»</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/
Genius! :-) That's absolutely perfect. Thanks so much for your help.
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/