scripts dreamweaver / automatische slideshow maken

csshunter · 13 okt 2011

Juist, ja...
Er is in de eerste plaats iets mis gegaan met het knip- en plakwerk. Het begint met:

HTML:

<head>

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

Dat is incompleet. Er mist een gedeelte:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>test</title>

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

=====
Verder zitten de links naar het stylesheet carrousel.css en het script carrousel_vs2.js er in met de Dreamweaver-notatie. Dat werkt niet als je de pagina in een browser bekijkt, in plaats van in Dreamweaver zelf. Chrome pakt het toevallig op, maar andere browsers niet allemaal.
Het komt er op neer, dat je steeds de mappenboom van je Verkenner moet volgen (vanaf het bestand waar je mee bezig bent) om goed uit te komen.

Vraag 1.
Staat de pagina van de code hierboven in je hoofdmap Users/H Kiezebrink/Documents/, of ergens anders?

=====
Dan de links naar je afbeeldingen. In elk geval moeten die beginnen met een slash /. Maar kan kan ook zo zijn dat de verwijzing dan nog niet goed is. De afbeeldingen zitten kennelijk in een mapje /images slideshow carrousel/.

Vraag 2.
Van welke map is die map /images slideshow carrousel/ een submap?

micm · 13 okt 2011

Vraag 1

Ja, hij staat in de hoofdmap C:/Users/H Kiezebrink/Documents etc.

Vraag 2

In de map /images slideshow carrousel/ zitten alle 3 de afbeeldingen die ik in de slideshow gebruik. De submap is scripts/scripts/images slideshow carrousel
http://imageshack.us/photo/my-images/191/sshot1ve.jpg/

csshunter · 13 okt 2011

Ah, nu ik het screenshot zie, nog even bij vraag 1:

Vraag 1.a
Heet het html-bestand test (dwz test.htm of test.html) in de map Documenten/scripts/scripts/?

=====
Als dat zo is, zouden de links in die pagina de volgende moeten zijn.

(1) Voor het stylesheet:

HTML:

...
<link rel="stylesheet" type="text/css" href="carrousel.css" />
...

Want dat zit in dezelfde map als het html-bestand, en hoeft dan geen map-verwijzing te krijgen.

(2) Voor de afbeeldingen:

HTML:

<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>

Want die zitten in die map eronder, en dan moeten ze met een slash / beginnen, zodat de browser kan zien dat er eerst naar een map gezocht moet worden, en niet meteen naar een bestand.

(3) Voor het script weer gewoon:

HTML:

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

want dat zie ik ook gewoon in dezelfde map als de test staan.

Wat gebeurt er als je dat doet?

Met vriendelijke groet,
CSShunter
__________
PS: Het is sterk aan te raden om voor webgebruik in map- en bestandsnamen géén spaties te zetten. Dat geeft problemen met de validatie (= controle op geldige html volgens de standaarden), en het risico van gebroken links. Beter kan je een middenstreepje - of een onderstreepje _ gebruiken om woorden herkenbaar te houden.

micm · 13 okt 2011

Dan is het nog steeds hetzelfde alleen ziet ie de afbeeldingen niet meer...

csshunter · 13 okt 2011

Nou, ik word een gepofte aardappel als ik 't begrijp! :shocked:

Ergens zit nog steeds iets scheef met de verwijzingen, maar ik kan er van buiten af maar geen grip op krijgen...

O ja, ik heb het geloof ik al eens gezegd (ja, in reactie nr. #15), soms schijnt de preview van DW niet goed te werken, en doet ie het in het echt wel, als ie eenmaal geüpload is. Of als je 'm lokaal met een gewone browser bekijkt.
D.w.z.: als je de pagina bekijkt, dan doe je dat toch wel in je echte browsers waarmee je ook internet op gaat (en niet via Dreamweaver, in een browser-preview venster dat binnen Dreamweaver zit) ??

Maar we gaan het eens heel anders aanpakken!

Je maakt op je pc een nieuwe map aan, bv. "slideshow-test" (geeft niet waar de map zit, en de naam mag ook anders zijn).
In die nieuwe map zet je een kopie van de carrousel.css (dus met diezelfde naam).
In die nieuwe map zet je een kopie van de carrousel_vs2.js (dus met diezelfde naam).
In die nieuwe map zet je ook kopieën van de afbeeldingen pen.jpg, boeken.jpg en boeken_tafel.jpg (ook met hun eigen naam).
Nu ga je dit bestand test-slideshow.htm downloaden, en ook in die map zetten, zonder iets aan te passen.
(Als je op dit moment de test-slideshow.htm bekijkt, zie je alleen een lichtblauwe achtergrond en 3 stipjes, maar dat klopt gewoon).

Dan zitten alle bestanden bij elkaar in dezelfde map, en kloppen de verwijzingen die ik in de test-slideshow.htm heb gezet.

Nu ga je Dreamweaver uit zetten.
En de pagina test-slideshow.htm openen in de browser(s) waarmee je normaal internet op gaat.
Wat zie je?

Met vriendelijke groet,
CSShunter

micm · 14 okt 2011

Nu zie ik alleen een blauwe achtergrond. Hier nog een snapshot van de code: http://imageshack.us/photo/my-images/695/testsl.jpg/

csshunter · 14 okt 2011

Hmm... dit is niet het bestand zoals je kon downloaden.

Er staat bij dat het gemaakt is door een Microsoft html-editor:

HTML:

...
<META name="GENERATOR" content="MSHTML 9.00.811.16437">
...

Die heb ik niet gebruikt, dus dat stond er niet in!
Deze editor heeft kennelijk alle ingesprongen elementen terug laten springen. Er stond in de code bv.:

HTML:

...
<div id="carrousel-container">
	<div id="carrousel"><!-- dit is het carrousel -->
		<ul>
...

Dat is geworden:

HTML:

...
<DIV id="carrousel-container">
<DIV id="carrousel"><!-- dit is het carrousel -->
<UL>
...

Ook is er iets aan de code zelf veranderd, alle tags staan nu in hoofdletters:

Code:

<body> is <BODY> geworden, <div> is <DIV> geworden, enz.

En de pagina is geopend in Dreamweaver, die van de link naar het script:

HTML:

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

nu gemaakt heeft:

HTML:

...
<SCRIPT type="text/javascript" src="file:///D|data/slideshow-carrousel/"></SCRIPT>
...

En als ik me niet vergis, maak ik uit het screenshot op dat er in de bestandsnaam ook een spatie is gekomen. Het was test-slideshow.htm, en ik zie nu in de adresregel staan: test -slideshow.htm
Er zijn dus weer dingen gruwelijk mis gegaan.

We gaan het nog eens proberen.

Dreamweaver zet je uit, en laat je uit staan.
Je gaat met Internet Explorer (of een andere browser) naar www.bliksekaters.nl/tests/test-slideshow.htm, en als je het lichtblauw ziet, klik je in Internet Explorer
--> niet op menu: Beeld > Bron (om dan de broncode op te slaan),
--> maar je klikt meteen op menu: Bestand > Pagina opslaan als....
Je slaat het op in het nieuwe mapje, met deze instellingen:
Als gezegd wordt dat dat bestand al bestaat, en gevraagd wordt "Wilt het vervangen?", dan op JA klikken.

Vervolgens:

Niet meer aan het bestand komen, niet naar de bron kijken, enz.
In Internet Explorer ga je naar menu Bestand > Openen:
En dan blader je naar het mapje waar het nieuwe bestand in staat.

Wat zie je nu?

Als je aan het bestand wilt gaan knutselen, maak dan éérst een kopie. Met de kopie kan je dan gaan knutselen.
Maar: als je de pagina in Dreamweaver wilt gaan bewerken, moeten wel alle Dreamweaver-instellingen goed staan (ik denk dat het daar steeds fout gaat).

En dat is nog niet zo eenvoudig, als ik het goed begrijp (zie bv. deze gedachtewisseling op het Adobe forum).

Misschien heeft een Dreamweaver-kenner hier op het forum er tips voor? Komt u maar!

Anders kan je het beste een kopie van de pagina openen in Kladblok, en daarin je veranderingen aanbrengen. Dan zet je de eigenwijze Dreamweaver buiten spel, en kan er niets met verkeerde links gebeuren.

Met vriendelijke groet,
CSShunter

micm · 15 okt 2011

Ik heb je stappen gevolgd, maar als ik 'm dan weer bekijk in IE dan zie ik geen plaatjes, alleen maar een blauwe achtergrond. Ik ga wel met de kopie en kladblok aan de slag wat proberen, en ondertussen wacht ik op een Dreamweaver kenner. Tenminste ik neem aan dat je nu ook niet meer weet wat ik kan doen?

M.v.g.
MicM

csshunter · 18 okt 2011

Hoi micm,
Ik begrijp er nog steeds helemaal niets van, waarom het bij jou niet werkt.
Maar zo gauw geven we het niet op!

Als je met IE het online voorbeeld bekijkt, doet ie het wel. Klopt toch?
Als je exact dit voorbeeld downloadt (d.w.z. aangepast aan jouw map en images) en lokaal bekijkt met IE, doet ie het niet. Bij mij wel, dat heb ik uitgetest...

Dan zijn er maar een paar mogelijkheden:

Er is iets mis gegaan met het downloaden.
Er is iets mis gegaan met het plaatsen van de gedownloade bestandjes en/of de images in de goede map.
Er is iets mis waardoor IE wel via internet de images kan zien, en niet lokaal.

Omdat Dreamweaver hier helemaal niet aan te pas is gekomen, kan de schuld niet bij Dreamweaver zitten!

Om voor 100% uit te sluiten dat er tijdens het downloaden iets aan het html-bestand is veranderd, heb ik hier een zip-bestand met daarin de html-pagina:

Je downloadt nu dit bestand: test-slideshow-opnieuw.zip.
Je pakt dit via de Verkenner uit in het mapje slideshow-test waar je ook de andere bestanden in hebt staan.
Dan staan in dat mapje:
carrousel.css,
carrousel_vs2.js,
test-slideshow.htm (de oude versie),
pen.jpg,
boeken.jpg,
boek_tafel.jpg
en nu de nieuwe versie: test-slideshow-opnieuw.htm.
Even checken in de Verkenner of al de bestanden er zijn!

Terwijl Dreamweaver nog steeds uit staat, ga je nu de nieuwe versie test-slideshow-opnieuw.htm openen met Chrome.
Ik zou in de Verkenner niet dubbelklikken op de pagina (en niet rechtsklikken en op Openen klikken), want dan heb je kans dat via de Windows-instellingen is geregeld dat htm-bestanden altijd automatisch in Dreamweaver geopend worden. En dan krijg je Chrome te zien als Dreamweaver-preview en niet de echte browser (en Internet Explorer ook niet direct, maar eveneens als Dreamweaver-preview).

Dus: eerst je programma Chrome openen (via Bureaublad-pictogram of Alle Programma's), en dan in Chrome via Ctrl+O (de o van otto) zoeken naar het mapje en de pagina.
Er zijn drie mogelijkheden:

Hij doet het niet. - Dan lig ik er uit.
Hij doet het wel, maar blijkt de pagina toch aan het bekijken te zijn na openen van Dreamweaver, en bekijkt een preview van Chrome via Dreamweaver.
Hij doet het wel, gewoon in Chrome. Mooi, dan de volgende test.

In geval 2 zit er kennelijk ergens in de instellingen dat alles wat in je map /dreamweaver site's/ zit, alleen via Dreamweaver bekeken kan worden. Maar dat moet niet!
Dan moet je via de Verkenner de hele map /slideshow-test/ (met inhoud) verplaatsen naar een plek op je C: schijf buiten die map /dreamweaver site's/.

Nu gaan je hetzelfde doen met Internet Explorer: eerst IE openen, en dan via menu: "Bestand > Openen > Bladeren..." de pagina opsnorren. Er zijn weer 3 mogelijkheden:

Hij doet het niet, maar blijkt de pagina toch aan het bekijken te zijn na openen van Dreamweaver, en bekijkt een preview van Internet Explorer via Dreamweaver.
Hij doet het niet in de echte Internet Explorer. - Dan lig ik er zo'n beetje uit.
Hij doet het wel, gewoon in Internet Explorer. Mooi, dan zijn we eindelijk klaar.

In geval 1: de hele map /slideshow-test/ (met inhoud) verplaatsen zoals boven aangegeven, en opnieuw proberen.

In geval 2: dat is uiterst merkwaardig, want nu is er geen verschil tussen de online voorbeeld-pagina, en wat jij nu in de pagina hebt staan. Het kan ook niet aan het script liggen, want als op een of andere manier javascript niet werkt, moet je gewoon de afbeeldingen kunnen zien.

Nu kan Internet Explorer in z'n instellingen hebben staan dat er bij lokaal gebruik van een webpagina geen javascript toegepast moet worden, maar dan krijg je vaak zo'n gele waarschuwingsbalk waarin IE waarschuwt voor de veiligheid, en vraagt of je echt javascript wilt toestaan.
Als je het dan niet toestaat, moet je toch de afbeeldingen kunnen zien: want daar is de pagina op gemaakt. En ik kan me niet goed voorstellen dat IE een pagina gewoon helemaal blokkeert als er iets van javascript op staat. Ik heb IE7, en daarin gebeurt dat in elk geval niet. - Misschien zouden ze zoiets in IE8 of IE9 ingevoegd hebben (gebruik je die?).

Het enige verschil is verder, dat jij andere afbeeldingen gebruikt (maar die moeten nu wel in de goede map zitten). Er zou dan ook nog iets met de afbeeldingen zelf aan de hand kunnen zijn, waardoor IE ze niet kan tonen, en Chrome wel: dan zijn het "corrupte" jpg's.
Om dat uit te sluiten, kan je het nog eens proberen met andere afbeeldingen (en de afbeeldingen-namen in de code veranderen).

Meer weet ik niet te verzinnen.
Maar het lijkt me in eerste instantie géén Dreamweaver-probleem, die een DW-specialist zou kunnen oplossen. Ik zie het eerder liggen aan de Windows- of IE-instellingen, als je 't bovenstaande hebt gedaan en het nu nog steeds niet goed gaat.

Met vriendelijke groet,
CSShunter

micm · 20 okt 2011

Ok ik heb goed nieuws, want hij doet 't als ik nu test-slideshow-opnieuw open

Alleen je hebt een typefout want je hebt 2x geval 2. Één van die twee moet denk ik geval 3 zijn?

csshunter · 21 okt 2011

Hé, ten lange leste! Daar word ik vrolijk van! :d Gefeliciteerd! :thumb:

Maar de twee keer "geval-2" was geen tikfout: er staan twee setjes met browser-mogelijkheden 1/2/3. - De eerste keer "geval-2" sloeg op het eerste setje (chrome), de tweede keer op het tweede setje (IE).
Maar gelukkig was het in beide gevallen geval 3!

Met vriendelijke groet,
CSShunter

micm · 22 okt 2011

Ok, hij doet 't in IE, Google Chrome en Dreamweaver zelf

Bedankt voor je hulp :thumb:
Nu ga ik proberen om 'm in een 'echte' site te zetten

micm · 24 okt 2011

Ik heb nog één laatste vraag, namelijk hoe je 'test-slideshow-opnieuw' in kan voegen in een site met alleen een achtergrond. Kun je misschien een code als voorbeeld geven waar ik de code dan moet plakken?

M.vr.gr. MicM

csshunter · 24 okt 2011

Aha, dan hoef je er in de css alleen maar bij te zetten:

Code:

body { 
   ...
   background: #D3F0FE url(http://jedomeinnaam.nl/mapjevanImages/background.png); 
   }

Op deze manier herhaalt de background zich zowel horizontaal als verticaal.
Als ie zich alleen verticaal moet herhalen, en horizontaal in het midden moet zitten, wordt het:

Code:

body { 
   ...
   background: #D3F0FE url(http://jedomeinnaam.nl/mapjevanImages/background.png) repeat-y 50% 0; 
   }

Als ie zich alleen horizontaal moet herhalen, en ook horizontaal in het midden moet beginnen, wordt het:

Code:

body { 
   ...
   background: #D3F0FE url(http://jedomeinnaam.nl/mapjevanImages/background.png) repeat-x 50% 0; 
   }

Als ie zich alleen horizontaal moet herhalen, links op het scherm moet beginnen, en pas op 30px vanaf de bovenkant moet beginnen wordt het:

Code:

body { 
   ...
   background: #D3F0FE url(http://jedomeinnaam.nl/mapjevanImages/background.png) repeat-x 0 30px; 
   }

Als ie zich helemaal niet moet herhalen, en zowel horizontaal als verticaal in het midden moet komen, wordt het:

Code:

body { 
   ...
   background: #D3F0FE url(http://jedomeinnaam.nl/mapjevanImages/background.png) no-repeat 50% 50%; 
   }

Enzovoorts!

De eerste maat is telkens de horizontale positie, de tweede de verticale positie. Dat zie je vanzelf.
De #D3F0FE is de achtergrondkleur voor waar het image niet zit (als er niet herhaald wordt), of als een browser om een of andere reden de achtergrondafbeelding niet kan vinden of tonen.

Met vriendelijke groet,
CSShunter

micm · 25 okt 2011

Ik heb de achtergrond al in de pagina staan, alleen ik moet de slideshow (test-slideshow-carrousel) nog centreren. Misschien een domme vraag, maar waar en hoe moet ik de code aanpassen? Hier is de code:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>test :: slideshow</title>

<!-- http://www.helpmij.nl/forum/showthread.php/660195-scripts-dreamweaver-automatische-slideshow-maken -->

<link rel="stylesheet" type="text/css" href="file:///D|/data/slideshow-carrousel/carrousel.css" />
<style type="text/css">
html {
	height: 100%;
	padding-bottom: 1px;
	}
body { /* gecentreerd bij elke resolutie */
	width: 990px;
	margin: 0 auto;
	background: #D3F0FE; 
	}
#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:  830px;           /* img-breedte plus 30px */
	height: 410px;           /* img-hoogte  plus 10px */
	}
#carrousel ul {
	height: 410px;    /* gelijk aan #carrousel-hoogte */
	}

body {margin:0px; color:#fff; font-weight:bold;}
 
#bg_image {
width: 100%;
height: 100%;
left: 0px;
top: 0px;
position: absolute;
z-index: 0;
 
}
 
#contents {
	font-size:70%;
	padding-top:5%;
	padding-left:10%;
	padding-right:5%;
	color:#000000;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	line-height:200%;
	z-index: 1;
	position: absolute;
	left: 673px;
	top: 65px;
}
</style>

<script type="text/javascript">
// <![CDATA[
	var setPause = 4; // tijd tot verschijnen volgende afbeelding, in sec
/*
De onderstaande style is hier nodig om IE bij opstarten geen flits van het 
scrollbalkje te laten zien;
Dit zou anders opgenomen kunnen worden als unobtrusive javascript, want dat levert
een kwaliteitspunt op bij de Webrichtlijnen Quickscan :-)
*/
	document.write('<style type="text/css">')
	document.write('   #carrousel img { display: none; position: absolute; }');
	document.write('<\/style>');
// ]]>
</script>

</head>

<body>

<div id="bg_image"> 
 <img src="file:///D|/data/slideshow-carrousel/achtergrond.jpg" style="width: 100%; height: 100%;"> 
 </div>
 
<div id="carrousel-container">
	<div id="carrousel"><!-- dit is het carrousel -->
		<ul>
			<li><img src="file:///D|/data/slideshow-carrousel/pen.jpg" alt="" /></li>
			<li><img src="file:///D|/data/slideshow-carrousel/boeken.jpg" alt="" /></li>
			<li><img src="file:///D|/data/slideshow-carrousel/boek_tafel.jpg" alt="" /></li>
		</ul>
		<script type="text/javascript" src="file:///D|/data/slideshow-carrousel/carrousel_vs2.js"></script>
	</div>
</div>

</body>
</html>

M.vr.gr. MicM

csshunter · 28 okt 2011

Het carrousel staat al gecentreerd in de <body>.
En de <body> stond eigenlijk ook al gecentreerd op de pagina, met de css:

Code:

...
body { /* gecentreerd bij elke resolutie */
    width: 990px;
    margin: 0 auto;
    background: #D3F0FE; 
    }
...

Maar een stuk verder in de css heb je toegevoegd:

Code:

...
body {margin:0px; color:#fff; font-weight:bold;}
...

In css wint altijd de laatst opgegeven regel, als het om hetzelfde element gaat.
Hier zijn dus voor de body alle margins op 0 gezet.
Daarmee zijn de eerder opgegeven linker- en rechter margin "auto" ongedaan gemaakt. De body breedte begint nu aan de linkerkant van het scherm.

Maar die "auto" zorgde nu juist voor het automatsich eerlijk tussen links en rechts verdelen van de overblijvende ruimte bij de opgegeven breedte: dus het centreren!
Als je de {margin:0px;} uit de laatste regel haalt, zou het goed moeten gaan.

Met vriendelijke groet,
CSShunter

scripts dreamweaver / automatische slideshow maken

csshunter

Meubilair

micm

Gebruiker

csshunter

Meubilair

micm

Gebruiker

csshunter

Meubilair

micm

Gebruiker

csshunter

Meubilair

micm

Gebruiker

csshunter

Meubilair

micm

Gebruiker

csshunter

Meubilair

micm

Gebruiker

micm

Gebruiker

csshunter

Meubilair

micm

Gebruiker

csshunter

Meubilair

Nieuwste berichten

Wij waarderen jouw privacy