'Slideshows' - Softwareontwikkeling

zondag 29 april 2007 14:43

Acties:

Topicstarter

Hallo,

Ik heb al weer een tijdje geleden een 'slideshow' programma gemaakt in Javascript, op zich is hij erg simpel. Maar hé, het werk! Nou ja, bijna dan.

Hier kan je het 'live' in actie zien:
http://brug.strictstudio.nl/?pageid=1&color=pink

Rechtsonder veranderen de plaatjes dus door in en uitfaden, dit werkt helemaal prima, behalfe in IE6? Daar hapert het nogal.

Iemand die ik ken heeft mijn stukje javascript ook gebruikt op zijn site, en daar werkt het wel prima in IE6?

http://kartoenweb.com/def...8&action=dia&id=28&pview=

Hier trouwens het stukje JS wat er voor zorgt dat het werkt.

http://brug.strictstudio.nl/slideshow/slideshow.js

De variabelen die de locatie van de bestanden bevatten, en de tijd tussen de overlopingen staan in de html broncode tussen script tags.

Zelf dacht ik dat het aan het stukje JS lag dat ik gebruik om er voor te zorgen dat transparante PNG's ook in IE6 werken, maar dit bleek dus niet zo te zijn, aangezien als ik het uit heb staan dan hapert het nog steeds.

Iemand enig idee waar het aan ligt?

Claude: "Domain patterns emerge from iteration, not generation." - Tweakers Time Machine Extension | Chrome : FF

zondag 29 april 2007 14:55

Acties:

ibmos2warp

Eval is Evil

Ik denk dat het komt doordat je 2 div's hebt, boven elkaar. In de onderste plaats je het "volgende" plaatje, en dan weer anders om. Dan gooi je met javascript een alpha / opacity over de div die het plaatje heeft, om te zorgen dat deze doorzichtig word zodat je de volgende kan zien.
Volgens mij is dit gewoon een brak scriptie, ik zou met flash werken of een andere halen.

offtopic:
De locatie's van de plaatjes vind ik ook een beetje vaag trouwens, %2F moet gewoon / zijn.

Ik weet alles van niks
Vind Excel ongelovelijk irritant.

zondag 29 april 2007 14:56

Acties:

BasieP

wat ik zie is geen slideshow maar een crossfade script..

verder lijkt het dus niet aan de JS te liggen want die werkt bij een ander wel (zeg je zelf)

kortom, het is iets anders op jouw site..
dan komt debugging aan de orde.

1: zet alles uit (dus al je divjes in html behalve de crossfade, en al je JS's)
2: zet alles 1 voor 1 weer aan.

als het opeens niet meer werkt dan weet je wat het is..

ibmos2warp schreef op zondag 29 april 2007 @ 14:55:
Ik denk dat het komt doordat je 2 div's hebt, boven elkaar. In de onderste plaats je het "volgende" plaatje, en dan weer anders om. Dan gooi je met javascript een alpha / opacity over de div die het plaatje heeft, om te zorgen dat deze doorzichtig word zodat je de volgende kan zien.

das de definitie van crossfade ongeveer

Volgens mij is dit gewoon een brak scriptie, ik zou met flash werken of een andere halen.

wat een nuttige bijdrage..
die beste TS vraagt iets over zijn scriptje, en jij komt aan met 'gooi maar weg'
daar zit niemand op te wachten..

@TS:
ik gebruik zelf ook crossfade script voor me eigen site, misschien kan je daar wat mee (zie sig)

[ Voor 49% gewijzigd door BasieP op 29-04-2007 14:58 ]

This message was sent on 100% recyclable electrons.

zondag 29 april 2007 15:49

Acties:

ibmos2warp

Eval is Evil

BasieP schreef op zondag 29 april 2007 @ 14:56:
[...]
das de definitie van crossfade ongeveer

Daaraan had ik niet gedacht... Maar het is idd een crossfade.

BasieP schreef op zondag 29 april 2007 @ 14:56:
[...]
wat een nuttige bijdrage..
die beste TS vraagt iets over zijn scriptje, en jij komt aan met 'gooi maar weg'
daar zit niemand op te wachten..

Ik heb het persoonlijk niet zo op die opacity van javascript, want de ene keer werkt het wel en de andere keer weer niet, en in ie werkt het weer anders dan in ff... Maar idd had ik wel iets kunnen zeggen zoals "probeer het eens op de manier die vriend van je gebruikt, werkt het dan wel?" Of wat jij zegt.

Ik weet alles van niks
Vind Excel ongelovelijk irritant.

zondag 29 april 2007 17:36

Acties:

ZpAz

Topicstarter

"probeer het eens op de manier die vriend van je gebruikt, werkt het dan wel?" Of wat jij zegt.

Dat is precies het punt, hij gebruikt excact dezelfde code.

Claude: "Domain patterns emerge from iteration, not generation." - Tweakers Time Machine Extension | Chrome : FF

zondag 29 april 2007 18:46

Acties:

ibmos2warp

Eval is Evil

ZpAz schreef op zondag 29 april 2007 @ 17:36:
[...]
Dat is precies het punt, hij gebruikt excact dezelfde code.

Das niet waar... Zo doe jij het:

HTML:

<head>
<script type="text/javascript">
    function callStart() {
    if(document.getElementById('slideshow')) {
    changePic();
    }
    }
</script>
</head>
<body onload="callStart()">

Wel wat weggeknipt +

HTML:

<!--- Required code for SlideShow Player -->
<script type="text/javascript">
var theFiles = new Array('slideshow/resize.php?file=..%2Fuploads%2Fslideshows%2Ftest2%2F762198_mandarine.jpg&width=160&height=130', 'slideshow/resize.php?file=..%2Fuploads%2Fslideshows%2Ftest2%2FPoster+Brug+klein.jpg&width=160&height=130', 'slideshow/resize.php?file=..%2Fuploads%2Fslideshows%2Ftest2%2F767630_strawberrys.jpg&width=160&height=130', 'slideshow/resize.php?file=..%2Fuploads%2Fslideshows%2Ftest2%2F767628_fruit_in_basket.jpg&width=160&height=130', 'slideshow/resize.php?file=..%2Fuploads%2Fslideshows%2Ftest2%2F768773_shakes.jpg&width=160&height=130', 'slideshow/resize.php?file=..%2Fuploads%2Fslideshows%2Ftest2%2F768178_lemon_and_oranges.jpg&width=160&height=130');

var time = 3000;
     
</script>
<script type="text/javascript" src="slideshow/slideshow.js"></script>
<!--- END Required code for SlideShow Player -->
    
<div class="block"><p>Hier een fotoshoot!</p>

<!-- Actual SlideShow Player -->
<a href="?color=pink&pageid=1&slideshow=57">
<div id="slideshow" style="border-style:solid; border-width:1px; border-color:#cccccc; width:160px; height:130px; position:relative;">
    <div id="frame1" style="width:160px; height:130px; position:absolute; top:0px; left:0px; z-index:1;"></div>
    <div id="frame2" style="width:160px; height:130px; position:absolute; top:0px; left:0px; z-index:0;"></div>
</div>
</a>
<!-- END Actual SlideShow Player -->

Je vriend doet het op deze manier:

HTML:

<!--- Required code for SlideShow Player -->
<script type="text/javascript">
var theFiles = new Array('fotogallery/28/images/FG2480.jpg','fotogallery/28/images/FG115083.jpg','fotogallery/28/images/FG115177.jpg','fotogallery/28/images/FG115243.jpg','fotogallery/28/images/FG115363.jpg','fotogallery/28/images/FG115460.jpg','fotogallery/28/images/FG115558.jpg','fotogallery/28/images/FG115659.jpg','fotogallery/28/images/FG115760.jpg','fotogallery/28/images/FG115854.jpg','fotogallery/28/images/FG115933.jpg','fotogallery/28/images/FG116066.jpg','fotogallery/28/images/FG116125.jpg','fotogallery/28/images/FG11626.jpg','fotogallery/28/images/FG116340.jpg','fotogallery/28/images/FG116411.jpg','fotogallery/28/images/FG116567.jpg','fotogallery/28/images/FG116616.jpg','fotogallery/28/images/FG116745.jpg','fotogallery/28/images/FG116840.jpg','fotogallery/28/images/FG116991.jpg','fotogallery/28/images/FG117078.jpg','fotogallery/28/images/FG117198.jpg','fotogallery/28/images/FG11723.jpg','fotogallery/28/images/FG117351.jpg','');

var time = 3000;
var number = 0; //This holds the current picture
var first = true; //First time in loop don't change picture

//this function will change the picture
function changePic() {

var frame1 = document.getElementById('frame1'); //This is the picture frame
var frame2 = document.getElementById('frame2'); //This is the second picture frame
    //Change the first picture
    frame1.style.backgroundImage = 'url(' + theFiles[number] + ')'; //Set the new picture

if(first != true) { // dont change picture first time
    number++; } //goto next picture
    if(number == (theFiles.length)) { //When the current picture is equal to the heighest in the array reset to 0
        number = 0; }
        
    //Change the second picture
    frame2.style.backgroundImage = 'url(' + theFiles[number] + ')'; //Set the second picture
    
if(first != true) { // dont change opacity first time
    //Call the changeOpac function, to create a nice effect
    changeOpac(); } 

//set firsttime false, so opacity will be changed from now on
first = false;
    setTimeout('changePic();',time); //recall this function after xxxx milisec
}


//This function changes the opacity, just to create a nice effect
var opacity = 10; //No opacity
function changeOpac() {
var frame1 = document.getElementById('frame1'); //This is the picture frame

opacity -= 1; // lower value

    if(opacity >= 0) { //when not fully invisible
    
        frame1.style.opacity = (opacity / 10);  //change opacity for non IE browsers
        frame1.style.filter = 'alpha(opacity=' + (opacity * 10) + ')'; //change opacity for IE browsers
        
        setTimeout('changeOpac();',60); //recall function 
    }

    else { // invisible
        opacity = 10; } //reset value
}    
</script>
<!--- END Required code for SlideShow Player -->


<body onLoad="changePic();">


<!-- Actual SlideShow Player -->
<center>
<div id="slideshow" style="width:460px; height:345px; position:relative;">
    <div id="frame1" style="width:460px; height:345px; position:absolute; top:0px; left:20px; z-index:1;"></div>
    <div id="frame2" style="width:460px; height:345px; position:absolute; top:0px; left:20px; z-index:0;"></div>
</div>
</center>
<!-- END Actual SlideShow Player -->

Daar zit toch wel een verschil in. Let ook op, beide manieren zijn niet helemaal netjes, je vriend plaatst bijvoorbeeld midden in de pagina een body tag, dat mag niet. Jij gebruikt %2F ivp /, dat is ook niet netjes...

Ik weet alles van niks
Vind Excel ongelovelijk irritant.

zondag 29 april 2007 20:33

Acties:

ZpAz

Topicstarter

Alles wat in die src staat die ik toevoeg heeft hij gewoon rechtstreeks geecho't in de bron, verschil lijkt mij dat niet maken?

Dat ifje wat ik helemaal boven aan heb staan om de functie te starten als het object er daadwerkelijk is heb ik om error's te voorkomen.

Anders wil hij de functie starten, en is het object er mischien niet.

Ook nadat ik de urlencode van de bestanden af heb gehaald is er nog geen verschil, ik zal eens kijken naar de andere reacties in dit topic, in ieder geval alvast bedankt.

Claude: "Domain patterns emerge from iteration, not generation." - Tweakers Time Machine Extension | Chrome : FF