Slideshow in html.

[manu123]

Oke ik zal contact opnemen met 123webshop.

Bedankt voor al je hulp.

[stegisoft]

Laat maar horen wat 123webshop zegt.

[ecence]

Ik heb even gekeken, en je moet inderdaad 1 regeltje in de head toevoegen, nu heb je een bult geluk,

die regel is eigenlijk gewoon een stukje code van Jquery, als je de javascript codes die daar staan, + een bijpassende jquery code vindt, of alleen jquery, kun je die slideshow gewoon maken, zonder dat je in de head hoeft te komen.

bij die tutorial is de Jquery alleen al gedaan en daar voor moet je linken in de head, maar omdat jij dit niet kan moet je proberen de jquery zelf te maken.

---------- Post toegevoegd om 07:42 ---------- Vorige post was om 07:39 ----------

even iets beter gekeken, je kunt de jquery code bemachtigen via deze link http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js

1 belangrijk ding waar je aan moet denken is dat het dan javascript is dus je neemt alle tekst die op die pagina staat, en zet daaromheen

<script type="text/javascript">

===== die code van die pagina =====

</script>

en dan ga je verder.

maar om dat ding helemaal op je website te gaan zetten (weet niet 100% zeker of dat wel lukt, denk het wel), ziet er niet echt handig uit, misschien kan het wel.

ps: als je deze code erin zet, moet je daaronder

deze code zetten.

<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: 10px 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- © Dynamic Drive DHTML code library (Dynamic Drive DHTML(dynamic html) & JavaScript code library)

* This notice MUST stay intact for legal use

* Visit Dynamic Drive at Dynamic Drive DHTML(dynamic html) & JavaScript code library for this script and 100s more

***********************************************/

</script>

<script type="text/javascript">

var mygallery=new simpleGallery({

wrapperid: "simplegallery1", //ID of main gallery container,

dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of the images exactly

imagearray: [

["http://i26.tinypic.com/11l7ls0.jpg", "http://en.wikipedia.org/wiki/Swimming_pool", "_new", "There's nothing like a nice swim in the Summer."],

["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "", ""],

["http://i30.tinypic.com/531q3n.jpg", "", "", "Eat your fruits, it's good for you!"],

["http://i31.tinypic.com/119w28m.jpg", "", "", ""]

],

autoplay: [true, 2500, 2], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]

persist: false, //remember last viewed slide and recall within same session?

fadeduration: 500, //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>

daarna moet je vanaf step2: van deze pagina: Dynamic Drive DHTML Scripts- Simple Controls Gallery

verder gaan met de slideshow, met een beetje geluk lukt het je.

ps: al deze code kan gewoon in je body net zoals je zocht!!

30 maart 2012 aangepast door ecence

[manu123]

Ik heb het geprobeerd maar er gebeurt niets.

Als ik het opsla en op de pagina kijk is de pagina leeg.

Ik denk dat ik iets verkeerd doe maar ik weet niet wat.

Kan je in je volgende post de volledige code geven dat ik in het tekstvak moet schrijven a.u.b.

[manu123]

Ik heb net een mail van 123webshop ontvangen.

Het is wel mogelijk om de codes te wijzigen achter de head dat moet via het vak Globale scripts.

Als ik de codes in dat vak kopieer gebeurt er niets.

Dit zijn de codes dat ik gekopieert heb naar globale scripts:

<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: 10px 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: [649, 350], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
   imagearray: [
       ["WEBSITE WAAR DE AFBEELDING STAAT", "", "", ""],
       ["WEBSITE WAAR DE AFBEELDING STAAT", "", "", ""],
   ],
   autoplay: [true, 2500, 2], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
   persist: false, //remember last viewed slide and recall within same session?
   fadeduration: 500, //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>

Op de plek waar "WEBSITE WAAR DE AFBEELDING STAAT" staat, daar zet ik de site van mijn afbeelding.

En dit heb ik gekopieerd naar het tekst vak waar ik de slideshow graag zou willen:

<div id="simplegallery1"></div>

Op de website staat ook dat je simplegallery.js moet downloaden.

Maar ik weet niet waar ik dat moet zetten op mijn website.

30 maart 2012 aangepast door manu123

[stegisoft]

simplegallery.js dient je te plaatsen waar de pagina staat waar je code wilt in zetten.

[manu123]

Hoe moet ik dat bestandje daar in plaatsen?

[stegisoft]

Waarschijnlijk bij 'Content beheren' > 'Bestanden beheren'

[ecence]

normaalgesproken zou je bestanden op de root van je website kunnen zetten, het begin. maar omdat jij een websiteeditor hebt, kun je daar waarschijnlijk niet bij komen, Misschien wel kijk naar stegisoft's info.

je moet proberen om ergens bestanden te uploaden, waarschijnlijk kun je die optie wel ergens vinden.

open eerst je kladblok en plaats daarin alle tekst van simplegallery.js, sla deze op onder de naam simplegallery.js (dezelfde! is erg belangrijk).

ga dan naar je host (website editor) en kijk of je ergens om 1 of andere manier bestanden kan toevoegen.

als dat kan voeg je dat bestand toe (simplegallery.js) en dan moet je goed kijken waar je het precies opslaat, misschien wordt er een path gegeven bijvoorbeeld.

www.website32.nl/bestanden/simplegallery.js

aan dat path kun je dus zien waar je bestand om de website staat.

als dit alles gelukt is kopieer je dat path, dus in het voorbeeld geval www.website32.nl/bestanden/simplegallery.js

dan verander je in je bestand (javascript code) voor de slide image.

<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 1position: relative; /*keep this intact*/visibility: hidden; /*keep this intact*/border: 10px solid darkred;}#simplegallery1 .gallerydesctext{ //CSS for description DIV of Example 1 (if defined)text-align: left;padding: 2px 5px;}</style>

dit verander je dan!!!!

<script type="text/javascript" src="www.website32.nl/bestanden/simplegallery.js">

/************************************************ Simple Controls Gallery- © Dynamic Drive DHTML code library (www.dynamicdrive.com)* This notice MUST stay intact for legal use* Visit Dynamic Drive at Dynamic Drive DHTML(dynamic html) & JavaScript code library for this script and 100s more***********************************************/</script><script type="text/javascript">var mygallery=new simpleGallery({ wrapperid: "simplegallery1", //ID of main gallery container, dimensions: [649, 350], //width/height of gallery in pixels. Should reflect dimensions of the images exactly imagearray: [ ["WEBSITE WAAR DE AFBEELDING STAAT", "", "", ""], ["WEBSITE WAAR DE AFBEELDING STAAT", "", "", ""], ], autoplay: [true, 2500, 2], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int] persist: false, //remember last viewed slide and recall within same session? fadeduration: 500, //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>

sorry het komt er niet zo lekker op, maar je kunt het haast wel raden.

30 maart 2012 aangepast door ecence

[manu123]

Als ik dat bestandje wil uploaden dan krijg ik deze foutmelding:

File extension not allowed in this folder.

In andere mappen gaat het ook niet.

30 maart 2012 aangepast door manu123