Bubbel
12-09-2010, 02:16 PM
I need some help with my slideshow script.
First of all, when I click "Markera alla bilder" (select all pics) only half get checked. Why?
Second, when I chose pictures, go to slideshow ("visa bildspel" button), close that window and click the "visa bildspel" button again, the first pictures are still there... How do I get rid of them without having to refresh the first window?
Here is the code for first window:
/.../
<script type="text/javascript" language="javascript">
var windVar = null;
var clear = new Array("pics/boats_small1.jpg","pics/butterfly_small1.jpg","pics/church_small1.jpg","pics/flower_small1.jpg","pics/glass_small1.jpg");
var blur = new Array("pics/boats_small0.jpg","pics/butterfly_small0.jpg","pics/church_small0.jpg","pics/flower_small0.jpg","pics/glass_small0.jpg");
var big = new Array("pics/boats.jpg","pics/butterfly.jpg","pics/church.jpg","pics/flower.jpg","pics/glass.jpg");
var pictxt = new Array("Båtar","Vacker fjäril","Stor kyrka","Fin blomma","Formgivning av glas");
var nr = [0];
var checked = new Array ();
var text = new Array();
function empty(nr) {
for (var i=0; i<document.form.check.length; i++) {
if (document.form.check[i].checked == true) document.form.check[i].checked = false;
}
for (var i=0; i<document.form1.name.length; i++) {
if (document.form1.name[i].value != "") document.form1.name[i].value = "";
}
}
function showPictLayer(nr,show) {
var element = document.getElementById("storBild"+nr);
if (show) element.style.visibility = "visible";
else element.style.visibility = "hidden";
}
function showHidePict(nr) {
var element = document.getElementById("storBild"+nr);
if (element.style.visibility == "visible") show = false;
else var show = true;
for (var i=0; i<5; i++) showPictLayer(i,false);
showPictLayer(nr,show);
}
function showClear(nr) {
for (var i=0; i<document.form.check.length; i++) {
if (document.form.check[i].checked) document.grey[i].src = clear[i];
else document.grey[i].src = blur[i];
}
}
function allCheck(button) {
for (var i=0; i<document.form.check.length; i++) {
if (button.value == "Markera alla bilder") {
document.form.check[i].checked = true;
document.grey[i].src = clear[i];
button.value = "Avmarkera alla bilder";
}
else {
document.form.check[i].checked = false;
document.grey[i].src = blur[i];
button.value = "Markera alla bilder";
}
}
}
function changeBtnPic(button) {
var element = document.getElementById("bilder");
if (button.value == "Visa bilder") {
button.value = "Dölj bilder";
element.style.display = "block";
}
else {
button.value = "Visa bilder";
element.style.display = "none";
}
}
function changeBtnText(button) {
var element = document.getElementById("namn");
if (button.value == "Visa bildtext") {
button.value = "Dölj bildtext";
element.style.display = "block";
}
else {
button.value = "Visa bildtext";
element.style.display = "none";
}
}
function bildspel() {
while (checked.length > 0) checked.pop();
for (var i=0; i<document.form.check.length; i++) {
if (document.form.check[i].checked == true) {
checked.push(document.bigClear[i].src);
if (document.form1.name[i].value !="")
text.push(document.form1.name[i].value);
else text.push(document.bigClear[i].alt);
}
}
if (checked == "") {
alert("Inga bilder förkryssade. Vänligen välj de bilder du vill se i bildspelet")
}
else {
newWindow(600,600,"bildspel2b.html");
}
}
function newWindow(width,height,fileName) {
var windProperties = "toolbar=0,location=0,status=0,menubar=0,scrollbars=1,resizable=1,width=" + width + ",height=" + height;
if (windVar != null) if (windVar.closed == false) windVar.close();
windVar = window.open(fileName,"bildspel",windProperties);
}
</script>
</head>
<body onload="empty()">
<form name="form">
<ul id="bilder">
<li class="bildBox">
<div onmouseover="showPictLayer(0,true)" onmouseout="showHidePict(0,false)"><span><img name="grey" src="pics/boats_small0.jpg" alt="grå båt" /></span>
<ul id="storBild0">
<li id="clear"><img src="pics/boats.jpg" alt="Ekor i sjö" name="bigClear" /></li>
<li id="box"><label><input type="checkbox" name="check" onclick="showClear(0)" /> Ekor i sjö</label></li>
</ul>
</div>
</li>
<li class="bildBox">
<div onmouseover="showPictLayer(1,true)" onmouseout="showHidePict(1,false)"><span><img name="grey" src="pics/butterfly_small0.jpg" alt="grå fjäril" /></span>
<ul id="storBild1">
<li id="clear"><img src="pics/butterfly.jpg" alt="Fin fjäril" name="bigClear" /></li>
<li id="box"><label><input type="checkbox" name="check" onclick="showClear(1)" /> Fin fjäril</label></li>
</ul>
</div>
</li>
<li class="bildBox">
<div onmouseover="showPictLayer(2,true)" onmouseout="showHidePict(2,false)"><span><img name="grey" src="pics/church_small0.jpg" alt="grå kyrka" /></span>
<ul id="storBild2">
<li id="clear"><img src="pics/church.jpg" alt="Stor kyrka" name="bigClear" /></li>
<li id="box"><label><input type="checkbox" name="check" onclick="showClear(2)" /> Stor kyrka</label></li>
</ul>
</div>
</li>
<li class="bildBox">
<div onmouseover="showPictLayer(3,true)" onmouseout="showHidePict(3,false)"><span><img name="grey" src="pics/flower_small0.jpg" alt="grå blomma" /></span>
<ul id="storBild3">
<li id="clear"><img src="pics/flower.jpg" alt="Vacker blomma" name="bigClear" /></li>
<li id="box"><label><input type="checkbox" name="check" onclick="showClear(3)" /> Vacker blomma</label></li>
</ul>
</div>
</li>
<li class="bildBox">
<div onmouseover="showPictLayer(4,true)" onmouseout="showHidePict(4,false)"><span><img name="grey" src="pics/glass_small0.jpg" alt="grå glas" /></span>
<ul id="storBild4">
<li id="clear"><img src="pics/glass.jpg" alt="Formgivning av glas" name="bigClear" /></li>
<li id="box"><label><input type="checkbox" name="check" onclick="showClear(4)" /> Formgivning av glas</label></li>
</ul>
</div>
</li>
</ul>
</form>
<form name="form1">
<ul id="namn">
<li>Ekor i sjö: <br /><input type="text" size="15" name="name" value="" /></li>
<li>Fin fjäril: <br /><input type="text" size="15" name="name" value="" /></li>
<li>Stor kyrka: <br /><input type="text" size="15" name="name" value="" /></li>
<li>Vacker blomma: <br /><input type="text" size="15" name="name" value="" /></li>
<li>Formgivning av glas: <br /><input type="text" size="15" name="name" value="" /></li>
</ul>
</form>
<div id=button>
<input type="button" value="Visa bilder" onclick="changeBtnPic(this)" />
<input type="button" value="Markera alla bilder" onclick="allCheck(this)" />
<input type="button" value="Visa bildtext" onclick="changeBtnText(this)" />
<input type="button" value="Visa bildspel" onclick="bildspel()" />
</div>
</body>
</html>
And for the other window with the selected images:
/.../
<script type="text/javascript" language="javascript">
var timeRef = null;
function showImage() {
var droppList = "<select name='lista' onchange='visaLista()'>";
for (var i=0; i<window.opener.text.length; i++)
var droppList = droppList + "<option>" + window.opener.text[i] + "</option>";
var droppList = droppList + "</select>";
document.getElementById("listan").innerHTML = droppList;
document.storBild.src ="pics/" + document.form.lista.options[0].text;
document.storBild.src = window.opener.checked[0];
document.form.lista.selectedIndex = 0;
}
function visaLista() {
with (document.form.lista)
document.storBild.src = window.opener.checked[selectedIndex];
}
function showText(show, i) {
with (document.form.lista)
if (show) {
document.getElementById("textBox").innerHTML = window.opener.text[selectedIndex];
document.getElementById("textBox").style.visibility = "visible";
}
else {
document.getElementById("textBox").style.visibility = "hidden";
}
}
function next() {
with (document.form.lista)
if (selectedIndex < options.length-1) {
selectedIndex++;
document.storBild.src = window.opener.checked[selectedIndex];
}
else {
selectedIndex=0;
document.storBild.src = window.opener.checked[selectedIndex];
}
}
function prev() {
with (document.form.lista)
if (selectedIndex > 0) {
selectedIndex--;
document.storBild.src = window.opener.checked[selectedIndex];
}
else {
selectedIndex = options.length-1;
document.storBild.src = window.opener.checked[selectedIndex];
}
}
function slide() {
with (document.form.lista) {
var selectedIndex = Math.floor(Math.random()*options.length);
document.storBild.src = window.opener.checked[selectedIndex];
}
if (document.form.time.value == "0") {
clearTimeout(timeRef);
}
else {
timeRef = setTimeout("slide()", 1000*document.form.time.value);
}
}
function countDown(button) {
if (document.form.time.value == "0") {
button.value = "stopp";
}
if (button.value == "start") {
button.value = "stopp";
slide();
}
else {
button.value = "start";
clearTimeout(timeRef);
}
}
</script>
</head>
<body onload="showImage()">
<form name="form">
<input type="button" value="Föregående" onclick="prev()" />
<span id="listan"></span>
<input type="button" value="Nästa" onclick="next()" />
<br />Bildspel:
<select name="time">
<option value="0">0 sek</option>
<option value="1">1 sek</option>
<option value="2">2 sek</option>
<option value="4">4 sek</option>
<option value="8">8 sek</option>
</select>
<input type="button" value="start" onclick="countDown(this)" />
</form>
<div id="bilder">
<img name="storBild" src="pics/white.jpg" onmouseover="showText(true, 0)" onmouseout="showText(false, 0)"; />
<div id="textBox"><p></p></div>
</div>
</body>
</html>
Should I do a <body onload="empty()" function to get rid of the previous pictures? I tried this but it didnt work:
function empty(nr){
for (var i=0; i<window.opener.checked.length; i++) {
if (window.opener.checked[i] != "") checked = "";
}
for (var i=0; i<window.opener.text.length; i++) {
if (window.opener.text[i] != "") text = "";
}
}
Or should it be something in the first window?
Any thoughts or ideas that might help me?
First of all, when I click "Markera alla bilder" (select all pics) only half get checked. Why?
Second, when I chose pictures, go to slideshow ("visa bildspel" button), close that window and click the "visa bildspel" button again, the first pictures are still there... How do I get rid of them without having to refresh the first window?
Here is the code for first window:
/.../
<script type="text/javascript" language="javascript">
var windVar = null;
var clear = new Array("pics/boats_small1.jpg","pics/butterfly_small1.jpg","pics/church_small1.jpg","pics/flower_small1.jpg","pics/glass_small1.jpg");
var blur = new Array("pics/boats_small0.jpg","pics/butterfly_small0.jpg","pics/church_small0.jpg","pics/flower_small0.jpg","pics/glass_small0.jpg");
var big = new Array("pics/boats.jpg","pics/butterfly.jpg","pics/church.jpg","pics/flower.jpg","pics/glass.jpg");
var pictxt = new Array("Båtar","Vacker fjäril","Stor kyrka","Fin blomma","Formgivning av glas");
var nr = [0];
var checked = new Array ();
var text = new Array();
function empty(nr) {
for (var i=0; i<document.form.check.length; i++) {
if (document.form.check[i].checked == true) document.form.check[i].checked = false;
}
for (var i=0; i<document.form1.name.length; i++) {
if (document.form1.name[i].value != "") document.form1.name[i].value = "";
}
}
function showPictLayer(nr,show) {
var element = document.getElementById("storBild"+nr);
if (show) element.style.visibility = "visible";
else element.style.visibility = "hidden";
}
function showHidePict(nr) {
var element = document.getElementById("storBild"+nr);
if (element.style.visibility == "visible") show = false;
else var show = true;
for (var i=0; i<5; i++) showPictLayer(i,false);
showPictLayer(nr,show);
}
function showClear(nr) {
for (var i=0; i<document.form.check.length; i++) {
if (document.form.check[i].checked) document.grey[i].src = clear[i];
else document.grey[i].src = blur[i];
}
}
function allCheck(button) {
for (var i=0; i<document.form.check.length; i++) {
if (button.value == "Markera alla bilder") {
document.form.check[i].checked = true;
document.grey[i].src = clear[i];
button.value = "Avmarkera alla bilder";
}
else {
document.form.check[i].checked = false;
document.grey[i].src = blur[i];
button.value = "Markera alla bilder";
}
}
}
function changeBtnPic(button) {
var element = document.getElementById("bilder");
if (button.value == "Visa bilder") {
button.value = "Dölj bilder";
element.style.display = "block";
}
else {
button.value = "Visa bilder";
element.style.display = "none";
}
}
function changeBtnText(button) {
var element = document.getElementById("namn");
if (button.value == "Visa bildtext") {
button.value = "Dölj bildtext";
element.style.display = "block";
}
else {
button.value = "Visa bildtext";
element.style.display = "none";
}
}
function bildspel() {
while (checked.length > 0) checked.pop();
for (var i=0; i<document.form.check.length; i++) {
if (document.form.check[i].checked == true) {
checked.push(document.bigClear[i].src);
if (document.form1.name[i].value !="")
text.push(document.form1.name[i].value);
else text.push(document.bigClear[i].alt);
}
}
if (checked == "") {
alert("Inga bilder förkryssade. Vänligen välj de bilder du vill se i bildspelet")
}
else {
newWindow(600,600,"bildspel2b.html");
}
}
function newWindow(width,height,fileName) {
var windProperties = "toolbar=0,location=0,status=0,menubar=0,scrollbars=1,resizable=1,width=" + width + ",height=" + height;
if (windVar != null) if (windVar.closed == false) windVar.close();
windVar = window.open(fileName,"bildspel",windProperties);
}
</script>
</head>
<body onload="empty()">
<form name="form">
<ul id="bilder">
<li class="bildBox">
<div onmouseover="showPictLayer(0,true)" onmouseout="showHidePict(0,false)"><span><img name="grey" src="pics/boats_small0.jpg" alt="grå båt" /></span>
<ul id="storBild0">
<li id="clear"><img src="pics/boats.jpg" alt="Ekor i sjö" name="bigClear" /></li>
<li id="box"><label><input type="checkbox" name="check" onclick="showClear(0)" /> Ekor i sjö</label></li>
</ul>
</div>
</li>
<li class="bildBox">
<div onmouseover="showPictLayer(1,true)" onmouseout="showHidePict(1,false)"><span><img name="grey" src="pics/butterfly_small0.jpg" alt="grå fjäril" /></span>
<ul id="storBild1">
<li id="clear"><img src="pics/butterfly.jpg" alt="Fin fjäril" name="bigClear" /></li>
<li id="box"><label><input type="checkbox" name="check" onclick="showClear(1)" /> Fin fjäril</label></li>
</ul>
</div>
</li>
<li class="bildBox">
<div onmouseover="showPictLayer(2,true)" onmouseout="showHidePict(2,false)"><span><img name="grey" src="pics/church_small0.jpg" alt="grå kyrka" /></span>
<ul id="storBild2">
<li id="clear"><img src="pics/church.jpg" alt="Stor kyrka" name="bigClear" /></li>
<li id="box"><label><input type="checkbox" name="check" onclick="showClear(2)" /> Stor kyrka</label></li>
</ul>
</div>
</li>
<li class="bildBox">
<div onmouseover="showPictLayer(3,true)" onmouseout="showHidePict(3,false)"><span><img name="grey" src="pics/flower_small0.jpg" alt="grå blomma" /></span>
<ul id="storBild3">
<li id="clear"><img src="pics/flower.jpg" alt="Vacker blomma" name="bigClear" /></li>
<li id="box"><label><input type="checkbox" name="check" onclick="showClear(3)" /> Vacker blomma</label></li>
</ul>
</div>
</li>
<li class="bildBox">
<div onmouseover="showPictLayer(4,true)" onmouseout="showHidePict(4,false)"><span><img name="grey" src="pics/glass_small0.jpg" alt="grå glas" /></span>
<ul id="storBild4">
<li id="clear"><img src="pics/glass.jpg" alt="Formgivning av glas" name="bigClear" /></li>
<li id="box"><label><input type="checkbox" name="check" onclick="showClear(4)" /> Formgivning av glas</label></li>
</ul>
</div>
</li>
</ul>
</form>
<form name="form1">
<ul id="namn">
<li>Ekor i sjö: <br /><input type="text" size="15" name="name" value="" /></li>
<li>Fin fjäril: <br /><input type="text" size="15" name="name" value="" /></li>
<li>Stor kyrka: <br /><input type="text" size="15" name="name" value="" /></li>
<li>Vacker blomma: <br /><input type="text" size="15" name="name" value="" /></li>
<li>Formgivning av glas: <br /><input type="text" size="15" name="name" value="" /></li>
</ul>
</form>
<div id=button>
<input type="button" value="Visa bilder" onclick="changeBtnPic(this)" />
<input type="button" value="Markera alla bilder" onclick="allCheck(this)" />
<input type="button" value="Visa bildtext" onclick="changeBtnText(this)" />
<input type="button" value="Visa bildspel" onclick="bildspel()" />
</div>
</body>
</html>
And for the other window with the selected images:
/.../
<script type="text/javascript" language="javascript">
var timeRef = null;
function showImage() {
var droppList = "<select name='lista' onchange='visaLista()'>";
for (var i=0; i<window.opener.text.length; i++)
var droppList = droppList + "<option>" + window.opener.text[i] + "</option>";
var droppList = droppList + "</select>";
document.getElementById("listan").innerHTML = droppList;
document.storBild.src ="pics/" + document.form.lista.options[0].text;
document.storBild.src = window.opener.checked[0];
document.form.lista.selectedIndex = 0;
}
function visaLista() {
with (document.form.lista)
document.storBild.src = window.opener.checked[selectedIndex];
}
function showText(show, i) {
with (document.form.lista)
if (show) {
document.getElementById("textBox").innerHTML = window.opener.text[selectedIndex];
document.getElementById("textBox").style.visibility = "visible";
}
else {
document.getElementById("textBox").style.visibility = "hidden";
}
}
function next() {
with (document.form.lista)
if (selectedIndex < options.length-1) {
selectedIndex++;
document.storBild.src = window.opener.checked[selectedIndex];
}
else {
selectedIndex=0;
document.storBild.src = window.opener.checked[selectedIndex];
}
}
function prev() {
with (document.form.lista)
if (selectedIndex > 0) {
selectedIndex--;
document.storBild.src = window.opener.checked[selectedIndex];
}
else {
selectedIndex = options.length-1;
document.storBild.src = window.opener.checked[selectedIndex];
}
}
function slide() {
with (document.form.lista) {
var selectedIndex = Math.floor(Math.random()*options.length);
document.storBild.src = window.opener.checked[selectedIndex];
}
if (document.form.time.value == "0") {
clearTimeout(timeRef);
}
else {
timeRef = setTimeout("slide()", 1000*document.form.time.value);
}
}
function countDown(button) {
if (document.form.time.value == "0") {
button.value = "stopp";
}
if (button.value == "start") {
button.value = "stopp";
slide();
}
else {
button.value = "start";
clearTimeout(timeRef);
}
}
</script>
</head>
<body onload="showImage()">
<form name="form">
<input type="button" value="Föregående" onclick="prev()" />
<span id="listan"></span>
<input type="button" value="Nästa" onclick="next()" />
<br />Bildspel:
<select name="time">
<option value="0">0 sek</option>
<option value="1">1 sek</option>
<option value="2">2 sek</option>
<option value="4">4 sek</option>
<option value="8">8 sek</option>
</select>
<input type="button" value="start" onclick="countDown(this)" />
</form>
<div id="bilder">
<img name="storBild" src="pics/white.jpg" onmouseover="showText(true, 0)" onmouseout="showText(false, 0)"; />
<div id="textBox"><p></p></div>
</div>
</body>
</html>
Should I do a <body onload="empty()" function to get rid of the previous pictures? I tried this but it didnt work:
function empty(nr){
for (var i=0; i<window.opener.checked.length; i++) {
if (window.opener.checked[i] != "") checked = "";
}
for (var i=0; i<window.opener.text.length; i++) {
if (window.opener.text[i] != "") text = "";
}
}
Or should it be something in the first window?
Any thoughts or ideas that might help me?