PDA

View Full Version : Custom Text Controls for Swiss Army Slideshow



XavierSPL
01-26-2007, 06:30 PM
1) Script Title: Swiss Army Slideshow

2) Script URL (on DD): Here (http://www.dynamicdrive.com/dynamicindex14/swissarmy/index.htm)

3) Describe problem:

I was hoping to modify this a bit to mimic the appearance and function of the news slideshow on msn.com's home page (http://www.msn.com). (In that below the image, there is a small 10-12px row that contains text controls for previous, play/pause, next,etc.)
I installed it using the 1st. script option which has image based controls, and once installed on my home page, the image based controls just take up too much height and don't look good. I tried changing the variable to "false" for controls to see if it would give me text controls and it didn't change anything.
I'm ok with HTML in general, but have very little experience with Java, and after looking over the code, can't really decipher where or how I would create this table row in place of the image based controls that are there now.
Any help would be greatly appreciated! :D

jscheuer1
01-26-2007, 07:20 PM
There is an undocumented property that might be useful:


slides#.no_added_linebreaks=1; //use for no added line breaks in formatting of texts and controls

Where slides# is the name of your array. Place this property after the array. This should compress the vertical space used.

You could also use style to alter the appearance of the default controls by putting a div around the call in the body, example -

Example style for the head:


<style type="text/css">
#show1 input {
font-size:10px;
}
</style>

Example markup for the body:


<div id="show1">
<script type="text/javascript">
new inter_slide(slides)
</script>
</div>

Otherwise, you are off to hack this function:


inter_slide.prototype.controls=function(){
var brs=this.addbr? '<br>' : ' &nbsp;';
if(!this.ics&&!this.no_c)
document.write('<div align="center"><input id="prev'+this.issid+'" disabled type="button" value=" << " onclick="iss['+this.issid+'].changeimg(false, \'nav\');">\n'+
(this.no_auto? '&nbsp;&nbsp;&nbsp;' : ' <input id="gostp'+this.issid+'" type="button" value=" Stop " onclick="iss['+this.issid+'].gostop(this);">\n')+
' <input id="next'+this.issid+'" disabled type="button" value=" >> " onclick="iss['+this.issid+'].changeimg(true, \'nav\');">'+(this.jumpto? brs+'Jump to: <input disabled type="text" size="'+this.imgs.length.toString().length+'" id="goto'+this.issid+'" onkeydown="iss['+this.issid+'].jumper(event);"><input id="go'+this.issid+'" disabled type="button" onclick="iss['+this.issid+'].jumper();" value="GO">' : '')+'<\/div>')
else if(this.ics&&!this.no_c){
var op=document.body.filters? ' style="filter:alpha(opacity=100);"' : ' style="opacity:'+(this.man_start? 0.99 : 0.45)+';"';
document.write('<table align="center" cellpadding="0" cellspacing="10"><tr><td valign="middle" align="center" style="padding:2px 2px 1px 2px;"><input'+op+' onmouseover="iss['+this.issid+'].ibute(this,1);" onmouseout="iss['+this.issid+'].ibute(this,2);" onmousedown="iss['+this.issid+'].ibute(this,3);" onmouseup="iss['+this.issid+'].ibute(this,4);" type="image" title="Previous" id="prev'+this.issid+'" src="'+previmg+'" onclick="iss['+this.issid+'].changeimg(false, \'nav\');"><\/td>'+(this.no_auto? '<td>&nbsp;<\/td>' : '<td valign="middle" align="center" style="padding:2px 2px 1px 2px;"><input onmouseover="iss['+this.issid+'].ibute(this,1);" onmouseout="iss['+this.issid+'].ibute(this,2);" onmousedown="iss['+this.issid+'].ibute(this,3);" onmouseup="iss['+this.issid+'].ibute(this,4);" title="Stop" type="image" id="gostp'+this.issid+'" src="'+(this.g_fPlayMode? playimg : stopimg)+'" onclick="iss['+this.issid+'].gostop(this);"><\/td>')+'<td valign="middle" align="center" style="padding:2px 2px 1px 2px;"><input'+op+' onmouseover="iss['+this.issid+'].ibute(this,1);" onmouseout="iss['+this.issid+'].ibute(this,2);" onmousedown="iss['+this.issid+'].ibute(this,3);" onmouseup="iss['+this.issid+'].ibute(this,4);" type="image" title="Next" id="next'+this.issid+'" src="'+nextimg+'" onclick="iss['+this.issid+'].changeimg(true, \'nav\');"><\/td><\/tr><\/table>\n');
}
else
this.no_c=1;
}

I wrote it and it would be a chore for me to change it, impossible without a precise idea of what I was trying to achieve.

XavierSPL
01-26-2007, 09:40 PM
Thanks so much for the help.. I did see that notation in the instrcutions, unfortunately, because of my complete lack of Java, I can't figure out where to place any of those code examples. I've tried and everytime I try and add any of those I disable it from working completely. I didn't see enough of an explanation to tell whether or not I'm supposed to place the code in the head portion, or the body portion, and exactly what that line should look like.

This is what I have for the body section:


<p>
<script type="text/javascript">
//Notes on Parameters: The only required parameter is the slides_array_name. If Width is used, so must Height.
//Interval is optional too. It is always last, either fourth after Width and Height or second after Slides_array_name.
//Usage: new inter_slide(Slides_array_name, Width, Height, Interval)


new inter_slide(slides, 564, 198, 5000)
</script>
</p>

And this is what I have in the head:


<script type="text/javascript">

//If using image buttons as controls, Set image buttons' image preload here true
//(use false for no preloading and for when using no image buttons as controls):
var preload_ctrl_images=false;

//And configure the image buttons' images here:
var previmg='left.gif';
var stopimg='stop.gif';
var playimg='play.gif';
var nextimg='right.gif';

var slides=[] //FIRST SLIDESHOW

//configure the below images and descriptions to your own.
slides[0] = ["/images/big picture.jpg", "Big Picture"];
slides[1] = ["/images/news2.jpg", "News 2"];
slides[2] = ["/images/news3.jpg", "News 3"];

//above slide show uses only the defaults



//Notes:
//slides#.target will set a target for a slide group, will be overridden by slides#[#][3], if present
//slides#.specs will set new window specifications for a slide group, will be overridden by slides#[#][4], if present
//slides#.fadecolor will set fading images background color, defaults to white
//slides#.no_controls will set a slide show with no controls
//slides#.random will set a random slide sequence on each page load
//slides#.delay=3000 will set miliseconds delay between slides for a given show, may also be set in the call as the last parameter
//slides#.jumpto=1 will display added controls to jump to a particular image by its number
//slides#.no_added_linebreaks=1; use for no added line breaks in formatting of texts and controls

//use below to create a customized onclick event for linked images in a given show:
//slides#.onclick="window.open(this.href,this.target,'top=0, left=0, width='+screen.availWidth+', height='+screen.availHeight);return false;"

</script>

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

/***********************************************
* Swiss Army Image slide show script - John Davenport Scheuer: http://home.comcast.net/~jscheuer1/
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full original source code
***********************************************/

</script>

My limited experience with PHP + Coldfusion tells me I could change the layout in the swissarmy.js file, but I looked and don't see enough HTML to make head from tales!

Thanks for helping a NEWB!! :rolleyes:

jscheuer1
01-26-2007, 10:42 PM
I've played around with this a bit and have found a relatively, and I stress relatively, easy way to add custom controls. For your setup, give this a try -

Put this style in the head:


<style type="text/css">

.ctrl0 {
color:blue;
background-color:inherit;
cursor:pointer;
padding:0 1em;
}
.ctrl0:hover {
text-decoration:underline;
}

</style>

Add these properties here:


var slides=[] //FIRST SLIDESHOW

//configure the below images and descriptions to your own.
slides[0] = ["/images/big picture.jpg", "Big Picture"];
slides[1] = ["/images/news2.jpg", "News 2"];
slides[2] = ["/images/news3.jpg", "News 3"];

slides.no_controls=1;
slides.no_descriptions=1;
slides.no_added_linebreaks=1;


Add this bit of HTML after your slideshow call:


<p>
<script type="text/javascript">
//Notes on Parameters: The only required parameter is the slides_array_name. If Width is used, so must Height.
//Interval is optional too. It is always last, either fourth after Width and Height or second after Slides_array_name.
//Usage: new inter_slide(Slides_array_name, Width, Height, Interval)


new inter_slide(slides, 564, 198, 5000)
</script>
<div style="width:564px;margin:-7px auto 0 auto;background-color:lightblue;"><span class="ctrl0" style="float:left;" title="previous" id="prev0" onclick="clearTimeout(iss[0].restart);if (iss[0].playing){iss[0].gostop();setTimeout('iss[0].changeimg(false, \'nav\')', 1000);}else{iss[0].changeimg(false, 'nav')};iss[0].restart=setTimeout('iss[0].gostop()',6000);">&lt; previous</span>
<span class="ctrl0" style="float:right;" title="next" id="next0" onclick="clearTimeout(iss[0].restart);if (iss[0].playing){iss[0].gostop();setTimeout('iss[0].changeimg(true, \'nav\')', 1000);}else{iss[0].changeimg(true, 'nav')};iss[0].restart=setTimeout('iss[0].gostop()',6000);">next &gt;</span><br style="clear:both;"></div>
</p>

You may wish/need to make some adjustments for the look of it but, with a little luck, you can take it from here.

Note: I've only done limited testing with this so, there may be some problems with the way these custom controls work. I've tried to duplicate the controls from the MSN example, both the look of them and how they work.

XavierSPL
01-26-2007, 11:48 PM
Thanks Sooo Much! I had to adjust the margin to -2px from -7, you can see the result here (http://ensembleav.com). I haven't gotten the alignment quite right yet but this is really what I was looking for!
Thanks Again,

Xavier

jscheuer1
01-27-2007, 04:29 AM
Looking good!

You left out:


. . . >next &gt;</span><br style="clear:both;"></div>

This seems to make no difference in IE or Opera but, in FF, it makes the central portion of the control bar white.

I'm not sure what you mean about alignment though, looks OK to me. Perhaps you worked that out since your last post. If not, let me know what bothers you about it.

XavierSPL
01-27-2007, 03:43 PM
My problems with alignment are with the template I'm using for this site, and that adding the controls have affected another column. Not a problem with this script.. Thanks Much!!

jscheuer1
01-27-2007, 04:45 PM
In that case, I see one thing, the cn_top.gif appears out of alignment. I'd try giving it one of the following in-line styles:

style="margin-top:14px;"

style="padding-top:14px;"

style="position:relative;top:14px;"

Or give the td cell that it is in this in-line style:

style="padding-top:14px;"

tantrad
07-22-2008, 10:57 PM
script: swiss army knife slideshow
url: http://www.dynamicdrive.com/dynamicindex14/swissarmy/index.htm

Soo soo sorry if my question has already been answered in a previous post, I am trying to modify the swiss army knife slideshow to something that would look like the slide show on the frontpage of msn.com .. i ran an advanced google search of the forum but was not able to find an example that I could follow easily .. we have a slideshow on our site at .. www.ieph.org .. which is a bit sloppy and really not looking anything like the one on msn.com (sorry .. i know our site needs some more work to make it more sleek and neat) .. as on the msn.com slideshow, the features we especially need on each slide are an image, hyperlink on image, a text/html section which allows for hyperlinking from the text, text or image control buttons for 'previous' slide, 'next' slide, and pause/stop, with the slideshow starting in autoadvance default mode.... any assistance on how we can set up a slideshow which looks like the one on msn.com would be soo soon greatly appreciated. many many thanks..

TD