Design Trainingen

Interactive modules webapps

<<< terugHTML basicsCSS basicsdreamweaver basicsdreamweaver xhtml websiteresponsive html5 websiteinteractive code tricswordpress website hosting & webserverwebsite beheer & cms

Voor je begint...

Download eerst deze map met modules en plaats deze map in de root (website_html).

Met onderstaande code kun je interactie toevoegen aan je responsive webapp. Denk aan een slideshow, fotoalbum met lightbox, sidebar, pageslider, social media, een map en menu-tabs. Kopieer en plak per module de code in index.html

 

Slidebar

Plaatst een linker kolom, die dmv een knop getoond of verborgen kan worden.

<div id="sidebar"><script>$("#sidebar").load( "modules/side-bar.html" );</script></div>

 

Slideshow

Plaatst een slideshow die foto's kiest uit de images/zoom map.

<article class="hele_breedte" id="slideshow"><script>$("#slideshow").load( "modules/slideshow.html" );</script></article>

 

SocialMedia links + share

Plaatst SocialMedia links en share-knoppen. Om de juiste SocialMedia-logo's maakt dit script gebruik van FontAwesome. Voeg, net als met de Google Webfonts link, deze link toe in de HEAD-section van index.html"

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />

En vervolgens in de BODY deze code op de plek waar de SocialMedia moeten komen:

<article class="kwart_breedte" id="social-media"><script>$("#social-media").load( "modules/social_media.html" );</script></article>

 

Foto-album met Lightbox PHP

Plaatst een fotoalbum met Lightbox (fotovergroting) en haalt de foto's automatisch op uit de map: images/thumb en voor uitvergroten uit images/zoom. Zorg wel voor dezelfde fotonaam in de map thumb en zoom. Maak de foto's in de map thumb kleiner (264px breed).

<article class="hele_breedte" id="photo-album-autoload"><script>$("#photo-album-autoload").load( "modules/photo_album.php" );</script></article>

 

Contactformulier PHP

Plaatst op de plek van het HTML-formulier nu een PHP-contactformulier. Dit formulier werkt alleen op een webserver met PHP. Dus eerst uploaden, om te testen!

NB: pas in de php-code je naam en e-mailadres aan om het formulier naar jouw e-mail adres te laten verwijzen.

<div id="contact-form"><script>$("#contact-form").load( "modules/contact_formulier.php" );</script></div>

 

PageSlider

Plaatst een pageslider waarmee binnen een pagina, geswiped kan worden naar andere pagina's. Werkt ook met Touchscreen.

<article class="hele_breedte" id="page-slider"><script>$("#page-slider").load( "modules/page_slider.html" );</script></article>

Interactive Map

Plaatst een afbeelding met knoppen, selectform en een rollover-infotekst. De achtergrond kan bijvoorbeeld een plattegrond zijn.

<article class="halve_breedte" id="map_holder"><script>$("#map_holder").load( "modules/map.html" );</script></article>

 

Tab Panel

Plaatst een menupanel met tabs binnen een pagina. Hierdoor verschijnt er bij klikken op een tab nieuwe informatie.

<div class="hele_breedte" id="tab-panel"><script>$("#tab-panel").load( "modules/tab_panel.html" );</script></div>

 

 

Bekijk de website met interactiviteit

 

Gratis Tekstbeheer

CushyCMS is een gratis online Tekstbeheer dat je aan een website kunt koppelen. Hierdoor kunnen de teksten op je website zonder code gewijzigd worden. Door bij elke tekst of titel de class="cushycms" te plaatsen en vervolgens via de CushyCMS-website je site en webpagina's te koppelen, worden de teksten in een teksteditor bewerkbaar.

Kijk op de CushyCMS website voor meer informatie. Alle modules, hierboven zijn al voorzien van deze classes.