scripts dreamweaver / automatische slideshow maken

  • Onderwerp starter Onderwerp starter micm
  • Startdatum Startdatum
Status
Niet open voor verdere reacties.
Hoi micm,
Een automatische slideshow met een script staat bv. hier:
Om deze te maken, kan je het script hier downloaden.
Ook het bijbehorende stylesheet kan je downloaden: css hier.

Gebruiksaanwijzing:
  • Deze twee bestanden carrousel_vs2.js en carrousel.css moet je aanhaken in je pagina.
  • Verder moet de css aangepast worden aan waar je de slideshow op je pagina wilt hebben, en hoe groot de afbeeldingen zijn.
    Dat kan in een style-blok in de <head> van de pagina gebeuren, of als uitbreiding van een extern stylesheet. Dat moet dan wel verderop in de <html> binnengehaald worden dan de carroussel.css (anders maakt die het weer ongedaan).
  • In de <head> van de pagina komt nog een klein stukje "los javascript" waarmee o.a. het tempo van de slideshow geregeld wordt.
  • Tenslotte moet de opbouw van de <div id="carrousel-container"> op een bepaalde manier in elkaar zitten om het handeltje te laten draaien.
  • Op deze manier heb je helemaal geen zware javascript-bibliotheek als jQuery met vervolg-script (samen ca. 90kB) nodig: het kan ook met 5kB aan "hulpstukken".
Als je de broncode van bovenstaande toepassing bekijkt, zie je precies hoe het werkt: dat aap je gewoon na. :)

Met vriendelijke groet,
CSShunter
 
ok, maar hoe moet je dan zo'n code schrijven met de css en het script erin? Kun je misschien een voorbeeld geven?
 
Voorbeeld? Had ik al gegeven: www.bliksekaters.nl/tests/fansite-carrousel.htm, en de broncode daarvan. ;)
Dus:
In de <head> zet je bv:
HTML: 
<link rel="stylesheet" type="text/css" 
   href="http://www.jedomeinnaam.nl/css-mapje/carrousel.css" />

<style type="text/css">
#carrousel-container {  /* voor de plaatsing op de pagina */
	margin: 20px auto;  /* hier gecentreerd, naar smaak wijzigen! */
	}
#carrousel img { 
	width: 878px;  /* hier de breedte van de afbeeldingen (allemaal hetzelfde) */
	height: 340px; /* hier de hoogte  van de afbeeldingen (allemaal hetzelfde) */
	}
#carrousel { /* formaat naar aanleiding van de images */
	width:  908px;           /* img-breedte plus 30px */
	height: 350px;           /* img-hoogte  plus 10px */
	}
#carrousel ul {
	height: 350px;    /* gelijk aan #carrousel-hoogte */
	}
</style>

<script type="text/javascript">
// <![CDATA[
	var setPause = 4; // naar smaak: tijd in sec. tot volgende slide

	document.write('<style type="text/css">')
	document.write('   #carrousel img { display: none; position: absolute; }');
	document.write('<\/style>');
// ]]>
</script>

</head>
En dan ergens in de <body>:
HTML: 
<div id="carrousel-container">
    <div id="carrousel">
        <ul>
            <li><img src="images/slideshow-1.png" alt="" /></li>
            <li><img src="images/slideshow-2.png" alt="" /></li>
            <li><img src="images/slideshow-3.png" alt="" /></li>
            <li><img src="images/slideshow-4.png" alt="" /></li>
            <li><img src="images/slideshow-5.png" alt="" /></li>
        </ul>
        <script type="text/javascript" src="scripts/carrousel_vs2.js"></script>
    </div>
</div>
Klaar! :)

Met vriendelijke groet,
CSShunter
________
PS: Aan de carrousel.css en de carrousel_vs2.js hoef je verder helemaal niets te doen: die zijn al klaar voor gebruik.
 
Laatst bewerkt:
Hoi micm,
Je bent al een heel eind op weg! Dat de foto's onder elkaar staan, komt omdat de carroussel.css voor de slideshow niet toegepast wordt. Dan krijg je hetzelfde als wanneer je bij het voorbeeld de css in je browser uitschakelt:

carrousel-min-css.png

De foto's staan dan onder elkaar, en links onder hebben ze een stipje: de "bullet" van een normaal opsommingsrijtje, die er met de carroussel.css uit gehaald wordt.

Gelukkig kan uit je screenshot nog net de code ontcijferd worden! :) Wat is er aan de hand? Er staat:
HTML: 
<head>
<link rel="stylesheet" type="text/css"
   href="http://www.jedomeinnaam.nl/C:\Users\N 
   Kie... \Documents\dreamweaver site's\scripts\scripts/carrousel.css" />
Hierdoor kan het stylesheet carrousel.css niet gevonden worden. Eerst wordt naar de website "www.jedomeinnaam.nl" gegaan, en dan wordt daarop gezocht naar de C-schijf met jou als gebruiker, enz. Daar staat het bestand natuurlijk niet!

Als ik de Dreamweaver-notering goed begrijp, zou er moeten staan:

HTML: 
<head>
<link rel="stylesheet" type="text/css"
   href="file:///C|Users/ N
   Kie... /Documents/dreamweaver site's/scripts/scripts/carrousel.css" />
Attentie: de schuine streepjes moeten wel allemaal dezelfde kant op gaan: naar rechts.
Dit geldt dan als je op je computer het gedownloade bestandje carroussel.css inderdaad opgeslagen hebt in de map
"Users/N Kie.../Documents/dreamweaver site's/scripts/scripts/"

Is dat niet het geval, dan moet je hier het juiste pad opgeven.

Iets dergelijks kan ook het geval zijn bij het vastknopen van het javascript-bestandje carrousel_vs2.js in de <div id="carrousel">.
Maar dat kan ik niet zien, want op het screenshot kan ik niet naar beneden scrollen. ;)

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Ik geloof dat ik het zie. Ik had voor de privacy je User-naam op je C-schijf veranderd in "Kie... ". Dat heb je overgenomen. Als je daar de volledige naam van maakt (zonder spatie er achter) zou ie moeten werken.
 
YES :D hij werkt! alleen het formaat etc. is nog niet helemaal goed maar dat zal wel aan de instellingen liggen. Alleen in Internet Explorer krijgt hij nog wel 5 stipjes te zien maar in Google Chrome niet.. Ligt dat aan de instellingen van IE?

Gr. Micm
 
Laatst bewerkt:
Ik heb nu het formaat bijna goed, alleen hij fade niet van de ene afbeelding naar de andere, maar er komt eerst heel even een wit vlak. Hoort dit zo?
 
Laatst bewerkt:
Even goed kijken naar de link naar het javascript. Daar staat:
Code: 
site's/scripts/scriptscarrousel_vs2.js"></script>
Dat zal moeten zijn:
Code: 
site's/scripts/scripts[COLOR="darkred"][B]/[/B][/COLOR]carrousel_vs2.js"></script>

===
En even kijken naar je css in de <head>. Daar staat nu (als ik de commentaren weer toevoeg, die je had weggehaald):
Code: 
#carrousel-container {      /* plaatsing op de pagina */
	margin: 20px auto;  /* ook gecentreerd, naar smaak! */
	}
#carrousel img { 
	width:  800px;
	height: 400px;
	}
#carrousel { /* formaat naar aanleiding van de images */
	width:  800px;           /* [COLOR="darkred"]img-breedte plus 30px[/COLOR] */
	height: 400px;           /* [COLOR="darkred"]img-hoogte  plus 10px[/COLOR] */
	}
#carrousel ul {
	height: 400px;    /* [COLOR="darkred"]gelijk aan #carrousel-hoogte[/COLOR] */
	}
</style>
Je hebt dus niet opgeteld wat er bij moest:
Code: 
#carrousel-container {      /* plaatsing op de pagina */
	margin: 20px auto;  /* ook gecentreerd, naar smaak! */
	}
#carrousel img { 
	width:  800px;
	height: 400px;
	}
#carrousel { /* formaat naar aanleiding van de images */
	width:  [B][COLOR="darkred"]830[/COLOR][/B]px;           /* img-breedte plus 30px */
	height: [B][COLOR="darkred"]410[/COLOR][/B]px;           /* img-hoogte  plus 10px */
	}
#carrousel ul {
	height: [B][COLOR="darkred"]410[/COLOR][/B]px;    /* gelijk aan #carrousel-hoogte */
	}
</style>

Code werkt nogal precies! ;)
 
Laatst bewerkt:
Ik ben er net zelf achter gekomen dat ik de code verkeerd had. Alleen nu gaat hij niet faden van de ene afbeelding naar de andere, maar komt er eerst een wit plaatje en fade hij daaruit naar de afbeelding. Hoort dit zo of moet ik een ander script pakken voor wat ik dan wil?
 
Uuhm, ik dacht het niet. Ik kan wel even een screenshot van de code maken? Maar ik dacht dat alles nu wel klopt..
 
online testpagina? - Uuhm, ik dacht het niet.
Klik om te vergroten...
Jammer, dan zou precies vast te stellen zijn waar het knelpunt in zit.

Van afstand is dat moeilijk te zien, ook al omdat de preview van Dreamweaver over de Dreamweaver-server loopt. Soms schijnt de preview van DW ook niet goed te werken, en doet ie het in het echt wel, als ie eenmaal geüpload is.

Kan je de pagina exporteren uit Dreamweaver naar een andere plaats op je computer, zodat het zonder de inwendige DW-zaken een echte html-pagina wordt?
En doet ie het dan wel?
 
Ik heb hem al opgeslagen als .html en in google chrome bekeken. Maar als ik hem open in Internet Explorer dan zie ik helemaal niks. Alleen een witte lege pagina. Misschien kun je hier wat mee? Of moet ik met een anders script dit proberen en kijken of die het dan wel doet?
 
Hoi micm,
Of moet ik met een ander script dit proberen en kijken of die het dan wel doet?
Klik om te vergroten...
Nee, dat zou ik niet doen. Dit script werkt, anders zou je het voorbeeld niet kunnen zien werken.
De fout zit 'm ergens in het gebruik van Dreamweaver en/of de codes/verwijzingen, maar ik zie steeds andere tikfoutjes, en kan niet bij jou op je Dreamweaver-server naar binnen kijken.
Wat je kan doen, is:
  1. Naar je Verkenner gaan, en het html-bestand opsnorren dat je in Chrome en Internet Explorer bekijkt.
  2. Dat bestand open je met Kladblok. De complete code selecteer en kopieer je.
  3. Dan maak je hier een nieuwe reactie, en plakt de complete code in het reactie-venstertje.
  4. Tenslotte selecteer je de code weer in het reactie-venster, en je klikt op het
    html.png
    knopje.
Dan kan ik die code bekijken, en daarna zien we verder.
Want aan de praat krijgen zullen we 'm! :)

Met vriendelijke groet,
CSShunter
 
Dit is de code van: http://imageshack.us/photo/my-images/411/scriptscarrouselsitescr.jpg/ Ik denk dat je dat bedoeld?
HTML: 
// carrousel_vs2.js
//
// Copyright 2011 francky: www.developerscorner.nl
// See http://bliksekaters.nl/tests/foto-carrousel_vs2.php
// Fading script inspired by: http://hungred.com/how-to/tutorial-how-does-image-fade-in-when-picture-loaded/ 
// Published under Creative Commons License "Attribution-Noncommercial-Share Alike 3.0 Unported"
// Toegestaan is: 
//      kopieren, verspreiden en doorgeven,
//      en bewerking naar eigen smaak; :-)
//      op voorwaarde van opnemen van deze bronvermelding in de broncode;
//      alleen voor niet-commercieel gebruik;
//      verspreiden van een bewerking kan alleen onder dezelfde voorwaarden.
// See: http://creativecommons.org/licenses/by-nc-sa/3.0/nl/ (voor NL tekst)
//  or: http://creativecommons.org/licenses/by-nc-sa/3.0/    (for EN text)

if (!setPause){ var setPause = 5; } // veiligheidsklep voor als niet in html ingesteld

var pause = setPause*1000; // nu automatisch in millisec

if (document.getElementById('carrousel')){
    var carr = document.getElementById('carrousel');
    var bgImg = carr.getElementsByTagName('img')[0];
    carr.style.background = 'url('+bgImg.src+') no-repeat 23px 5px';

    var carrLi = carr.getElementsByTagName('li');
    for (var i = 0; i<carrLi.length; i++){
        carrLi[i].style.position = 'absolute'; /* voor IE! */
    }

    var actual = 0;
    var fadeImg = carr.getElementsByTagName('img')[1];
    var c;
}
var opacity;
var t = window.setTimeout('fadeIn()', pause*.95); // start

function carrousel(){
    fadeImg.style.display = 'none';
    if (actual < carr.getElementsByTagName('img').length-1){ 
        actual = actual+1; 
        fadeImg = carr.getElementsByTagName('img')[actual+1];
    }
    if (actual == carr.getElementsByTagName('img').length-1){ 
        fadeImg = carr.getElementsByTagName('img')[0];
        actual = -1;
    }
    fadeIn();
}

function setBrowser(opacity) {
    fadeImg.style.filter = "alpha(opacity:"+opacity+")"; // older IE/Win
    fadeImg.style.KHTMLOpacity = opacity/100;            // Safari<1.2, Konqueror
    fadeImg.style.MozOpacity = opacity/100;              // older Mozilla and Firefox
    fadeImg.style.opacity = opacity/100;                 // modern browsers
}

function fadeIn(opacity) {
    if ( !opacity ){  // no need to give a starting opacity value (i.e.: 0)
        opacity = 0;
    }
    if (opacity <= 50) {                                   // soft starting
        setBrowser(opacity);
        opacity += 1;
        clearTimeout(t);
        t = setTimeout("fadeIn("+opacity+")", 25);
    }
    if ( opacity > 50 && opacity <= 70) {                  // speeding up 
        setBrowser(opacity);
        opacity += 1;
        clearTimeout(t);
        t = setTimeout("fadeIn("+opacity+")", 15);
    }
    if ( opacity > 70 && opacity < 100) {                  // fast ending 
        setBrowser(opacity);
        opacity += 1;
        clearTimeout(t);
        t = setTimeout("fadeIn("+opacity+")", 5);
    }
    if (opacity == 100){
        carr.style.backgroundImage = 'url('+fadeImg.src+')';
        clearTimeout(c);
        c = setTimeout('carrousel()', pause);
    }
    fadeImg.style.display = "block";
}
 
Mooi! Daar is alvast niets mis mee.

Maar ik bedoelde eigenlijk het volgende.
Je zei dat je de pagina met de slideshow uit Dreamweaver had geëxporteerd als html-pagina, en bekeken had met Chrome en Internet Explorer.
Die pagina bedoel ik. Die moet je nog eens openen in Chrome, en dan klikken op het steeksleuteltje:

chrome-steeksleutel.png

Dan komt er een menu met o.a. "Extra". Als je daarop gaat staan, komt er nog een menu'tje bij, waarop o.a. staat "Bron weergeven". Daar klik je op.

Dan komt er een tabblad waarin de html-code van de hele pagina staat.
Die selecteer je vanaf het begin (<!DOCTYPE html PUBLIC enz.) t/m de laatste </html> helemaal onderaan, kopieer je, en plak je hier in een reactie.

Met vriendelijke groet,
CSShunter
 
Ok hier is de code ;)
HTML: 
<head>

<link rel="stylesheet" type="text/css" 

   href="file:///C|Users/H Kiezebrink/Documents/dreamweaver site's/scripts/scripts/carrousel.css" />

 

<style type="text/css">

#carrousel-container { 

    margin: 20px auto; 

    }

#carrousel img { 

    width: 800px;  

    height: 400px; 

    }

#carrousel { 

    width:  830px;          

    height: 410px;          

    }

#carrousel ul {

    height: 410px;    

    }

</style>

 

<script type="text/javascript">

// <![CDATA[

    var setPause = 4; 

 

    document.write('<style type="text/css">')

    document.write('   #carrousel img { display: none; position: absolute; }');

    document.write('<\/style>');

// ]]>

</script>

 

</head>



<body>

	<div id="carrousel-container">

    <div id="carrousel">

        <ul>

            <li><img src="images slideshow carrousel/pen.jpg" alt="" /></li>

            <li><img src="images slideshow carrousel/boeken.jpg" alt="" /></li>

            <li><img src="images slideshow carrousel/boek_tafel.jpg" alt="" /></li>

        </ul>

        <script type="text/javascript" src="file:///C|Users/H Kiezebrink/Documents/dreamweaver site's/scripts/scripts/carrousel_vs2.js"></script>

    </div>

</div>

</body>

</html>
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan