voor en door Mozilla-gebruikers
https://mozilla-nl.org/mozbrowser/forum/
https://mozilla-nl.org/mozbrowser/forum/viewtopic.php?f=26&t=22042
Code: Selecteer alles
<style type="text/css">
.slideshow { height: 232px; width: 232px; margin: auto }
.slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }
</style>
<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
</script>Code: Selecteer alles
<div class="slideshow">
<img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
<img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" />
<img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" />
<img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" />
<img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" />
</div>
Code: Selecteer alles
.slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }Code: Selecteer alles
.slideshow img { padding: 0px; border: 1px solid #ccc; background-color: #eee; }
Er is namelijk voor de afbeelding een grijze achtergrondkleur (#eee) ingesteld. Als je dan die afbeelding aan alle kanten 15 pixels ruimte geeft, dan heb je daarmee een grijze rand van 15 pixels gecreëerd. nirwana schreef:Jan,
Ik denk dat je zoiets zoekt.
Dat is een voorbeeld van de jQuery Cycle-plugin.
Om die in een website op te nemen zul je dit in de bron van de pagina moeten invoeren.
Je kunt echter goed spieken in de bron van het voorbeeld hierboven.
Als je de bron van jouw pagina bekijkt, dan zie je 2 belangrijke onderdelen: de head en de body.
De body bevat de eigenlijke pagina en de head bevat alle informatie die de pagina nodig heeft, zoals scripts en opmaak-bestanden (CSS). De head begint bovenin de pagina en staat tussen <head> en </head>. De body begint direct onder de head en staat tussen <body> en </body>. Kijk dus eerst even of je deze beide in jouw pagina kunt vinden.
Elke goede webpagina heeft een titel (tussen <title> en </title>) in de head staan.
Achter </title> kun je dan de volgende code opnemen:Dit heb ik gewoon rechtstreeks uit de head-sectie van de bron-code van de voorbeeldpagina gekopieerd.Code: Selecteer alles
<style type="text/css"> .slideshow { height: 232px; width: 232px; margin: auto } .slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; } </style> <!-- include jQuery library --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> <!-- include Cycle plugin --> <script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script> <script type="text/javascript"> $(document).ready(function() { $('.slideshow').cycle({ fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc... }); }); </script>
Daarna kun je de onderstaande code in de plaats zetten van de afbeelding die nu aan de rechterkant staat.
Daarvoor kun je het beste terugschakelen naar de Ontwerp-weergave van de pagina. Daar kun je de afbeelding aan de rechterkant selecteren. Vervolgens ga je naar het menu Invoegen > HTML en daar plak je de onderstaande code in plaats van de afbeelding die daar al staat (<img ....>). Op die manier wordt de afbeelding vervangen door de slideshow. Dat kan er in Kompozer misschien wat vreemd uitzien, maar het gaat er uiteindelijk om dat het er in een webbrowser (zoals Firefox) goed uitziet en dat je de afbeeldingen in Kompozer kunt beheren.Eventueel moet je dan nog de slideshow wat uitlijnen om deze op de juiste plaats te krijgen. Ik zie dat in de huidige pagina uitlijnen vooral gebeurt door spaties in de pagina op te nemen. Dat zou ik proberen te voorkomen, want er zijn doorgaans betere opties dan het gebruik van spaties.Code: Selecteer alles
<div class="slideshow"> <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" /> <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" /> <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" /> <img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" /> <img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" /> </div>
De afbeeldingen die nu vanaf github.com worden geladen, kun je uiteraard vervangen door eigen afbeeldingen.
Anders heeft de slideshow namelijk zo weinig zin. Het is wel van belang dat de afbeeldingen die je voor de slideshow wilt gebruiken hetzelfde formaat hebben. Dat kun je met een grafisch programma voor elkaar krijgen, maar er zijn ook wel (gratis) programma's die bijvoorbeeld alle afbeeldingen in een bepaalde map tegelijk kunnen verkleinen naar een opgegeven formaat.
Een voorbeeld van jullie website met een slideshow heb ik geplaatst op http://www.mozbrowser.nl/web/solinijverdal/index.html
Zo kun je zien hoe ik het uiteindelijk voor ogen heb. Denk daar afbeeldingen van Soli Nijverdal in en dan heb je weer een mooie aanwinst voor de website.
Jazeker is dat mogelijk. Je kunt opties meeegeven, zoals nu het soort slideshow-effect. Kijk maar eens op de jQuery Cycle-pagina voor voorbeelden. Het gaat hier om de delay-optie.Is het ook mogelijk om de interval tussen de foto's in te stellen?