Veranderende foto op One More Thing site

Julie hebben op de front pagina een flash denk ik die rechts de foto's laat veranderen.

Hoe is dit gemaakt?

Duidelijk geen flash, volgens mij is het javascript. (je kan het zien in de broncode he....).

beetje zoeken in de broncode

[code:1:a7387cfe5b]<script type=“text/javascript”>
$(document).ready(
function(){
$(’#innerfade’).innerfade({
animationtype: ‘fade’,
speed: 1000,
timeout: 5000,
containerheight: ‘203px’
});
}
);
</script>


<div id="banner"><div id="innerfade" class="innerfade" style="display: block">

<a href="http://clk.tradedoubler.com/click?p=11632&a=1425564&url=http://store.apple.com/Apple/WebObjects/nlstore?productLearnMore=MB966"><img src="images/banner-ilifeboxset.jpg" width="304" height="203" border="0" /></a>
<a href="http://www.onemorething.nl/?p=showarticle&art_id=3904"><img src="images/banner-wayne.jpg" width="304" height="203" border="0" /></a>
<a href="http://clk.tradedoubler.com/click?p=11632&a=1425564&url=http://store.apple.com/Apple/WebObjects/nlstore?node=campaigns/valentine"><img src="images/banner-valentijn.jpg" width="304" height="203" border="0" /></a>
<a href="http://www.onemorething.nl/?p=showarticle&art_id=3920"><img src="images/banner-wtm.jpg" width="304" height="203" border="0" /></a>

</div></div>
[/code:1:a7387cfe5b]

En ik denk ook niet iets met de css… maar dat moet je zelf ff uitvinden.

http://medienfreunde.com/lab/innerfade/

jQuery plugin.

Zou iemand me een beetje op weg willen helpen over hoe ik dit in iWeb 09 voor elkaar krijg? Ik zou graag een stuk of 6 foto's met een mooie 'fade' elkaar willen laten afwisselen.

Ik heb de link naar medienfreunde gevolgd maar als ik dit script kopieer gebeurt er niks in iWeb. Terwijl je zou verwachten dat de foto’s (van hun site) gewoon via het web geladen zouden moeten worden. Als dat werkt verander ik de links wel naar een eigen foto mapje. Heb ik nog iets anders nodig dan onderstaand voorbeeldje?

Alvast dank voor de gene die me een tip wil geven. :lol:

Ewout

<ul id=“portfolio”>
<li>
<a href=“http://medienfreunde.com/deutsch/referenzen/kreation/good_guy__bad_guy.html”>
<img src=“images/ggbg.gif” alt=“Good Guy bad Guy” />
</a>
</li>
<li>
<a href=“http://medienfreunde.com/deutsch/referenzen/kreation/whizzkids.html”>
<img src=“images/whizzkids.gif” alt=“Whizzkids” />
</a>
</li>
<li>
<a href=“http://medienfreunde.com/deutsch/referenzen/printdesign/koenigin_mutter.html”>
<img src=“images/km.jpg” alt=“Königin Mutter” />
</a>
</li>
<li>
<a href=“http://medienfreunde.com/deutsch/referenzen/webdesign/rt_reprotechnik_-_hybride_archivierung.html”>
<img src=“images/rt_arch.jpg” alt=“RT Hybride Archivierung” />
</a>
</li>
<li>
<a href=“http://medienfreunde.com/deutsch/referenzen/kommunikation/tuev_sued_gruppe.html”>
<img src=“images/tuev.jpg” alt=“TÜV SÜD Gruppe” />
</a>
</li>
</ul>

De foto's worden niet geladen omdat er een relatief pad staat. Verander dit naar een absoluut pad (dus inclusief de http:// en al dat gedoe), en het zou moeten werken.

bijvoorbeeld, voor de eerste afbeelding moet je images/ggbg.gif vervangen door http://medienfreunde.com/lab/innerfade/images/ggbg.gif enzovoort voor alle afbeeldingen

Ok, ik denk dat ik het snap, ik zag de regel er boven als absoluut pad aan. Hoop dat het lukt.

Thanx iJust!

OK, wow, ik heb nu 4 foto's onder elkaar staan, maar verder gebeurt er niks. Het aangepaste script ziet er nu zo uit: De 'href' staat er nog in omdat ik niet zeker weet of ik die zomaar mag weggooien. Hoe krijg ik nu dat er maar een foto per keer wordt weergegeven en dan mooi 'faded' naar de volgende?

Echt weer zo’n ‘iWeb-ber’ die niks van code weet… :oops:

<ul id=“huissie”>
<li>
<a href=“http://medienfreunde.com/deutsch/referenzen/kreation/good_guy__bad_guy.html”>
<img src=“http://web.me.com/ewoutmarije/blog_images/IMG_1960.jpg” />
</a>
</li>
<li>
<a href=“http://medienfreunde.com/deutsch/referenzen/kreation/whizzkids.html”>
<img src=“http://web.me.com/ewoutmarije/blog_images/IMG_6377.jpg” />
</a>
</li>
<li>
<a href=“http://medienfreunde.com/deutsch/referenzen/printdesign/koenigin_mutter.html”>
<img src=“http://web.me.com/ewoutmarije/blog_images/IMG_6382.jpg” />
</a>
</li>
<li>
<a href=“http://medienfreunde.com/deutsch/referenzen/webdesign/rt_reprotechnik_-_hybride_archivierung.html”>
<img src=“http://web.me.com/ewoutmarije/blog_images/IMG_7300.jpg” />
</a>
</li>
<li>
<a href=“http://medienfreunde.com/deutsch/referenzen/kommunikation/tuev_sued_gruppe.html”>
<img src=“images/tuev.jpg” alt=“TÜV SÜD Gruppe” />
</a>
</li>
</ul>

Ik heb het opgelost door een aantal foto's als een QuickTime filmpje te exporteren en die te plaatsen. Niet helemaal naar m'n zin, maar voor nu OK. Ben natuurlijk nog steeds geinteresseerd naar de eventuele gouden tip. :P Maar dat is vooral gewoon gezonde interesse in het onderwerp. Als je eenmaal aan iets begint is het leuk om te weten hoe je verder moet.

Vanuit -21 graden, warme groeten,

Ewout

Ik zie dat je ul id="portfolio" hebt aangepast naar "huissie".

Heb je 'm ook aangepast in de javascript?

[code:1:7b287b1afd]$(’#portfolio’).innerfade({
speed: ‘slow’,
timeout: 4000,
type: ‘sequence’,
containerheight: ‘220px’
});
[/code:1:7b287b1afd]