Hjælp til at tilpasse slideshow-script
Hejså eksperter -Ved godt at der er flere hundrede emner om slideshow! - Men er ikke den skarpeste til javascript og efter mange timers forsøg har jeg nu officielt opgivet at tilpasse det her script...
Giver gode point til det bedste svar :)
Jeg har fundet flg. script på www.peters1.dk og forsøgt at redigere lidt i det efter mine behov..:
_______________________________________________________________
<html>
<head>
<title>Slideshow</title>
<style>
body {
background-color:#000;
}
</style>
<script>
////////////////////////////////////////////////////////////////
// Javascript made by Rasmus - http://www.peters1.dk //
////////////////////////////////////////////////////////////////
var SLIDE_sti = 'images/'; // Adresse til mappen, hvor billederne er placeret
var SLIDE_text = new Array();
var BILLEDER = new Array();
BILLEDER[1] = 'nr1.jpg';
SLIDE_text = 'text til billede 1';
// Ingen ændringer herunder...
var SLIDE_billede = new Array();
var SLIDE_load = new Array();
var SLIDE_status, SLIDE_timeout;
var SLIDE_aktuel = 1;
var SLIDE_speed = 3000;
var SLIDE_fade = 2;
for (i = 1; i <= BILLEDER.length-1; i++)
{
SLIDE_billede[i] = SLIDE_sti+BILLEDER[i];
SLIDE_load[i] = new Image();
SLIDE_load[i].src = SLIDE_billede[i];
}
var SLIDE_antal = SLIDE_billede.length-1;
function SLIDE_start()
{
document.getElementById('SLIDE_pause').disabled = true;
document.images.SLIDE_billedeBox.src = SLIDE_load[SLIDE_aktuel].src;
document.getElementById("SLIDE_textBox").innerHTML= SLIDE_text[SLIDE_aktuel];
}
function SLIDE_pause()
{
clearTimeout(SLIDE_timeout);
SLIDE_status = 'SLIDE_pause';
document.getElementById('SLIDE_pause').disabled = true;
document.getElementById('SLIDE_play').disabled = false;
}
function SLIDE_play()
{
SLIDE_pause();
document.getElementById('SLIDE_play').disabled = true;
document.getElementById('SLIDE_pause').disabled = false;
SLIDE_aktuel++;
SLIDE_slide();
SLIDE_timeout = setTimeout("SLIDE_play()",SLIDE_speed);
}
function SLIDE_tilbage()
{
clearTimeout(SLIDE_timeout);
SLIDE_aktuel--;
SLIDE_slide();
if (SLIDE_status != 'SLIDE_pause') SLIDE_timeout = setTimeout("SLIDE_play()",SLIDE_speed);
}
function SLIDE_frem()
{
clearTimeout(SLIDE_timeout);
SLIDE_aktuel++;
SLIDE_slide()
if (SLIDE_status != 'SLIDE_pause') SLIDE_timeout = setTimeout("SLIDE_play()",SLIDE_speed);
}
function SLIDE_slide()
{
if (SLIDE_status != 'SLIDE_pause')
{
document.getElementById('SLIDE_play').disabled = true;
document.getElementById('SLIDE_pause').disabled = false;
}
if (SLIDE_aktuel > (SLIDE_antal)) SLIDE_aktuel=1;
if (SLIDE_aktuel < 1) SLIDE_aktuel = SLIDE_antal;
if (document.all)
{
document.getElementById("SLIDE_textBox").style.background = "transparent";
document.images.SLIDE_billedeBox.style.filter="blendTrans(duration=2)";
document.images.SLIDE_billedeBox.style.filter="blendTrans(duration=SLIDE_fade)";
document.images.SLIDE_billedeBox.filters.blendTrans.Apply();
}
document.images.SLIDE_billedeBox.src = SLIDE_load[SLIDE_aktuel].src;
if (document.getElementById) document.getElementById("SLIDE_textBox").innerHTML= SLIDE_text[SLIDE_aktuel];
if (document.all) document.images.SLIDE_billedeBox.filters.blendTrans.Play();
}
function SLIDE_hastighed(SLIDE_valgt)
{
SLIDE_speed = SLIDE_valgt.options[SLIDE_valgt.selectedIndex].value;
}
</script>
<meta name="Generator" content="Stone's WebWriter 4">
<style>
body {margin: 8px 8px 8px 0px}
td {font-family: Verdana, Arial, Tahoma, Helvetica, sans-serif; font-size: 11px}
.knap {font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;font-size: 11px}
.input {font-family: Tahoma, Arial, Helvetica, sans-serif;font-size: 11px}
</style>
</head>
<body onLoad="SLIDE_start()">
<div style="width;1000px;">
<center><img name="SLIDE_billedeBox" height="600px"></center>
</div>
<div id="navigation" align="center" style="width:100%;position:absolute;bottom:15px;">
<table>
<tr>
<td id="SLIDE_textBox" align="center"> </td>
</tr>
</table>
<br />
<table>
<tr valign="middle">
<td>
<select name="SLIDE_hastighed" class="input" onChange="SLIDE_hastighed(this)">
<option value="1000">1 sekund</option>
<option value="2000">2 sekunder</option>
<option value="3000" selected>3 sekunder</option>
<option value="5000">5 sekunder</option>
<option value="8000">8 sekunder</option>
</select>
</td>
<td>
<button type="button" id="SLIDE_tilbage" class="knap" onClick="SLIDE_tilbage()"> << </button>
<button type="button" id="SLIDE_play" class="knap" onClick="SLIDE_play()">Play</button>
<button type="button" id="SLIDE_pause" class="knap" onClick="SLIDE_pause()">Pause</button>
<button type="button" id="SLIDE_frem" class="knap" onClick="SLIDE_frem()"> >> </button>
</td>
<td>
<BUTTON type="button" onClick="top.window.close();" class="knap">Luk vindue</BUTTON>
</td>
</tr>
</table>
__________________________________________________________________
Ok her er hvad jeg skal ha ændret:
Først og fremmest vil jeg gerne have scriptet til at stoppe slideshowet når den har vist sidste billede, det er vigtigt at "play" og "pause" skifter status sådan så man kun kan klikke på "play".
Desuden skal jeg også have lavet så billedet automatisk resizer så størrelsen passer, men den skal kun resize hvis billedet er større end det max-tilladte. Har fundet nogle emner omkring dette men har læst mig frem til at det script ikke virker i slideshows?
Som den sidste meget væsentlige ting, har jeg lagt mærke til at den preloader alle billederne, dette er selvfølgelig udemærket til et diasshow med små, få billeder - men regner med at der kommer mange højt-opløselige billeder så er bange for det vil virke irriterende hvis brugeren skal vente for længe. Det ville være super hvis man kunne nøjes med at loade de næste 3 billeder hele tiden.
En lille detalje er at jeg egentlig heller ikke brug for at vise tekst til billedet, men har bare ikke kunnet finde ud af at cutte det ud af scriptet uden at ødelægge det hele. Hvis der er en der kan finde ud af det ville det være super :)
Har uploadet scriptet til http://4legends.com/projekt/slideshow/slideshow.php så i ved hvad jeg snakker om:)
Ved at det her er en ordentlig mundfuld, men er desværre noget handicappet når jeg bevæger mig ud i javascript, og står og mangler et ordentlig slideshow hvilket ikke rigtigt kan laves i php:(
Lægger 200 point i puljen til den som kan lave et script der opfylder mine krav! :)
