Click to See Complete Forum and Search --> : Reducing images in slide
TheLostWords
07-28-2007, 07:20 AM
Hi,
I have troubles with my slideshow.
My question is, how can I reduce the size of the images that are played in my slideshow.
Just like, <img scr="blala" width="200" height="150">
I hope that you understand my question..
script in next post..
thelostwords
Centauri
07-28-2007, 08:21 AM
Hard to give specific info without any code or link, but if your slideshow container has an id (I'll use "slideshow" here), then the image can be set with css to be all the same size. You will have to remove the size declarations from the html, and use css something like:
#slideshow img {
width: 200px;
height: 150px;
}
ray326
07-28-2007, 01:25 PM
how can I reduce the size of the images that are played in my slideshowUse a graphics program like Irfanview or CompuPic to rescale the images to the size you need.
TheLostWords
07-28-2007, 01:58 PM
sorry for not posting the script..
this is the script:
<head>
<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Ricocheting (ricocheting@hotmail.com) -->
<!-- Web Site: http://www.ricocheting.com -->
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Begin
var rotate_delay = 3000; // delay in milliseconds (5000 = 5 secs)
current = 0;
function next() {
if (document.slideform.slide[current+1]) {
document.images.show.src = document.slideform.slide[current+1].value;
document.slideform.slide.selectedIndex = ++current;
}
else first();
}
function previous() {
if (current-1 >= 0) {
document.images.show.src = document.slideform.slide[current-1].value;
document.slideform.slide.selectedIndex = --current;
}
else last();
}
function first() {
current = 0;
document.images.show.src = document.slideform.slide[0].value;
document.slideform.slide.selectedIndex = 0;
}
function last() {
current = document.slideform.slide.length-1;
document.images.show.src = document.slideform.slide[current].value;
document.slideform.slide.selectedIndex = current;
}
function ap(text) {
document.slideform.slidebutton.value = (text == "Stop") ? "Start" : "Stop";
rotate();
}
function change() {
current = document.slideform.slide.selectedIndex;
document.images.show.src = document.slideform.slide[current].value;
}
function rotate() {
if (document.slideform.slidebutton.value == "Stop") {
current = (current == document.slideform.slide.length-1) ? 0 : current+1;
document.images.show.src = document.slideform.slide[current].value;
document.slideform.slide.selectedIndex = current;
window.setTimeout("rotate()", rotate_delay);
}
}
// End -->
</script>
</head>
<body>
<form name=slideform>
<table cellspacing=0 cellpadding=2 bgcolor="">
<tr>
<td align=right bgcolor="">
<b>slideshow</b>
</td>
</tr>
<tr>
<td align=center bgcolor="white" width=200 height=150>
<img src="cart.gif" name="show">
</td>
</tr>
<tr>
<td align=center bgcolor="" width="250" height="30">
<p align="left"><select name="slide" onChange="change();">
<option value="http://www.freewebs.com/thelostwords/pictures/Imgp5679.jpg" selected>#1.
<option value="http://www.freewebs.com/thelostwords/pictures/IMGP5907.JPG">#2.
<option value="http://www.freewebs.com/thelostwords/pictures/Imgp5918.jpg">#3
<option value="http://www.freewebs.com/thelostwords/pictures/IMGP5686.JPG">#4.
<option value="ewing.gif">#5.
<option value="f18.gif">#6.
<option value="klingon.gif">#7.
<option value="landingcraft.gif">#8.
<option value="hoverracer.gif">#9.
<option value="sith.gif">#10.
</select>
</td>
</tr>
<tr>
<td align=center bgcolor="">
<p align="left"><input type=button onClick="first();" value="eerste" title="Beginning">
<input type=button onClick="previous();" value="<" title="Previous">
<input type=button name="slidebutton" onClick="ap(this.value);" value="slide" title="AutoPlay">
<input type=button onClick="next();" value=">" title="Next">
<input type=button onClick="last();" value="laatste" title="End"></p>
</td>
</tr>
</table>
</form>
</center>
</body>
Centauri
07-28-2007, 07:15 PM
If you add an id to the <form> element <form name=slideform id="slideshow"> then the css I gave above should work by refering to that id
TheLostWords
07-29-2007, 01:03 AM
sow if you add that element.. what should I remove from the script? and how should the script looks like afterremoving and adding your code?
Centauri
07-29-2007, 01:24 AM
The javascript doesn't need to be altered at all - just add the id to the existing form element in your html, and add the code I gave in post #2 to your css.
TheLostWords
07-29-2007, 02:03 AM
thnx.. I'll try that.. =)