Slideshow toevoegen

Status
Niet open voor verdere reacties.
I

IngeG78

Gebruiker
Lid geworden
12 apr 2013
Berichten
5
Goedendag,

Om te beginnen ben ik echt een dummie als het om php-scrpips gaat.

Op dit moment ben ik bezig een slideshow te implementeren, nu heb ik wel een code van internet afgehaald en die werkt gedeeltelijk.

De foto's komen nl. onder elkaar ipv achter elkaar, wat ik dus graag zou willen.

Dit is wat op de php pagina staat :
HTML: 
<div id="carrousel-container">
<div id="carrousel">
<ul>
<li><img src="slideshow/andijvie.png" alt="" /></li>
<li><img src="slideshow/appelbaklava.png" alt="" /></li>
<li><img src="slideshow/appels.png" alt="" /></li>
<li><img src="slideshow/appeltaart.png" alt="" /></li>
<li><img src="slideshow/aubergine.png" alt="" /></li>
</ul>
<script type="text/javascript" src="scripts/carrousel_vs2.js"></script>




verder heb ik het volgende opgenomen in de css;
HTML: 
<link rel="stylesheet" type="text/css"
href="file:///C|Users/Inge/Inge/site inge wijzig/style/courresel.css />


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

<script type="text/javascript">
// <![CDATA[
var setPause = 1; // 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>

Er gaat dus iets fout, maar wat is de grote vraag :)

Alvast hartelijk dank!
 
Hoi Inge,
Dat script komt me erg bekend voor. :)
En op het andere forum vond ik de link naar je site: ingeskeuken.nl/indemaak.php ;)
Er zijn een paar dingetjes fout gegaan:

1. Het javascipt carrousel_vs2.js kan niet gevonden worden.
2. Er ontbreekt javascript.
In de demo staat dat er ook een stukje javascript in de <head> van de pagina moet komen, maar dat staat er niet in:
[JS]<script type="text/javascript">
// <![CDATA[
var setPause = 4; // tijd tot verschijnen volgende afbeelding, in te stellen 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>[/JS]

3. Het stylesheet style.css klopt niet.
Dat staat hier: www.ingeskeuken.nl/style.css
Op verschillende plekken staat hier html-code in, die niet in een stylesheet thuishoort; dit moet verwijderd worden:
  • Regel 47/48: <link rel="stylesheet" type="text/css" href="file:///C|Users/Inge/Inge/site inge wijzig/style/carrousel.css"/>
  • Regel 51: <style type="text/css">
  • Regel 66: </style>
  • En het blok javascript (regel 68 t/m 78, incl. een </head>) hoort ook niet in het stylesheet.
4. Het stylesheet carrousel.css is incompleet / verkeerd aangepast.
  • Het beste kan je de carrousel-styles schrappen uit je gewone stylesheet style.css, en het originele stylesheet carrousel.css gebruiken.
  • Dat kan je hier downloaden: bliksekaters.nl/tests/stylesheets/carrousel.css.
  • Hierin kan je de wijzigingen voor jouw pagina in aanbrengen.
  • Daarna kan je het uploaden naar de site.
  • En niet vergeten op de pagina een extra link naar de carrousel.css te maken (in de <head>), dat op dezelfde manier wordt aangehaakt als het gewone stylesheet.
Als het formaat van de afbeeldingen in het carrousel 150px bij 150px moet zijn, dan moeten wel de goede optelsommetjes gemaakt worden, zoals in de gebruiksaanwijzing staat! ;)
Code: 
#carrousel img { 
    width:  150px;  /* hier de breedte van de afbeeldingen (allemaal hetzelfde) */
    height: 150px;  /* hier de hoogte  van de afbeeldingen (allemaal hetzelfde) */
    ... rest ongewijzigd
    }
#carrousel { /* formaat naar aanleiding van de images */
    width:  180px;           /* img-breedte plus 30px */
    height: 160px;           /* img-hoogte  plus 10px */
    ... rest ongewijzigd
    }
#carrousel ul {
    height: 160px;    /* gelijk aan #carrousel-hoogte */
    ... rest ongewijzigd
    }
5. De afbeeldingen van het carrousel zijn niet op het juiste formaat.
Deze images verschillen nu allemaal, en zijn geen 150px * 150px:
Code: 
andijvie:      139px * 143px
appelbaklava:  173px * 111px
appels:        116px *  78px
appeltaart:    250px * 145px
aubergine:     442px * 316px
enz.
Deze images moeten allemaal precies op 150px * 150px gemaakt worden (= in een tekenprogramma aanpassen), anders kunnen ze niet mooi over elkaar heen in- en uitfaden.

Als dit in orde is, zou het een stuk beter moeten gaan.
ikeuken.png
Succes!
Met vriendelijke groet,
CSShunter
 
hahaah op zich heel mooi dat het een bekend script voor je is ;)
Echt top deze uitgebreide uitleg. Zit hier inmiddels met vierkante ogen, dus kijk er morgen met een frisse blik weer even naar.
(vorig jaar mn site laten bouwen maar voor de helft, in een compleet nieuwe taal voor mij, aangeleverd gekregen. Budget op, dus vandaar zelf in het eea gedoken. Vandaar dat ik er zo mee aan het klieren ben, want dit is toch wel echt iets wat je jezelf zomaar eigen maakt. Gelukkig zijn er dit soort forums! Ik laat het morgen weten of het gelukt is.
 
Nou ik heb het geprobeerd. Ondertussen ben ik ps weer aan het downloaden, want die was er ook weer uitgeknalt.
Is het belangrijk voor het testen dat alle foto's hetzelfde formaat hebben?

De tekst in de php pagina is nu alsvolgt;
HTML: 
<carrousel>
<div id="carrousel-container">
    <div id="carrousel">
        <ul>
            <li><img src="slideshow/andijvie.png" alt="" /></li>
            <li><img src="slideshow/appelbaklava.png" alt="" /></li>
            <li><img src="slideshow/appels.png" alt="" /></li>
            <li><img src="slideshow/appeltaart.png" alt="" /></li>
            <li><img src="slideshow/aubergine.png" alt="" /></li>
        </ul>
        <script type="text/javascript" src="carrousel.css">document.write('<style type="text/css">')
    document.write('   #carrousel img { display: none; position: absolute; }');
    document.write('<\/carrousel>');
// ]]>
</script>


En ik heb een bestandje caroussel.css aangemaakt in de site, waar ik de code in heb gedownload. Hier moet nog ik nog het eea in aanpassen, maar het ik in eerste instantie ongeveer zo gelaten;

HTML: 
#carrousel {
/*	breedte bij uitgeschakeld javascript: 
		240px = img-breedte 210px + horizontale img-padding 10px + scrollbar-OpNeer ruimte 20px
	hoogte bij idem: 
		150px = img-hoogte 140px + 2x(verticale img-padding)=10px
*/
	position: relative;
	width:  150px;
	height: 150px;
	margin: 20px auto;   /* naar smaak! */
	padding: 0 0 0 18px; /* padding-left = scrollbar-breedte voor gecentreerd uitlijnen */
	overflow: auto;      /* voor noscript: oproepen scrollbar */
	}
#carrousel ul {
	height: 150px;       /* gelijk aan #carrousel-hoogte */
	margin: 0;
	padding: 0;
	list-style: none;
	}
#carrousel li {
	margin: 0;
	padding: 0;
	}
#carrousel img { 
	width: 150px;
	height: 150px;
	padding: 5px;        /* voor noscript: vert. tussenruimte, hor. afstand tot scrollbar */
	vertical-align: top;
	border: 0; 
	}

Uit de style.css heb ik alles omtrent de carrousel verwijderd en volgens mij heb ik alle linken nu goed gezet.
Het werkt nu nog niet, is dat omdat ik het toch nog steeds fout doe of heeft het ook met het formaat foto's te maken?

Ik heb niets extra in de head neergezet, omdat als ik dat deed, de tekst ook daadwerkelijk in de kop kwam te staan en dat was nou ook weer niet de bedoeling :)

Ik hoor het weer heeeel erg graag!
 
Hoi Inge,
Ik was er al even bezig mee geweest, en hier komt het resultaat.

1. Carrousel-images
Is het belangrijk voor het testen dat alle foto's hetzelfde formaat hebben?
Klik om te vergroten...
Jazeker! D.w.z. niet perse voor het testen, maar wel voor het eindproduct. Bij een test met ongelijke formaten gaan ze wel in- en uitfaden, maar verspringen de plaatjes. De reden is dat het carrousel werkt met twee laagjes:
  • In het onderste laagje staat de oude foto, in het bovenste komt de nieuwe, die steeds meer "opacity" (= ondoorzichtigheid) krijgt. Is een foto eenmaal op volle sterkte, dan wordt foto in het onderste laagje verwisseld met de nieuwe afbeelding (daar zie je dus niets van, want de bovenste is helemaal ondoorzichtig; en ze zijn toch hetzelfde).
  • Dan komt de wisseltruc: in het bovenste laagje wordt de volgende foto gezet, eerst nog helemaal doorzichtig: op het oog is er geen verschil. Vervolgens kan deze foto nr. 3 langzaam infaden. Is dat klaar dan gaat die weer onderop, enz.
  • In het onderste laagje wordt de foto steeds als "background-image" geplaatst. Maar een backgroud-image kan niet op maat geschaald worden: die komt altijd op ware grootte. Met de nieuwe opmaaktaal css3 is dat anders, maar daar zijn nog niet alle browsers rijp voor. Dus moeten ze allemaal exact hetzelfde zijn.
  • Er zitten ook andere voordelen aan allemaal op hetzelfde formaat: grote afbeeldingen hoeven niet verkleind te worden. Dan hoeven ze ook niet eerst op vol formaat gedownload te worden (wat de pagina trager maakt). Verder kunnen browsers niet zo mooi vergroten of verkleinen als een tekenprogramma, dus allemaal 1:1 geeft kwaliteitswinst.
=======
2. Pagina-code
Hier gaan nog een aantal dingen in fout. De javascipt-link gaat naar het carrousel.css stylesheet in plaats van naar het javascript carrousel_vs2.js. En er staat <carrousel> in, wat als commentaar <!-- carrousel --> zou moeten zijn.
Het moet worden:
HTML: 
<div id="carrousel-container">
    <div id="carrousel">
        <ul>
            <li><img src="slideshow/patabiet.png" alt="" /></li>
            <li><img src="slideshow/hangop.png" alt="" /></li>
            <li><img src="slideshow/gevuldkerstomaat.png" alt="" /></li>
            <li><img src="slideshow/lamsgehakttaartje.png" alt="" /></li>
            <li><img src="slideshow/spaanse%20kip.png" alt="" /></li>
        </ul>
        <script type="text/javascript" src="carrousel_vs2.js"></script>
    </div>
</div>
En dit javascript carrousel_vs2.js moet nog geüpload worden, want het is nog niet op de site te vinden.

Het stylesheet carrousel.css staat al wel op de site, maar het moet in de <head> van de pagina nog aangehaakt worden:
HTML: 
<head>
    ...
    <link rel="stylesheet" type="text/css" href="carrousel.css" />
    ...
Verder is dit stylesheet nog niet afgestemd op de goede maten voor de foto's.

  • Hier is een aangepaste versie: i-carrousel.css
  • Even downloaden en uploaden: klaar.
=======
3. Tussentijds resultaat
Als je dit zo verwerkt, komt dit uit de bus:

=======
4. Nu foutloos!
Bovenstaande versie is met alleen het carrousel in orde gebracht (verder niets aan gedaan), maar er is meer aan de hand. :confused:
Zoals je zei, was de site door je webbouwer als halffabricaat opgeleverd, en daar draagt het nogal de sporen van (overigens zou ik me ook schamen om wat er nu is als halffabricaat aan te bieden).
Eerste vereiste voor een website is, dat deze voldoet aan de html-standaarden.
  • Een test met de html-validator levert op ... 29 Errors, 31 warnings :eek:
  • Gevolg is o.a dat deze site het nooit goed kan doen in Internet Explorer omdat er geen zg. "Doctype" wordt vermeld (zie hier waarom). Er zijn dan ook aanzienlijke verschillen bij bekijken in IE of in een andere browser. Bij alle andere browsers staat de pagina mooi gecentreerd bij grote beeldschermen, in IE zit de pagina helemaal links; ook de social-media icoontjes zitten op een andere plek:

    Firefox
    ikeuken-FF.png
    ikeuken-IE8.png
    Int.Expl.8​
Tweede vereiste voor een website is, dat deze voldoet aan de css-standaarden.
  • Een test met de css-validator levert op: 63 fouten.
  • Op één na zitten al deze fouten echter in het stylesheet fancyboxstyle.css van de fancybox, en daar valt weinig aan te doen. Gelukkig zijn er geen ernstige consequenties.
Ik heb de html-errors en warnings er uit gehaald. Dan wordt het deze:

=======
5. Nog meer te verbeteren...
Op een resolutie van 1024*768px (bij een tablet in gebruik) is er onderin een scrollbar links-rechts, die er niet hoeft te zijn.
  • Oorzaak is de breedte van de site, die precies op 1024px staat ingesteld, en geen rekening houd met de scrollbar aan de rechterkant, die ook breedte nodig heeft. Ook de achtergrond-afbeelding van de agenda is te breed.
  • Als je de pagina-breedte op 990px zet, en de agenda terugbrengt tot ca. 970px breed, is het in orde.
  • Het sluitlipje van de agenda kan makkelijk wat smaller, dan word het deze: ikeuken-agenda-nw.png

De site lijkt ontworpen voor grote desktop-beeldschermen, maar tegenwoordig zijn er veel kleine formaten in omloop. De kop neemt dan naar verhouding veel te veel ruimte in beslag, zodat er van de eigenlijke pagina-inhoud op kleinere schermen nogal weinig te zien is.
Bv. bij een tablet van 600*800px in portret-stand is de naam van de site niet volledig te zien:

ikeuken-600x800-ori.png

Het logo kan prima verkleind worden tot zo'n 500*184px.
En wat smeuïger gemaakt worden, want nu is het nogal plat.
Ook is momenteel de hele header over de volle breedte een link naar de homepage, wat de kans op een per-ongelukke-klik (en wegzwiepen van de pagina) vergroot. De Home-klik kan heel goed op alleen de kookpot gezet worden.
En er kan een hover-variant van de kookpot gemaakt worden, zodat de bezoeker ziet dat er wat gebeurt als je er met de muis overheen gaat.
Dat levert dan zoiets:
Op 600*800px scherm wordt dat:
ikeuken-600x800-nw.png

Nu is meteen de halve week aan menu's te zien, en met 1 scrolletje naar rechts de andere helft.
---
Naast het verkleinde logo is op zo'n manier plaats vrijgekomen voor een subtitel en voor de facebook- en twitter-icoontjes.
Nu duurde het (met de huidige homepage) even flink zoeken voor ik doorhad waar je fornuis stond.
Ik zou daarom in de subtitel zeker het woord "Utrecht" opnemen, zodat meteen duidelijk is dat op de site terechtgekomen Groningers, Texelaars en Maastrichters niet hoeven te bellen. ;)
---

Heb je daar wat aan?
O ja: als iemand in Utrecht buiten je bezorggebied woont, kan die dan door als bezorgadres "Poortstraat" in te vullen de maaltijd komen afhalen? :)

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Wauw ccs hunter, ik schaam me gewoon dat ik je nog een mailtje heb gestuurd, wat super is dit ! Ik ga zo even in alles duiken.
Ik zou me ook mn ogen uit mn hoofd geschaamd hebben als ik zo de website zou hebben afgeleverd. Heb nog een advocaat ingeschakeld, maarja die kosten gingen natuurlijk uiteindelijk ook te hoog oplopen en vandaar ben ik er zelf maar (geprobeerd dan :) ) mee verder gegaan.

Over het ophalen heb ik ook nagedacht, maar dat wordt toch lastig, blijkt uit ervaring. Op dit moment doe ik het nog alleen, dus ook de bezorging. En ik kan niet hier zijn en ook bezorgen :)

Verder, mocht je in de buurt wonen, dan zou ik je graag een maaltijd als dank willen schenken.
Ik laat het je nog weten of het allemaal is gelukt.

Groeten,
Inge
 
Zo ik ben een heel eind :) ik blijf steeds maar iets fout doen, maar als ik jouw broncode 1 op 1 kopieer dan gaat het goed (wat niet zo gek is natuurlijk :)) Alleen dan staan de links naar jouw scrips en niet verwijzingen naar mn eigen site en als jij eens besluit om alles eraf te halen, dan valt zo'n beetje mn hele site in elkaar hahah
Ook het logo is echt een top idee! ziet er stukke beter uit zo, de tekst heb ik wat aangepast en mijn lettertype neemt ie niet goed mee, maar daar ga ik nog even aar kijken.
Misschien verander ik het lettertype van alles wel, zodat in IE en firefox alles goed te lezen is.

Met dat rookwolkje uit de pan is ook helemaal leuk echt grappig bedacht !

Ik heb alles geprobeerd in de ccs te plaatsen, maar dat werkt niet echt. Als ik de codes in elke pagina plaats, zou het 'probleem' toch ook opgelost moeten zijn? En dan doel ik vooral op het formaat van de agenda en de pagina enz.

Ik kan beter koken merk ik al hahah

In ieder geval je kan het eerste resultaat al zien op ingeskeuken.nl/indemaak.php

Nogmaals erg bedankt ! & ik ga nog even op mn gemakkie (lees vierkante ogen en gestrest :)) verder.

Groeten,
Inge
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan