Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webprogrammeren & scripting

javascript slideshow

None
30 antwoorden
  • Ik ben dus bezig met een javascript slideshow.
    Je kan hem hier aan het werk zien.

    Dit is de html (met javascript en css):

    [code:1:f8065bf4d3]
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <style type="text/css">
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    }
    body {
    line-height: 1;
    }
    ol, ul {
    list-style: none;
    }
    blockquote, q {
    quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    content: '';
    content: none;
    }

    /* remember to define focus styles! */
    :focus {
    outline: 0;
    }

    /* remember to highlight inserts somehow! */
    ins {
    text-decoration: none;
    }
    del {
    text-decoration: line-through;
    }

    /* tables still need 'cellspacing="0"' in the markup */
    table {
    border-collapse: collapse;
    border-spacing: 0;
    }
    .sliderGallery {
    white-space: nowrap;
    overflow:hidden;
    position: relative;
    border:5px solid #ddd;
    width:668px;
    height:400px;
    }
    .sliderGallery UL {
    position: absolute;
    list-style: none;
    overflow:hidden;
    white-space: nowrap;
    padding: 0;
    margin: 0;
    }

    .sliderGallery UL LI {
    display: inline;
    }
    .sliderGallery UL LI img{
    width:668px;
    height:400px;
    }
    </style>
    <script type="text/javascript">

    function preload(){
    // Nodige DOM objecten toewijzen aan een variabele
    var gallery = document.getElementById("sliderGallery");
    var itemsul = document.getElementById("items");
    var items = itemsul.getElementsByTagName("li");
    var spans = document.getElementById("slider").getElementsByTagName("span");
    var p;
    // Array met de breedte van de afbeeldingen
    var width = [];
    // Array met de hoogte van de afbeeldingen
    var height= [];
    // Array met de posities van de afbeeldingen (negatief)
    var pos = [];
    // om de posities te berekenen
    var rpos = 0;
    // huidige afbeelding (Current Image)
    var ci = 0;
    // width[], height[] en pos[] opvullen met de afmetingen van de afbeeldingen
    for(var i = 0;i<items.length;i++){
    width.push(items[i].offsetWidth);
    height.push(items[i].offsetHeight);
    if (i != 0) {
    rpos += items[i].offsetWidth;
    pos.push("-" + rpos);
    }
    else{
    pos.push("0");
    }

    }
    // zet de margin-left van de ul op 0;

    itemsul.style.marginLeft = "0px";
    // de onclick voor #slider
    document.getElementById("slider").addEventListener("click",
    function(){
    // huidige positie (Current Position)
    var curpos = itemsul.style.marginLeft;
    // De margin-left staat in px, dus de px moeten weg om ermee te kunnen rekenen
    curpos = curpos.replace("px","");
    // maak curpos korter
    var k = curpos;
    // positie waar we naartoe willen (Ultimate Position), dit is ci + 1 in de pos[] array
    var ultpos = pos[ci + 1];
    // check of ultpos niet undefined is, wat erop wijst dat ci te hoog is
    if (ultpos !== undefined) {
    // zet een interval in
    var int = setInterval(function(){
    // k wordt telkens -83.5 gedaan
    k -= 83.5;
    // wijs k (+px) toe aan de margin-left van de ul
    itemsul.style.marginLeft = k + "px";
    // stop de interval als k gelijk is aan ultpos, dus als de gewenste positie is bereikt
    if (k == ultpos) {
    // ci plus 1
    ci += 1;

    clearInterval(int);
    }, 5)
    }
    // als ultpos undefined is, is ci te groot en gaan we gewoon terug naar de eerste afbeelding
    else{
    var ultpos = pos[0];
    var int = setInterval(function(){
    k = parseFloat(k);
    k += 83.5;
    itemsul.style.marginLeft = k + "px";
    if (k == ultpos) {
    ci = 0;
    console.log("r");
    clearInterval(int);
    }
    }, 5)
    }



    },false);
    // onclick functie voor de linker slider #slidel
    document.getElementById("slidel").addEventListener("click",
    function(){
    // wijs curpos toe
    var curpos = itemsul.style.marginLeft;
    // haal px eraf
    curpos = curpos.replace("px","");
    curpos = parseFloat(curpos);
    // hier willen we de andere kant uit, dus ci - 1 i.p.v. ci + 1
    var ultpos = pos[ci-1];
    // curpos wordt weer korter, k
    var k = curpos;
    // zet interval in
    var int = setInterval(function(){

    k = parseFloat(k);
    // k+= 83.5 , i.p.v. k-=83.5, omdat we de andere kant uit willen
    k += 83.5;
    // wijs k toe aan de margin-left van de ul
    itemsul.style.marginLeft = k + "px";
    // als we op de juiste positie zijn, stop de interval
    if (k == ultpos) {
    // ci-1 omdat we een img vroeger zitten
    ci -= 1;
    // stop de interval
    clearInterval(int);
    }
    }, 5)


    },false);

    }
    // onload
    window.onload = function(){
    preload();
    }


    </script>
    </head>
    <body>
    <div id="sliderGallery" class="sliderGallery">
    <ul id="items">
    <li class="item"><img src="../My Web Sites/goed/photosite/photo's/IMG_1257.JPG"/></li>
    <li class="item"><img src="../My Web Sites/goed/photosite/photo's/IMG_1659.JPG"/></li>
    <li class="item"><img src="../My Web Sites/goed/photosite/photo's/IMG_4955.JPG"/></li>
    </ul>

    </div>
    <div id="slider">

    <span id="slidel">&lt;</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <span id="slider">&gt;</span>
    </div>
    </body>
    </html>
    [/code:1:f8065bf4d3]

    Nu kom ik dus bij mijn probleem:

    De pijl naar rechts #slider werkt perfect als ik erop klik.

    Maar dan de pijl naar links, hij doet totaal niet wat ik ervan verwacht. Ik weet niet wat er fout is…
    Ik heb al log statements gemaakt en hieruit blijkt denk ik dat eerst de de functie toegewezen aan #slidel runt met een undefined ultpos en daarna de functie toegewezen aan #slider, het gaat dus totaal mis.

    Zou iemand me kunnen helpen?
  • Niemand een idee?
  • Ik heb een deel van de oplossing: ik heb de functie toegewezen aan #slidel gewoon weggedaan en als ik nu op #slidel klik, wordt gewoon de functie gekoppeld aan #slider uitgevoerd.

    Ik heb totaal geen idee hoe dit komt?
  • ik begrijp zelf nog niks van javascript, maar misschien heb je hier wat aan?

    http://www.tutorialized.com/view/tutorial/Creating-a-JavaScript-image-slideshow/1345
  • Nee, daar heb ik niet zoveel aan, maar toch bedankt.

    Ik heb mijn fout gevonden –> een héle domme :oops:

    Nu werkt mijn script in Chrome, IE9, Opera, safari

    alleen in firefox werkt de linkerknop niet.
    Hij gaat wel een beetje in de gewenste richting, maar houdt na één keer op.

    Hier is mijn volledige html nog eens:
    [code:1:d1af95b123]
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <style type="text/css">
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    }
    body {
    line-height: 1;
    }
    ol, ul {
    list-style: none;
    }
    blockquote, q {
    quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    content: '';
    content: none;
    }

    /* remember to define focus styles! */
    :focus {
    outline: 0;
    }

    /* remember to highlight inserts somehow! */
    ins {
    text-decoration: none;
    }
    del {
    text-decoration: line-through;
    }

    /* tables still need 'cellspacing="0"' in the markup */
    table {
    border-collapse: collapse;
    border-spacing: 0;
    }
    .sliderGallery {
    white-space: nowrap;
    overflow:hidden;
    position: relative;
    border:5px solid #ddd;
    width:668px;
    height:400px;
    }
    .sliderGallery UL {
    position: absolute;
    list-style: none;
    overflow:hidden;
    white-space: nowrap;
    padding: 0;
    margin: 0;
    }

    .sliderGallery UL LI {
    display: inline;
    }
    .sliderGallery UL LI img{
    width:668px;
    height:400px;
    }
    </style>
    <script type="text/javascript">
    function preload(){
    // Nodige DOM objecten toewijzen aan een variabele
    var gallery = document.getElementById("sliderGallery");
    var itemsul = document.getElementById("items");
    var items = itemsul.getElementsByTagName("li");
    var spans = document.getElementById("slider").getElementsByTagName("span");
    var p;
    // Array met de breedte van de afbeeldingen
    var width = [];
    // Array met de hoogte van de afbeeldingen
    var height= [];
    // Array met de posities van de afbeeldingen (negatief)
    var pos = [];
    // om de posities te berekenen
    var rpos = 0;
    // huidige afbeelding (Current Image)
    var ci = 0;
    // width[], height[] en pos[] opvullen met de afmetingen van de afbeeldingen for(var i = 0;i<items.length;i++){
    width.push(items[i].offsetWidth);
    height.push(items[i].offsetHeight);
    if (i != 0) {
    rpos += items[i].offsetWidth;
    pos.push("-" + rpos);
    }
    else{
    pos.push("0");
    }

    }
    // zet de margin-left van de ul op 0;
    itemsul.style.marginLeft = "0px";
    // de onclick voor #sliderd
    document.getElementById("sliderd").addEventListener("click",
    function(){
    // huidige positie (Current Position
    var curpos = itemsul.style.marginLeft;
    // De margin-left staat in px, dus de px moeten weg om ermee te kunnen rekenen
    curpos = curpos.replace("px","");
    // maak curpos korter
    var k = curpos;
    // positie waar we naartoe willen (Ultimate Position), dit is ci + 1 in de pos[] array
    var ultpos = pos[ci + 1];
    // check of ultpos niet undefined is, wat erop wijst dat ci te hoog is
    if (ultpos !== undefined) {
    // zet een interval in
    var int = setInterval(function(){
    // k wordt telkens -83.5 gedaan
    k -= 83.5;
    // wijs k (+px) toe aan de margin-left van de ul
    itemsul.style.marginLeft = k + "px";
    // stop de interval als k gelijk is aan ultpos, dus als de gewenste positie is bereikt
    if (k == ultpos) {
    // ci plus 1
    ci += 1;
    // clear de interval
    clearInterval(int);
    }
    }, 5);
    }
    // als ultpos undefined is, is ci te groot en gaan we gewoon terug naar de eerste afbeelding
    else{
    // de positie waar we naartoe willen is dan 0, we gaan dus gewoon de andere richting uit
    var ultpos = pos[0];
    // begin een interval
    var int = setInterval(function(){
    // maak een float van k, anders werkt het niet
    k = parseFloat(k);
    // k telkens plus 83.5
    k += 83.5;
    // wijs k + px toe aan de margin-left van de itemsul
    itemsul.style.marginLeft = k + "px";
    // als de positie bereikt is
    if (k == ultpos) {
    // zet ci op 0
    ci = 0;
    // stop de interval
    clearInterval(int);
    }
    }, 5);
    }
    },false);
    // onclick functie voor de linker slider #slideld
    document.getElementById("slideld").addEventListener("click",
    function(){
    // wijs curpos toe
    var curpos = itemsul.style.marginLeft;
    // haal px eraf
    curpos = curpos.replace("px","");
    // curpos wordt weer korter, k
    var k = curpos;
    // als ci-1 kleiner is als 0, moeten we de tegengestelde richting uit
    if(ci-1 < 0){
    // ultpos is dan gelijk aan de eerste afbeelding aan de andere kant, dus pos.length-1
    var ultpos = pos[pos.length-1];
    // begin een interval
    var int = setInterval(function(){
    // telkens k min 83.5
    k-=83.5;
    // wijs k + px toe aan de margin-left van de itemsul
    itemsul.style.marginLeft = k + "px";
    // als de juiste positie bereikt is
    if(k == ultpos){
    // zet ci juist: pos.length-1
    ci = pos.length-1;
    // stop de interval
    clearInterval(int);
    }
    });
    }
    // als ci-1 niet kleiner is als 0, dan kunnen we de gewone richting uitgaan
    else{
    // we willen één afbeelding naar links, dus huidige afbeeling(ci) min 1
    var ultpos = pos[ci-1];
    // begin een interval
    var int = setInterval(function(){
    // zet k om in een float, anders werkt het niet
    k = parseFloat(k);
    // k plus 83.5
    k+=83.5;
    // wijs k plus px toe aan de margin-left van de itemsul
    itemsul.style.marginLeft = k + "px";
    // als de juiste positie bereikt is
    if(k == ultpos){
    // we zijn één afbeelding naar links gegaan,dus ci = ci-1
    ci = ci-1;
    // stop de Interval
    clearInterval(int);
    }
    });
    }


    },false);

    }

    // als het document geladen is, zet de preload functie in gang.
    window.onload = function(){
    preload();
    }


    </script>
    </head>

    <body>
    <div id="sliderGallery" class="sliderGallery">

    <ul id="items">
    <li class="item"><img src="http://0.tqn.com/d/kidsfashion/1/0
    /U/bbsingle.jpg"/></li>
    <li class="item"><img src="http://pic20.picturetrail.com/VOL85/6345075/23561708/396755111.jpg"/></li>
    <li class="item"><img src="http://autosguides.com/wp-content/uploads/2010/12/2010-Yamaha-YZF-R-1252.jpg"/></li>
    <li class="item"><img src="http://i51.tinypic.com/2eyjk0m.jpg"/></li>
    </ul>

    </div>

    <div id="slider">
    <span id="slideld"><button>&lt;</button></span>
    <span id="sliderd"><button>&gt;</button></span>


    </div>
    </body>
    </html>


    [/code:1:d1af95b123]


    en hier kan je het live aan het werk zien.

    Het werkt alleen niet met firefox.
    Weet iemand hoe dit komt?

    Ik heb nog één probleem:
    al je op de slider naar rechts klikt, zal je helemaal links van de afbeelding een dikke witte rand zien.
    [img:d1af95b123]http://mikesmikkel.webuda.com/Knipsel.JPG[/img:d1af95b123]
    Hoe komt dit?
    Kan iemand dit oplossen?

    Alvast bedankt!
  • Ik heb het probleem met firefox ook al opgelost, zou iemand mij nu kunnen helpen met mijn tweede probleem:

    [quote:b3d3370a4c]
    Ik heb nog één probleem:
    al je op de slider naar rechts klikt, zal je helemaal links van de afbeelding een dikke witte rand zien.

    Hoe komt dit?
    Kan iemand dit oplossen?
    [img:b3d3370a4c]http://mikesmikkel.webuda.com/Knipsel.JPG[/img:b3d3370a4c]
    Alvast bedankt!
    [/quote:b3d3370a4c]
  • Weet echt niemand een oplossing?? :?
  • Ik heb geen oplossing maar kan wel zeggen dat het geen witte rand is, maar een randje van de andere foto. Waarschijnlijk schuif je iets teveel of wordt er iets verkeerd berekend.
    wimb
  • [quote:c251b0fda3="mikesmikkel"]Weet echt niemand een oplossing?? :?[/quote:c251b0fda3]Je verwacht binnen 2 uur een oplossing? :roll:
  • [quote:c72b1dc16d="mikesmikkel"]Niemand een idee?[/quote:c72b1dc16d]

    [quote:c72b1dc16d="mikesmikkel"]Weet echt niemand een oplossing??[/quote:c72b1dc16d]

    Even ingrijpen: dit soort posts willen we hier niet meer zien.
  • Mijn excuses aan Ger en teacher.

    @teacher: zou je die twee posts a.u.b. kunnen verwijderen?
  • @wimb: Ik heb alles gecontroleerd, en ik denk dat de "witte rand" gewoon een ruimte tussen de twee afbeeldingen is, maar dan transparant, want als ik de background van SliderGallery verander, verandert background van de "rand" ook mee.
    Ik vraag mij af hoe er plaats zou kunnen zitten tussen twee afbeeldingen, na een grondige style reset.
  • Ik heb het probleem gevonden, maar vraag me niet hoe het komt, want dat weet ik nog altijd niet.

    In de css stond dit:
    [code:1:29464cccb0]
    .sliderGallery{
    white-space: nowrap;
    }

    .sliderGallery UL {
    white-space:nowrap;
    }
    [/code:1:29464cccb0]

    Dat heb ik dus weggelaten.
    Toen gaf het een héél raar effect.

    Er stond ook nog dit:
    [code:1:29464cccb0]
    .sliderGallery UL LI {
    display: inline;
    }
    [/code:1:29464cccb0]

    Dit heb ik veranderd in float:left, en alles werkte!
    De border is dus weg.

    Bedankt voor de hulp!!
    En nogmaals sorry voor mijn opdringerigheid. :oops:

    P.S. Dit topic mag gesloten worden. :D
  • De afgewerkte slider is te zien op mikesmikkel.webuda.com.
  • Beste Mike,

    Ik zag je topic toen je hem net postte en door tijdgebrek heb ik mezelf de tijd niet gegund om er naar te kijken. Ik had toen al een vermoeden dat het topic zo zou lopen als het nu gedaan heeft.

    Misschien heb je dan wat meer aan tips over debuggen e.d. Beschik je al over tools als:
    - Firebug(In chrome en IE heb je al soortgelijke tools ingebouwd)
    - Developer toolbar

    Je kan met Firebug bijvoorbeeld door de javascriptcode lopen terwijl deze wordt uitgevoerd. Je kan dan precies zien op elk moment in de executie cyclus zien wat de waarde van variablen zijn en wat de volgende regel code voor gevolg heeft. Ook kan je de css bekijken van een bepaald element en deze realtime aanpassen. De developer toolbar is handig voor de simpele dingen: javascript uitzetten, een console waar de javascript errors inkomen e.d. Als je nog niet bekend bent met deze tools: Probeer ze uit! Ze maken het debuggen van javascript, html, css een stuk makkelijker!

    De laatste tip die ik je wil meegeven is dat als je code post, post deze dan zo compact mogelijk. Je kopieert nu je complete source file over in dit topic. Ik wil best even naar een stukje code kijken, maar de moed zakt me al in de schoenen als ik een hele pagina aan code zie die door het forum nog slecht opgemaakt is ook. Dus als je code post: Plaats alleen relevante code (de css is het openingstopic totaal niet relevant), je kan eventueel de javascript en html scheiden. Je zou ook als het veel code is, een link kunnen geven naar een online txt ofzo waar de code wel netjes is in opgemaakt. De link van een werkend voorbeeld is wel handig ;)

    Succes en hopelijk doe je wat met me tips. Als je wat vragen hebt, pb maar :)
  • Ten eerste, post niet zo snel een probleem die je vervolgens een paar uur later oplost.
    En voor een volgende keer, NOOIT REAGEREN OP JE EIGEN LAATSTE POST.
  • Hallo blackhawkdesign

    Ik had firebug al.
    Maar dit weet ik niet hoe je dit doet:

    [quote:ed7adff752="blackhawkdesign"]
    Je kan met Firebug bijvoorbeeld door de javascriptcode lopen terwijl deze wordt uitgevoerd. Je kan dan precies zien op elk moment in de executie cyclus zien wat de waarde van variablen zijn en wat de volgende regel code voor gevolg heeft.
    [/quote:ed7adff752]

    En ik heb ondertussen ook developer toolbar gedownload –> inderdaad zeer handig! Bedankt voor de tip!
  • Ik heb ook een nieuwe vraag.
    Als je nu http://mikesmikkel.webuda.com bezoekt, krijg je de slider te zien, die goed werkt.

    Ik dacht, ik voeg een andere functie toe:
    als je met je muis over een afbeelding gaat, verandert je cursor in een vergrootglas, als je dan op de afbeelding klikt, wordt de afbeelding in het groot getoond.

    Je hebt dus de #canvas, met width en height 100% en position absolute, die voor het transparante overlay zorgt.

    Daarin staat de #wrapper,waar ik dus géén absolute width en height voor kan bepalen, omdat de hoogte en breedte van alle afbeeldingen anders zijn.
    Dus ik dacht hem met een absolute positie te centreren:

    [code:1:1d34f1bb96]
    #wrapper{
    position:absolute;
    left:50%;
    top:50%;
    z-index:800;
    }
    [/code:1:1d34f1bb96]

    Maar nu het probleem: ik heb er dus drie elementen in staan:
      [*:1d34f1bb96]de grote afbeelding; [*:1d34f1bb96]hieronder staat een <br />; [*:1d34f1bb96]en daaronder staat een knop om het overlay te sluiten; [/list:o:1d34f1bb96] Om #wrapper te centreren, heb ik de helft van de width en de helft van de height nodig. Ik dacht dus: [code:1:1d34f1bb96] // maak #canvas var canvas = document.createElement("div"); canvas.id= "canvas"; document.body.appendChild(canvas); // maak de grote afbeelding var image = document.createElement("img"); image.id="large"; image.src=src; // append het tijdelijk aan de body document.body.appendChild(image); // zet de width en height van de afbeelding in een variabele var iwidth = image.offsetWidth; var iheight = image.offsetHeight; // make #close var close = document.createElement("a"); close.id="close"; close.innerHTML = "close"; // append het tijdelijk aan de body document.body.appendChild(close); // zet de width en height van #close in een variabele var cwidth = close.offsetWidth; var cheight = close.offsetHeight; close.onclick = function(){document.body.removeChild(canvas);} // maak br aan var br = document.createElement("br"); br.id = "br"; // append tijdelijk aan body document.body.appendChild(br); // zet height van br in variabele var bheight = br.offsetHeight; // maak wrapper aan var wrapper = document.createElement("div"); wrapper.id = "wrapper"; // de margin-left is de width van de afbeelding maal -1 +"px" wrapper.style.marginLeft = (iwidth/2)*-1+"px"; // de margin-top is de height van de afbeelding, de #close en de br maal -1 +"px" wrapper.style.marginTop = ((iheight+cheight+bheight)/2)*-1+"px"; // append canvas aan wrapper canvas.appendChild(wrapper); // append afbeelding, #close en br aan wrapper wrapper.appendChild(image); wrapper.appendChild(br); wrapper.appendChild(close); // verwijder de tijdelijke kopieën van de body document.body.removeChild(image); document.body.removeChild(close); document.body.removeChild(br); [/code:1:1d34f1bb96] Als ik nu de eerste keer op de afbeelding klik, worden de margins niet door javascript toegevoegd. Als ik dan een tweede keer klik, worden de margins wel toegewezen en wordt #wrapper mooi gecentreerd. Kan iemand me helpen? Alvast bedankt
  • Je vraag:

    Waarom maak je niet in html dat dialoogje en hide je dat en toon je het wanneer nodig, je verandert dan alleen het plaatje in het dialoogje. Het centreren los je dan op met css. Of doe het nog simpeler: Gebruik het werk van andere zoals bijvoorbeeld fancybox.

    Firebug:
    1. Onderin je browser heb je een icoontje van een bug, klik er op
    2. In het firebug venster wat nu verschijnt klik je op script.
    3. Als script nog niet geenabled is, enable het en refresh de pagina
    4. Kies nu een script file uit
    5. Klik op de grijze balk links van de regelnummers, je ziet een rood rondje. Als die regel javascript code uitgevoerd wordt, dan stopt hij met uitvoeren en wacht tot je op de play knop drukt. Op dat moment kan je dus ook kijken wat de waardes zijn van de variabelen, door ze toevoegen in de watch in de rechterkant.

    Ik bedoelde in mijn topic te zeggen, je bent nu continu aan het debuggen en je stelt continu vragen die wij of jij 2 uur later weer oplost. Probeer eerst het debuggen zelf beter on de knie te krijgen..
  • Ik heb het opgelost.
    Nu zou ik graag de mening van iedereen horen over mijn image slider.
    Laat niets achterwege, ik kan wel tegen een stootje!

    Alvast bedankt voor je mening!

    Edit: je kan hem hier vinden: http://mikesmikkel.webuda.com

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.