Hoe maak je een klikbare "slideshow" op je site?

Status
Niet open voor verdere reacties.
M

MadeByLaura

Gebruiker
Lid geworden
2 jun 2011
Berichten
104
Ik zag op deze site een voorbeeld:
http://www.cannondale.com/bel/
ik zou het op mijn site wel kleiner doen, maar ik denk niet dat dat veel verschil maakt,
ik heb frontpage en kompozer, dus hopelijk kan ik hiermee iets doen
je moet op de afbeeldingen kunnen klikken (zou het ook mogelijk zijn met zo'n bolletjes waarop je kan klikken en kan zien waar je zit...)

Alvast bedankt
 
Die is gemaakt met javascript. Een beetje googelen op javascript slideshow zal veel resultaten opleveren, dan moet je alleen even kijken welke je het beste bevalt. En ja, met Kompozer (of zelfs gewoon notepad) is dat prima voor elkaar te krijgen.
 
Ik heb al wat gegoogled, maar ik vind alleen maar gewone slideshows, niet zoals ik dacht te vinden, je kan niet klikken op de afbeeldingen en zo naar een andere pagina gaan...
 
Dat heeft op zich niets met de slideshow te maken. Dan moet je de afbeelding gewoon in een link zetten. Zo dus:
HTML: 
<a href="adres/van/pagina" ><img src="adres van de afbeelding" alt="beschrijving van de afbeelding" /></a>
 
Dit verschilt per site als je WYSIWYG hebt zit dit in het menu dus kan je vertellen welke webbuilder je hebt maar het kan ook met javascript
 
Hoi Laura,
Om de eindeloze zoektocht langs foto-carrousels in Google wat te bekorten:



Hiervoor is nodig (te downloaden van de pagina): het stylesheet carrousel.css, het javascript carrousel_vs2.js, en in de html-code de structuur:
HTML: 
<div id="carrousel">
	<ul>
		<li><a href="pagina-1.htm"><img title="Klik voor pagina 1" src="images/..." alt="..."></a></li>
		<li><a href="pagina-2.htm"><img title="Klik voor pagina 2" src="images/..." alt="..."></a></li>
		<li><a href="pagina-3.htm"><img title="Klik voor pagina 3" src="images/..." alt="..."></a></li>
		... enz.
	</ul>
</div>

De breedte en hoogte van de images gaan in het stylesheet.
Vaststellen maten van de <div id="carrousel"> (ook op te nemen in het stylesheet):
Breedte = breedte image + 30px
Hoogte = hoogte image + 10px​


Verder in de <head> nog een klein stukje javascript op te nemen (zie broncode pagina); daarin kan de wisselsnelheid ingesteld worden.
De link naar het script komt helemaal op het eind, vlak voor de </body></html>.

Met vriendelijke groet,
CSShunter
 
@csshunter: sorry, maar ik ben geen kenner op het vlak van css, html en java dus ik heb geen flauw idee hou ik het zou moeten doen, maar toch bedankt :)
@martijn098: ik heb kompozer en frontpage
 
Hoi Laura,
... geen flauw idee hoe ik het zou moeten doen ...
Klik om te vergroten...
Maar is dit wel wat je bedoelt?
Dan kan ik je er denk ik wel doorheen loodsen om het in Kompozer te maken.

Met vriendelijke groet,
CSShunter
 
O.K., daar gaan we! :)

Kan je een testpagina online zetten van wat je tot dusverre hebt, met één afbeelding waar het carrousel moet komen?
 
csshunter zei:
O.K., daar gaan we! :)

Kan je een testpagina online zetten van wat je tot dusverre hebt, met één afbeelding waar het carrousel moet komen?
Klik om te vergroten...
ik kan ze niet publiceren, maar kan wel een printscreen erop zetten... :Site.JPG

De slideshow moet komen waar nu het grote grijze vlak is
 
Aha, dan moeten dus niet de plaatjes van het carrousel aanklikbaar zijn (het grote grijze vlak), maar alleen het kluitje pagina-links die er aan de rechterkant boven hangen?
Of ook nog de carrousel-plaatjes (dat lijkt me wat verwarrend voor de bezoekers)?
 
Wat begrijp je niet aan de uitleg die op die site staat?
 
ik ben zoals ik al gezegd had geen kenner in html en die toestanden (ben wel bezig met een cursus html...) dus ik weet niet goed hoe ik die codes moet gebruiken...
 
Het is vrij simpel, je moet in je <head> naar de twee script bestanden linken, en je afbeeldingen moeten op de volgende manier op de site staan:
HTML: 
<div id="s3slider">
    <ul id="s3sliderContent">
        <li class="s3sliderImage">
            <img src="#">
            <span>Your text comes here</span>
        </li>
        <li class="s3sliderImage">
            <img src="#">
            <span>Your text comes here</span>
        </li>
        <div class="clear s3sliderImage"></div>
    </ul>
</div>
Dus in <li> (List items), die in een <ul> (ongesorteerde lijst) staan die op zijn beurt weer in een <div> staat. Door ze de correcte id's en classes mee te geven (zoals te zien in bovenstaande code) weet het script dat het van die afbeeldingen een diavoorstelling moet maken.
 
Maar wat snap je er niet aan? Zonder een specifieke vraag kan ik je moeilijk helpen.
 
In het begin van die tutorial zegt men dat je iets moet downloaden, ik heb het al geopend maar heb geen flauw idee wat ik er mee moet doen
Ik weet ook niet waar je al die codes moet plaatsen die men je heeft
Waarschijnlijk nog veel meer maar ja...
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan