html-kit slideshow werkt niet goed

Status
Niet open voor verdere reacties.

pietvankempen07

Verenigingslid
Lid geworden
7 mei 2012
Berichten
52
Ik heb mijn website nog niet ge-upload. Maar hij staat nog in een map in mijn computer.
In html-kit wordt de slideshow in priview goed getoond. Volgens de knop: Check, correct, convert html zitten er geen errors in. Wel een warning en 2 others
Zodra ik hem heb opgeslagen en in mijn map de site aanklik, zie ik helemaal geen slideshow meer.
Hoe kan dat? Wie helpt mij?
 
Heb je een link naar je site voor ons? Dan kunnen we eens bekijken wat er fout gaat ;)
 
Dank je voor het snelle reageren!
Zoals ik al zei, staat hij nog niet op internet. Dus een link heb ik niet.
Het javascript heb ik zo overgenomen van 'mijn eigen website.nl'; alleen mijn eigen foto's ingevoegd.
En dan doet de slideshow het op html-kit-preview prima.
Kijk ik dan in mijn map naar de html pagina, dan is er geen plaatje, laat staan een slideshow te zien.
Wil je evt. mijn html pagina hebben?
 
En, overigens, een enkel plaatje laat hij wèl zien.
Hier dan de html code met javascript:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Mijn eerste website></title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>

<style type="text/css">

/*Make sure your page contains a valid doctype at the top*/
#simplegallery1{ //CSS for Simple Gallery Example 1
position: relative; /*keep this intact*/
visibility: hidden; /*keep this intact*/
border: 5px solid darkred;
}

#simplegallery1 .gallerydesctext{ //CSS for description DIV of Example 1 (if defined)
text-align: left;
padding: 2px 5px;
}

</style>

<script type="text/javascript" src="simplegallery.js">

/***********************************************
* Simple Controls Gallery- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<script type="text/javascript">

var mygallery=new simpleGallery({
wrapperid: "simplegallery1", //ID of main gallery container,
dimensions: [275, 200], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
imagearray: [
["_MG_2195 (Kopie).jpg", "", "_new", ""],
["_MG_2212 (Kopie).jpg", "", "", "_1e prijs fotowedstrijd Fotovakschool"],
["_MG_2218 (Kopie).jpg", "", "", ""],
["_MG_2236 (Kopie).jpg", "", "", ""],
["_MG_2239 (Kopie).jpg", "", "", ""],
["_MG_2242 (Kopie).jpg", "", "", ""]

],
autoplay: [true, 5000, 2], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 800, //transition duration (milliseconds)
oninit:function(){ //event that fires when gallery has initialized/ ready to run
//Keyword "this": references current gallery instance (ie: try this.navigate("play/pause"))
},
onslide:function(curslide, i){ //event that fires after each slide is shown
//Keyword "this": references current gallery instance
//curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
//i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
}
})

</script>


</HEAD>
<BODY BGCOLOR=#90EE90>
<DIV ALIGN="CENTER">
<FONT size="5" FACE="ARIAL">&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;Arjans eerste website</FONT>
</DIV>
<div id="simplegallery1"></div>
<br>
<br>
<DIV ALIGN="CENTER"></div>
<A HREF="http://www.w3schools.com">
naar w3 schools</A>
<div id="simplegallery1"></div>
<BR>
<DIV ALIGN="LEFT"></div>
<BR>
<BR>
<BR>
</BODY>
</HTML>

En dan krijg ik nog als commentaar:
regel 0 Doctype given is "-//W3C//DTD HTML 4.01 regel 0 Document content looks like HTML 4.01 Transitional
regel 76 (div? anchor "simplegallery1" already defined

Toen heb ik die W3C geprobeerd weg te halen, mislukt.
en ook kan ik regel 76 niet zo maar weghalen.

Fijn, dat je er naar wilt kijken, alvast bedankt.
piet
 
Dit is de code die je gaf in je post, maar dan met regelnummers :P
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>Mijn eerste website></title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
        <style type="text/css">

            /*Make sure your page contains a valid doctype at the top*/
            #simplegallery1{ //CSS for Simple Gallery Example 1
                             position: relative; /*keep this intact*/
                             visibility: hidden; /*keep this intact*/
                             border: 5px solid darkred;
            }

            #simplegallery1 .gallerydesctext{ //CSS for description DIV of Example 1 (if defined)
                                              text-align: left;
                                              padding: 2px 5px;
            }

        </style>
        <script type="text/javascript" src="simplegallery.js">

            /***********************************************
             * Simple Controls Gallery- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
             * This notice MUST stay intact for legal use
             * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
             ***********************************************/

        </script>
        <script type="text/javascript">

            var mygallery=new simpleGallery({
                wrapperid: "simplegallery1", //ID of main gallery container,
                dimensions: [275, 200], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
                imagearray: [
                    ["_MG_2195 (Kopie).jpg", "", "_new", ""],
                    ["_MG_2212 (Kopie).jpg", "", "", "_1e prijs fotowedstrijd Fotovakschool"],
                    ["_MG_2218 (Kopie).jpg", "", "", ""],
                    ["_MG_2236 (Kopie).jpg", "", "", ""],
                    ["_MG_2239 (Kopie).jpg", "", "", ""],
                    ["_MG_2242 (Kopie).jpg", "", "", ""]

                ],
                autoplay: [true, 5000, 2], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
                persist: false, //remember last viewed slide and recall within same session?
                fadeduration: 800, //transition duration (milliseconds)
                oninit:function(){ //event that fires when gallery has initialized/ ready to run
                    //Keyword "this": references current gallery instance (ie: try this.navigate("play/pause"))
                },
                onslide:function(curslide, i){ //event that fires after each slide is shown
                    //Keyword "this": references current gallery instance
                    //curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
                    //i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
                }
            })

        </script>
    </HEAD>
    <BODY BGCOLOR=#90EE90>
        <DIV ALIGN="CENTER">
            <FONT size="5" FACE="ARIAL">&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;Arjans eerste website</FONT>
        </DIV>
        <div id="simplegallery1"></div>
        <br>
        <br>
        <DIV ALIGN="CENTER"></div>
        <A HREF="http://www.w3schools.com">naar w3 schools</A>
        <div id="simplegallery1"></div>
        <BR>
        <DIV ALIGN="LEFT"></div>
        <BR>
        <BR>
        <BR>
    </BODY>
</HTML>

Vast een aantal opmerkingen:
Regel 8: Voor comments in CSS gebruik je /* comment */ in plaats van //comment
Regel 15: Idem.
Regel 58 t/m 75: Het is gebruikelijk alle <tagnames> en attribute="values" gewoon met kleine letters te schrijven.

De W3-validator zegt dan nog dit:
Regel 59: Zet aanhalingstekens om attribuutwaarden: bgcolor="#90EE90"
Regel 63, 68: Twee elementen met id="simplegallery1", maar je mag zo'n id maar één keer gebruiken.

Nieuwe versie hieronder, bekijk de verschillen maar eens ;) JavaScript ziet e prima uit, maar ik kan niet zien wat er in simplegallery.js staat.

Gr. Robin

HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>Mijn eerste website></title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
        <style type="text/css">

            /*Make sure your page contains a valid doctype at the top*/
            #simplegallery1{ /*CSS for Simple Gallery Example 1*/
                             position: relative; /*keep this intact*/
                             visibility: hidden; /*keep this intact*/
                             border: 5px solid darkred;
            }

            #simplegallery1 .gallerydesctext{ /*CSS for description DIV of Example 1 (if defined)*/
                                              text-align: left;
                                              padding: 2px 5px;
            }

        </style>
        <script type="text/javascript" src="simplegallery.js">

            /***********************************************
             * Simple Controls Gallery- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
             * This notice MUST stay intact for legal use
             * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
             ***********************************************/

        </script>
        <script type="text/javascript">

            var mygallery=new simpleGallery({
                wrapperid: "simplegallery1", //ID of main gallery container,
                dimensions: [275, 200], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
                imagearray: [
                    ["_MG_2195 (Kopie).jpg", "", "_new", ""],
                    ["_MG_2212 (Kopie).jpg", "", "", "_1e prijs fotowedstrijd Fotovakschool"],
                    ["_MG_2218 (Kopie).jpg", "", "", ""],
                    ["_MG_2236 (Kopie).jpg", "", "", ""],
                    ["_MG_2239 (Kopie).jpg", "", "", ""],
                    ["_MG_2242 (Kopie).jpg", "", "", ""]

                ],
                autoplay: [true, 5000, 2], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
                persist: false, //remember last viewed slide and recall within same session?
                fadeduration: 800, //transition duration (milliseconds)
                oninit:function(){ //event that fires when gallery has initialized/ ready to run
                    //Keyword "this": references current gallery instance (ie: try this.navigate("play/pause"))
                },
                onslide:function(curslide, i){ //event that fires after each slide is shown
                    //Keyword "this": references current gallery instance
                    //curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
                    //i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
                }
            })

        </script>
    </head>
    <body bgcolor="#90EE90">
        <div align="center">
            <font size="5" face="arial">&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;Arjans eerste website</font>
        </div>
        <div id="simplegallery1"></div>
        <br>
        <br>
        <div align="center"></div>
        <a href="http://www.w3schools.com">naar w3 schools</a>
        <div id="simplegallery2"></div>
        <br>
        <div align="center"></div>
        <br>
        <br>
        <br>
    </body>
</html>
 
Robin,
Hartelijk bedankt voor je moeite.
Ik heb je opmerkingen verwerkt.
Het resultaat is echter precies hetzelfde als voordien.
In de preview van Html-kit doet de slideshow het goed,
en als ik het bestand in mijn map open is er geen foto of slideshow te zien.
Weet jij nog iets anders? Anders moeten we het probleem als onopgelost beschouwen.
Dan moet ik maar een andere website maken zonder slideshow, maar dat zou ik wel jammer vinden.
Hartelijke groet,
piet
 
Ik weet nog van alles waar het aan zou kunnen liggen. De moeilijkheid is erachter komen w�t 't precies is :P

- Staan alle bestanden op de goede plek? Als je iets verplaatst (hebt) ten opzichte van de bestanden die de HtmlKit-preview gebruikt, zorg dan dat alle plaatjes en scripts mee verhuizen (/kopie�ren).
- Staat JavaScript aan in je browser? Staat de cache uit? Anders gebruikt je browser mogelijk een eerdere versie. Verder gaan verschillende browsers anders om met JavaScript dan andere. Heb je verschillende browsers getest?

Maak ook vooral gebruik van een console ;) In Firefox en Chrome haal je die tevoorschijn met Ctrl+Shift+J. Laat maar weten of je iets kunt vinden :)

Gr. Robin
 
Bedankt Robin,
Al deze dingen heb ik kunnen vinden, en staan goed ingesteld.
Je spreekt over de browser(s): ik heb er twee: IE9 en Firefox.
Maar heb jij goed begrepen dat ik mijn site nog niet geüpload heb op internet?
Hij staat alleen nog maar in een map in Documenten.
Vandaar uit roep ik hem op en krijg ik a.h.w. een preview te zien.
Maar daar zie ik dan die slideshow niet.
Waar Html-kit-preview zijn foto's vandaan haalt kan ik niet vinden.
Graag je reactie.
Groet,
piet
 
Vreemd.

Ik heb even je website overgenomen, en het script voor de slideshow en 't op internet gezet met de plaatjes uit de demo: http://robins.awardspace.com/helpmij/slideshow/htmlkit/ (zie ook bijlage)

In één map staan:
- ajaxload.gif, lef.gif, pause.gif, play.gif, right.gif
- plaatjes in de slideshow
- simplegallery.js
- index.php (of misschien index.htm bij jou)

En jij heb die ook allemaal? Als onze scripts precies hetzelfde zijn, en 't werkt bij mij wel en bij jou niet, dan weet ik 't helaas ook even niet meer.. :(
 

Bijlagen

Laatst bewerkt:
Bedankt Robin,
In mijn map heb ik
de foto's
map: simplegallery1, met de foto's nog een keer
ajaxload, maar alleen met de puntjes, die wrsch.aankondigen dat de foto's geladen worden
right
left
play
pause

Dus ik heb geen index
en geen simplegallery.js.
Hoe ik aan die bestanden moet komen weet ik niet.

Graag weer je reactie (wat ben jij lekker snel steeds, zeg, heel fijn hoor)
groet,
piet
 
Dit forum is zegmaar een hobby voor mij, dus ik kom regelmatig kijken :P

Je index-bestand en simplegallery.js zijn wel belangrijk :P
- simplegallery.js kun je van deze link halen (stap 1.1) http://www.dynamicdrive.com/dynamicindex4/simplegallery.htm
- Sla de HTML-code uit je eerdere post (met de aanpassingen die je gedaan hebt) op als index.htm
- Zet alle bestanden die ik noemde in dezelfde map.

Dan zou de website moeten werken als je index.htm opent met je browser. Probeer maar eens :)
Ik snap dan alleen niet dat je HtmlKit-preview wel werkt terwijl die bestanden misten.. Maar goed, daar zal ook wel weer een reden voor zijn :P
 
Laatst bewerkt:
re:

Beste Robin,
In mijn map zit nu alles wat je gezegd hebt.
Het resultaat is onveranderd, dus geen foto, geen slideshow.
En nog steeds wel alles goed in Html-kit-preview.
Je mag het van mij opgeven hoor. Je hebt erg je best gedaan.
Ik zal wat anders moeten bedenken op die site.
Vriendelijke groet,
pietvankempen
 
Hoi Piet en Robin,
Ik heb ook eens zitten tureluren op het bovenstaande, en ik snap er ook geen biet van waarom de preview in HTML-kit het wel doet, en dezelfde pagina in je browsers het niet doet.

Ik heb het volgende gedaan met de online versie van Robin:
  • Alle bestanden behalve de pagina zelf gedownload, en in een mapje gezet.
  • HTLM-kit (vs 292) geopend, daarin de broncode van de pagina geplakt, en opgeslagen als html-pagina in hetzelfde mapje.
Vervolgens:
  • De preview in HTML-kit bekeken: werkt!
  • De pagina geopend met Firefox (FF12.0) en Internet Explorer (IE7): werkt ook!
  • Als ik 'm via HTML-kit (menu Beeld > Voorbeeld in browser) open: werkt ook in de browser.
Hiermee kan uitgesloten worden dat het eventueel aan iets raars in HTML-kit ligt.

Dezelfde pagina ook even opgeslagen als php-pagina. Resultaat:
  • De preview in HTML-kit bekeken: werkt!
  • De php-pagina geopend met Firefox (FF12.0): werkt niet (FF vraagt hoe pagina geopend moet worden, cq opgeslagen moet worden).
  • De php-pagina geopend met Internet Explorer (IE7): werkt!

Het meest waarschijnlijke lijkt me:
  • De browsers pakken via hun Tijdelijke Internet-bestanden toch een oude, niet-werkende versie. Heb je inderdaad de cache geleegd? (FF: menu Extra > Recente geschiedenis wissen > in elk geval de Buffer en de Offline-websitegegevens wissen; IE: menu Extra > Internetopties > Browsegeschiedenis wissen > enz.). Of:
  • Er is toch iets met de mappen aan de hand, waardoor de preview de bestanden uit een andere map pakt dan de pagina-met-de-browsers.

Als je de pagina opent in HTML-kit en dan kiest voor "Opslaan als...", komt er een Verkenner-venstertje; niet opslaan, alleen maar bekijken!
  • Zet daarin het Beeld-menu op "Details", en bij "Opslaan als type": All Files (*.*).
  • Dan staat bovenin het mapje waar HTML-kit de bestanden in heeft staan, en alle bestanden (incl. de pagina) staan er onder.

htmlkit-files.png


  • Klik nu rechts op de html-pagina, en dan niet op "Selecteren", maar op "Openen".
  • De pagina opent nu in je standaard-browser, en zou gewoon moeten werken.

Zo niet, dan zit er heel misschien iets in de beveiligingsinstellingen van je browsers of je antivirus-programma of een anti-spyware programma, dat het gebruik van lokaal javascript verhindert. Dat kan je testen door deze even tijdelijk uit te zetten.

Met vriendelijke groet,
CSShunter

=======
PS: Er zitten nog wat onvolkomenheden in de html-code.
  • Het doctype hoort eigenlijk html-strict te zijn, en een tweede regel te hebben:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
  • Er hoort in de <head> een <meta> element in met de letterteken-codering (de charset):
HTML:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  • Er zit het verouderde/afgekeurde element <font> in, en de afgekeurde eigenschappen bgcolor en align. Dit zijn style-eigenschappen, die met css aangegeven horen te worden.
    Voor het waarom van het Strict-doctype en de afgekeurde eigenschappen: zie hier op het forum.
    Voor een tutorial over html en css: zie [url]www.web-garden.be/cursus-html/cursus-html/[/URL].
  • En: het gebruiken van spaties in mapnamen en bestandsnamen is erg af te raden.
In het begin komt er nogal veel op je af, nietwaar?! ;)
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan