Hoi Henk,
Met de "container" bedoelde ik alleen het element waar het image in zit.
Ik had dat even een class gegeven om het in het voorbeeld te laten werken.
Even kijken ... ja, in jouw geval is dat gewoon de #gallery li {...}. Daar zitten de images in. Dan hoeft er geen class of een extra container aan te pas te komen, en wordt het dus:
Code:
#gallery li {
/* toegevoegd: */
border: 1px solid #C0C0C0; /* daarmee ook de border: 10px solid red uitgeschakeld */
background: white;
padding: 10px;
border-radius: 12px;
-webkit-box-shadow: 0 20px 30px 0 #808080; /* Safari */
box-shadow: 0 20px 30px -20px #808080;
}
#gallery img {
border-radius: 7px; /* toegevoegd */
}
... terwijl de randjes uit de images weggesneden kunnen worden (
folio-img1-nw.png,
folio-img2-nw.png,
folio-img3-nw.png), waarmee deze nu een formaat van 600*415px hebben gekregen;
... en het formaat ook in de css is aangepast:
Code:
.roundabout-moveable-item {
width: 600px; /* aangepast aan nieuw img-formaat 600*415 */
height: 415px; /* aangepast aan nieuw img-formaat 600*415 */
}
Tenslotte blijkt dat browsers/processors al dit render-geweld maar moeilijk kunnen begaffelen, en dat op mijn kast de overgangen begonnen te horten & stoten (bij de ene browser meer dan bij de andere). Met de css3 er ook nog bij moet er ook erg veel steeds opnieuw berekend worden.
Daarom de wisseltijd in de javascript-settings teruggebracht, zodat er minder overgangen berekend hoeven te worden:
[JS]<script type="text/javascript">
$(document).ready(function() {
$('#myRoundabout').roundabout({
...
duration:350, // was: 800
reflect:true
});[/JS]
En dat levert dan:
testfolio-nw.htm.
Ik sta er trouwens van te kijken hoeveel script-bibliotheken er voor deze pagina binnengehaald worden ... maar liefst 12 stuks (en in totaal 4 css-bestanden). De snufjes eisen wel hun tol ...
Voeg daarbij de 57 images van samen 1,7MB ...
... en je begrijpt dat deze pagina er met 70 (!) http-requests vrij lang over doet om op m'n scherm te komen.
Met vriendelijke groet,
CSShunter