Hallo,
Ik ben helemaal nieuw met jQuery en ben er nu sinds een paar weken mee aan het oefenen voor mijn eigen site, maar ik loop vast en ik kom er niet meer uit. Ik hoop dat er hier iemand is die het leuk vindt om mij te helpen.
Voor mijn portfolio-website heb ik een selectiemenu gemaakt waarin je een of meerdere categorieën aan kunt vinken en deze schuiven dan uit (van height 40px naar 350px), zodat ze zichtbaar worden. De verschillende divjes zijn op zichzelf ook klikbaar.
Nu bevinden sommige 'items' zich in meerdere categorieën, wat het al lastig maakt, want als je nu categorie 'x' uitvinkt dan moeten alle items met categorie x sluiten, behalve als deze ook nog een andere categorie bezitten die nog aangevinkt is. (sorry, dit klinkt heel ingewikkeld ...) Dit heb ik allemaal op kunnen lossen, maar omdat ik een toggle functie gebruik onthoudt ie niet of iets in of uitgeschoven is en moet je dus soms twee keer klikken voordat de functie uitgevoerd wordt. Maar hoe moet ik dit oplossen???
Dit is de jquery code:
[JS]
$(function() {
var galleries = $('.ad-gallery').adGallery();
});
function AddToFavorites()
{
title = "Title";
url = "http://www.Title.com/";
if (window.sidebar) { // Mozilla Firefox Bookmark
window.sidebar.addPanel(title, url,"");
} else if( window.external ) { // IE Favorite
window.external.AddFavorite( url, title); }
else if(window.opera && window.print) { // Opera Hotlist
return true; }
}
$(document).ready(function(){
var currentCategories = [];
function slideOut(category) {
var category = category.substring(1);
$("div.content."+category).animate({height:"350px"});
var imgsrc = $("img.imgnav."+category).attr("src");
var newimg = imgsrc.replace("_uncheck.gif", "_check.gif");
$("img.imgnav."+category).attr("src", newimg);
if(currentCategories.indexOf(category) == -1) {
currentCategories.push(category);
}
}
function slideIn(category) {
var category = category.substring(1);
currentCategories.splice(currentCategories.indexOf(category), 1);
var otherCategories = $([]);
$.each(currentCategories, function(key, val) {
otherCategories = otherCategories.add($("div.content."+val));
});
$("div.content."+category).not(otherCategories).animate({height:"40px"});
var imgsrc = $("img.imgnav."+category).attr("src");
var newimg = imgsrc.replace("_check.gif", "_uncheck.gif");
$("img.imgnav."+category).attr("src", newimg);
}
slideOut("#dwelling");
$("a.nav").toggle(
function() {
var category = $(this).attr("href");
slideOut(category);
},
function() {
var category = $(this).attr("href");
slideIn(category);
}
);
$("a.divlink").toggle(
function() {
var link = $(this).attr("href");
var array = link.split(",");
var category = array[0];
if (category!=0) {
slideOut (category);
}
var category = array[1];
if (category!=0) {
slideOut (category);
}
var category = array[2];
if (category!=0) {
slideOut (category);
}
var category = array[3];
if (category!=0) {
slideOut (category);
}
},
function() {
var link = $(this).attr("href");
var array = link.split(",");
var category = array[0];
if (category!=0) {
slideIn (category);
}
var category = array[1];
if (category!=0) {
slideIn (category);
}
var category = array[2];
if (category!=0) {
slideIn (category);
}
var category = array[3];
if (category!=0) {
slideIn (category);
}
}
)
$("a.readmore").toggle(
function() {
var readmore = $(this).attr("href");
var item = readmore.substring(1);
$("div.content."+item).animate({height:"1050px"});
},
function() {
var readmore = $(this).attr("href");
var item = readmore.substring(1);
$("div.content."+item).animate({height:"350px"});
}
);
});
[/JS]
En de HTML pagina:
Ik heb nu de toggle functie in een click functie veranderd en wil dan dat hij ziet of die categorie aan of uit staat voordat hij een bepaalde functie uitvoerd, maar het werkt niet helemaal. De code ziet er nu zo uit:
[JS]
$("a.nav").click(
function() {
var category = $(this).attr("href");
if(currentCategories.indexOf(category) == -1) {
slideOut(category);
}
else {
slideIn(category);
}
}
);
[/JS]
Het uitschuiven gaat prima, maar inschuiven doet ie niet. Kan iemand ontdekken wat er fout gaat en hoe ik dit op kan lossen?
Ontzettend bedankt alvast!
Oh ja, en hier is een online (oudere) versie van de site, voor als totaal onduidelijk is wat ik bedoel: http://bkinfo.bk.tudelft.nl/portfolio/websites/mpelgrim/wk4.8_test8/
Ik ben helemaal nieuw met jQuery en ben er nu sinds een paar weken mee aan het oefenen voor mijn eigen site, maar ik loop vast en ik kom er niet meer uit. Ik hoop dat er hier iemand is die het leuk vindt om mij te helpen.
Voor mijn portfolio-website heb ik een selectiemenu gemaakt waarin je een of meerdere categorieën aan kunt vinken en deze schuiven dan uit (van height 40px naar 350px), zodat ze zichtbaar worden. De verschillende divjes zijn op zichzelf ook klikbaar.
Nu bevinden sommige 'items' zich in meerdere categorieën, wat het al lastig maakt, want als je nu categorie 'x' uitvinkt dan moeten alle items met categorie x sluiten, behalve als deze ook nog een andere categorie bezitten die nog aangevinkt is. (sorry, dit klinkt heel ingewikkeld ...) Dit heb ik allemaal op kunnen lossen, maar omdat ik een toggle functie gebruik onthoudt ie niet of iets in of uitgeschoven is en moet je dus soms twee keer klikken voordat de functie uitgevoerd wordt. Maar hoe moet ik dit oplossen???
Dit is de jquery code:
[JS]
$(function() {
var galleries = $('.ad-gallery').adGallery();
});
function AddToFavorites()
{
title = "Title";
url = "http://www.Title.com/";
if (window.sidebar) { // Mozilla Firefox Bookmark
window.sidebar.addPanel(title, url,"");
} else if( window.external ) { // IE Favorite
window.external.AddFavorite( url, title); }
else if(window.opera && window.print) { // Opera Hotlist
return true; }
}
$(document).ready(function(){
var currentCategories = [];
function slideOut(category) {
var category = category.substring(1);
$("div.content."+category).animate({height:"350px"});
var imgsrc = $("img.imgnav."+category).attr("src");
var newimg = imgsrc.replace("_uncheck.gif", "_check.gif");
$("img.imgnav."+category).attr("src", newimg);
if(currentCategories.indexOf(category) == -1) {
currentCategories.push(category);
}
}
function slideIn(category) {
var category = category.substring(1);
currentCategories.splice(currentCategories.indexOf(category), 1);
var otherCategories = $([]);
$.each(currentCategories, function(key, val) {
otherCategories = otherCategories.add($("div.content."+val));
});
$("div.content."+category).not(otherCategories).animate({height:"40px"});
var imgsrc = $("img.imgnav."+category).attr("src");
var newimg = imgsrc.replace("_check.gif", "_uncheck.gif");
$("img.imgnav."+category).attr("src", newimg);
}
slideOut("#dwelling");
$("a.nav").toggle(
function() {
var category = $(this).attr("href");
slideOut(category);
},
function() {
var category = $(this).attr("href");
slideIn(category);
}
);
$("a.divlink").toggle(
function() {
var link = $(this).attr("href");
var array = link.split(",");
var category = array[0];
if (category!=0) {
slideOut (category);
}
var category = array[1];
if (category!=0) {
slideOut (category);
}
var category = array[2];
if (category!=0) {
slideOut (category);
}
var category = array[3];
if (category!=0) {
slideOut (category);
}
},
function() {
var link = $(this).attr("href");
var array = link.split(",");
var category = array[0];
if (category!=0) {
slideIn (category);
}
var category = array[1];
if (category!=0) {
slideIn (category);
}
var category = array[2];
if (category!=0) {
slideIn (category);
}
var category = array[3];
if (category!=0) {
slideIn (category);
}
}
)
$("a.readmore").toggle(
function() {
var readmore = $(this).attr("href");
var item = readmore.substring(1);
$("div.content."+item).animate({height:"1050px"});
},
function() {
var readmore = $(this).attr("href");
var item = readmore.substring(1);
$("div.content."+item).animate({height:"350px"});
}
);
});
[/JS]
En de HTML pagina:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html lang="en">
<head>
<title>Mariska Pelgrim</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content="Portfolio Mariska Pelgrim">
<meta name="keywords" content="Mariska, Pelgrim, portfolio, architect, architecture, design, dwelling, form, modelling, hybrid, interior, public, transformation, urbanism, webdesign">
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
<link rel="stylesheet" type="text/css" href="css/jquery.ad-gallery.css">
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/jquery-navigation2.js"></script>
<script type="text/javascript" src="js/jquery.ad-gallery.js"></script>
</head>
<body>
<img src="images/background.jpg" id="bg" alt="background">
<div id="horline"></div>
<div id="menu_bottom"></div>
<div id="menu_work"><a id="menulink_work" href="index.html"></a><a id="menulink_contact" href="contact.html"></a><a id="menulink_linkedin" href="http://www.linkedin.com/pub/mariska-pelgrim/33/38b/104" TARGET="_blank"></a><a id="menulink_facebook" href="http://www.facebook.com/?ref=home#!/profile.php?id=1481913531" TARGET="_blank"></a><a id="menulink_deviantart" href="http://a-nanaz.deviantart.com/" TARGET="_blank"></a><a id="menulink_favorites" href="javascript:AddToFavorites();"></a></div>
<div id="container">
<div id="navigation">
<a class="nav" href="#dwelling"><img src="images/navigation/dwelling_uncheck.gif" class="imgnav dwelling" alt="dwelling"></a>
<a class="nav" href="#form"><img src="images/navigation/form_uncheck.gif" class="imgnav form" alt="form & modelling"></a>
<a class="nav" href="#hybrid"><img src="images/navigation/hybrid_uncheck.gif" class="imgnav hybrid" alt="hyrbid"></a>
<a class="nav" href="#interior"><img src="images/navigation/interior_uncheck.gif" class="imgnav interior" alt="interior"></a>
<a class="nav" href="#public"><img src="images/navigation/public_uncheck.gif" class="imgnav public" alt="public"></a>
<a class="nav" href="#transform"><img src="images/navigation/transform_uncheck.gif" class="imgnav transform" alt="transformation"></a>
<a class="nav" href="#urbanism"><img src="images/navigation/urbanism_uncheck.gif" class="imgnav urbanism" alt="urbanism"></a>
<a class="nav" href="#webdesign"><img src="images/navigation/webdesign_uncheck.gif" class="imgnav webdesign" alt="webdesign"></a>
</div>
<div class="header"></div>
<div class="header">
<div class="left">
<div id="quote"></div><p class="cambrialarge">Hello, my name is <span class="largetag">MARISKA PELGRIM</span> and I enjoy making <span class="largetag">design</span> and <span class="largetag">architecture</span>. Are you curious about my work? Make a selection at the right on your categories of interest and <span class="largetag">explore</span> my <span class="largetag">portfolio</span>.</p>
</div>
</div>
<div class="content playthecity public">
<a class="divlink" href="#public"></a>
<div class="left">
<div id="gallery" class="ad-gallery">
<div class="ad-image-wrapper"></div>
<div class="ad-controls"></div>
<div class="ad-nav">
<div class="ad-thumbs">
<ul class="ad-thumb-list">
<li>
<a href="images/items/201104_playthecity/0.jpg"><img src="images/items/201104_playthecity/thumbs/t0.jpg" alt="Play the City" class="image0"></a>
</li>
<li>
<a href="images/items/201104_playthecity/1.jpg"><img src="images/items/201104_playthecity/thumbs/t1.jpg" alt="Play the City, TReC, Public Realm, Istanbul, Green Heart" class="image1"></a>
</li>
<li>
<a href="images/items/201104_playthecity/2.jpg"><img src="images/items/201104_playthecity/thumbs/t2.jpg" alt="Play the City, TReC, Public Realm, mirror, Green Heart" class="image2"></a>
</li>
<li>
<a href="images/items/201104_playthecity/3.jpg"><img src="images/items/201104_playthecity/thumbs/t3.jpg" alt="Play the City, TReC, Public Realm, section, map Istanbul" class="image3"></a>
</li>
<li>
<a href="images/items/201104_playthecity/4.jpg"><img src="images/items/201104_playthecity/thumbs/t4.jpg" alt="Play the City, TReC, Public Realm, section, map Green Heart" class="image4"></a>
</li>
<li>
<a href="images/items/201104_playthecity/5.jpg"><img src="images/items/201104_playthecity/thumbs/t5.jpg" alt="Play the City, TReC, Public Realm, section, public spaces" class="image5"></a>
</li>
<li>
<a href="images/items/201104_playthecity/6.jpg"><img src="images/items/201104_playthecity/thumbs/t6.jpg" alt="Play the City, TReC, Public Realm, section, categorization: designed, appropriated, spontaneous, lonely planet, fenced" class="image6"></a>
</li>
<li>
<a href="images/items/201104_playthecity/7.jpg"><img src="images/items/201104_playthecity/thumbs/t7.jpg" alt="Play the City, TReC, Public Realm, section, morphology, program and use" class="image7"></a>
</li>
<li>
<a href="images/items/201104_playthecity/8.jpg"><img src="images/items/201104_playthecity/thumbs/t8.jpg" alt="Play the City, TReC, Public Realm, section, nolli-maps" class="image8"></a>
</li>
<li>
<a href="images/items/201104_playthecity/9.jpg"><img src="images/items/201104_playthecity/thumbs/t9.jpg" alt="Play the City, TReC, Public Realm, section, images" class="image9"></a>
</li>
<li>
<a href="images/items/201104_playthecity/10.jpg"><img src="images/items/201104_playthecity/thumbs/t10.jpg" alt="Play the City, TReC, Public Realm, section, influence on the public realm" class="image10"></a>
</li>
<li>
<a href="images/items/201104_playthecity/11.jpg"><img src="images/items/201104_playthecity/thumbs/t11.jpg" alt="Play the City, TReC, Public Realm, section, Istanbul" class="image11"></a>
</li>
<li>
<a href="images/items/201104_playthecity/12.jpg"><img src="images/items/201104_playthecity/thumbs/t12.jpg" alt="Play the City, TReC, Public Realm, face-off, Istanbul" class="image11"></a>
</li>
<li>
<a href="images/items/201104_playthecity/13.jpg"><img src="images/items/201104_playthecity/thumbs/t13.jpg" alt="Play the City, TReC, Public Realm, face-off, Green Heart" class="image11"></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="right">
<p class="isocpeur">TReC: Play the City<br>
2011, April</p>
<p class="isocpeur">LOCATION:<br>
Green Heart, NL<br>
Arnavutköy, Istanbul, TR</p>
<p class="isocpeur">TEAM:<br>
Fabio Baldo,<br>
Mariska Pelgrim,<br>
Remko van der Vorm,<br>
Sereh Mandias</p>
<p class="isocpeur">SUPERVISORS:<br>
D. Zandbelt,<br>
E. Tan,<br>
H. Teerds</p>
<p class="isocpeur"><a class="readmore" href="#playthecity">> READ MORE</a></p>
</div>
<div class="text">
<div class="left">
<h1>This is a header.</h1>
<p class="cambria">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pretium lectus eu ligula gravida eget facilisis dui hendrerit. Integer consectetur purus ut nisl pellentesque in faucibus metus lacinia. Phasellus venenatis vehicula neque, id vestibulum purus ullamcorper sagittis. Integer faucibus mauris id purus tempor suscipit. In malesuada, ante ut auctor malesuada, ligula turpis suscipit eros, ut blandit arcu eros tincidunt massa. Curabitur sollicitudin tellus quis magna condimentum eget sollicitudin nisl vulputate. Nam tempus scelerisque augue, et dignissim risus lacinia sit amet. Pellentesque vehicula, tortor id tempus semper, nunc nisi bibendum arcu, at convallis dui quam et diam. Aliquam mi arcu, lobortis non molestie ut, gravida gravida tellus. Vestibulum vestibulum lobortis eros, quis venenatis massa blandit in. Vestibulum congue velit et mi dignissim porttitor. Sed egestas laoreet volutpat. Donec nulla magna, scelerisque nec varius sit amet, facilisis a tortor. Nulla lorem massa, porta at imperdiet quis, facilisis non lectus. Nulla id diam vestibulum risus auctor pulvinar eu a lectus. Integer ac tellus in tellus iaculis convallis. Integer et arcu tempor ipsum varius auctor.</p>
<p class="cambria">Morbi quis dolor non elit aliquam convallis vel sed enim. Donec ornare gravida leo, vel egestas ipsum tincidunt lacinia. In eget ligula sed erat sodales dictum. Duis diam dui, porttitor at sagittis a, scelerisque non mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean vulputate nisl quis felis pellentesque eu cursus justo commodo. Vivamus urna mi, consequat et volutpat quis, suscipit quis nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, turpis id congue lobortis, lectus leo luctus nisi, a blandit enim elit vel nisi. In vel ante nisi, id consequat velit. Nam commodo, nisi non aliquet molestie, turpis sapien viverra tortor, id sollicitudin diam dolor nec orci. In hac habitasse platea dictumst. Donec massa turpis, facilisis ut aliquam eu, convallis nec dolor. Aliquam sit amet enim urna.</p>
<p class="cambria">Pellentesque eu ligula et arcu iaculis varius. Donec ornare sapien ut lacus volutpat faucibus. Sed ac ante est. Curabitur mattis mattis varius.</p>
</div>
<div class="right">
<div class="downloads">
<hr>
<p class="isocpeur">DOWNLOADS</p>
<p class="isocpeur"><a href="images/items/201104_playthecity/downloads/booklet_mirror.pdf" title="Booklet: Analysis Mirror" TARGET="_blank"><img src="images/items/201104_playthecity/downloads/thumb_booklet_mirror.jpg" class="noborder"></p>
<p class="isocpeur"><a href="images/items/201104_playthecity/downloads/booklet_istanbul.pdf" title="Booklet: Analysis Section Istanbul" TARGET="_blank"><img src="images/items/201104_playthecity/downloads/thumb_booklet_istanbul.jpg" class="noborder"></a> <a href="images/items/201104_playthecity/downloads/booklet_greenheart.pdf" title="Booklet: Analysis Section Green Heart" TARGET="_blank"><img src="images/items/201104_playthecity/downloads/thumb_booklet_greenheart.jpg" class="noborder"></a></p>
</div>
</div>
</div>
</div>
<div class="content deabri form">
<a class="divlink" href="#form"></a>
<div class="left">
<div id="gallery" class="ad-gallery">
<div class="ad-image-wrapper"></div>
<div class="ad-controls"></div>
<div class="ad-nav">
<div class="ad-thumbs">
<ul class="ad-thumb-list">
<li>
<a href="images/items/201104_deabri/0.jpg"><img src="images/items/201104_deabri/thumbs/t0.jpg" alt="de abri" class="image0"></a>
</li>
<li>
<a href="images/items/201104_deabri/1.jpg"><img src="images/items/201104_deabri/thumbs/t1.jpg" alt="de abri, location, almere" class="image1"></a>
</li>
<li>
<a href="images/items/201104_deabri/2.jpg"><img src="images/items/201104_deabri/thumbs/t2.jpg" alt="de abri, location, almere, koningin beatrixpark, skatepark" class="image2"></a>
</li>
<li>
<a href="images/items/201104_deabri/3.jpg"><img src="images/items/201104_deabri/thumbs/t3.jpg" alt="de abri, location, skatepark" class="image3"></a>
</li>
<li>
<a href="images/items/201104_deabri/4.jpg"><img src="images/items/201104_deabri/thumbs/t4.jpg" alt="de abri, model studies" class="image4"></a>
</li>
<li>
<a href="images/items/201104_deabri/5.jpg"><img src="images/items/201104_deabri/thumbs/t5.jpg" alt="de abri, model studies" class="image5"></a>
</li>
<li>
<a href="images/items/201104_deabri/6.jpg"><img src="images/items/201104_deabri/thumbs/t6.jpg" alt="de abri, concept, cilinder" class="image6"></a>
</li>
<li>
<a href="images/items/201104_deabri/7.jpg"><img src="images/items/201104_deabri/thumbs/t7.jpg" alt="de abri, final design" class="image7"></a>
</li>
<li>
<a href="images/items/201104_deabri/8.jpg"><img src="images/items/201104_deabri/thumbs/t8.jpg" alt="de abri, sections" class="image8"></a>
</li>
<li>
<a href="images/items/201104_deabri/9.jpg"><img src="images/items/201104_deabri/thumbs/t9.jpg" alt="de abri, final model" class="image9"></a>
</li>
<li>
<a href="images/items/201104_deabri/10.jpg"><img src="images/items/201104_deabri/thumbs/t10.jpg" alt="de abri, final model" class="image10"></a>
</li>
<li>
<a href="images/items/201104_deabri/11.jpg"><img src="images/items/201104_deabri/thumbs/t11.jpg" alt="de abri, final model" class="image11"></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="right">
<p class="isocpeur">De Abri<br>
2011, April</p>
<p class="isocpeur">LOCATION:<br>
Koningin Beatrixpark, Almere, NL</p>
<p class="isocpeur">SUPERVISOR:<br>
B. Olsthoorn</p>
<p class="isocpeur"><a class="readmore" href="#deabri">> READ MORE</a></p>
</div>
<div class="text">
<div class="left">
<h1>This is a header.</h1>
<p class="cambria">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pretium lectus eu ligula gravida eget facilisis dui hendrerit. Integer consectetur purus ut nisl pellentesque in faucibus metus lacinia. Phasellus venenatis vehicula neque, id vestibulum purus ullamcorper sagittis. Integer faucibus mauris id purus tempor suscipit. In malesuada, ante ut auctor malesuada, ligula turpis suscipit eros, ut blandit arcu eros tincidunt massa. Curabitur sollicitudin tellus quis magna condimentum eget sollicitudin nisl vulputate. Nam tempus scelerisque augue, et dignissim risus lacinia sit amet. Pellentesque vehicula, tortor id tempus semper, nunc nisi bibendum arcu, at convallis dui quam et diam. Aliquam mi arcu, lobortis non molestie ut, gravida gravida tellus. Vestibulum vestibulum lobortis eros, quis venenatis massa blandit in. Vestibulum congue velit et mi dignissim porttitor. Sed egestas laoreet volutpat. Donec nulla magna, scelerisque nec varius sit amet, facilisis a tortor. Nulla lorem massa, porta at imperdiet quis, facilisis non lectus. Nulla id diam vestibulum risus auctor pulvinar eu a lectus. Integer ac tellus in tellus iaculis convallis. Integer et arcu tempor ipsum varius auctor.</p>
<p class="cambria">Morbi quis dolor non elit aliquam convallis vel sed enim. Donec ornare gravida leo, vel egestas ipsum tincidunt lacinia. In eget ligula sed erat sodales dictum. Duis diam dui, porttitor at sagittis a, scelerisque non mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean vulputate nisl quis felis pellentesque eu cursus justo commodo. Vivamus urna mi, consequat et volutpat quis, suscipit quis nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, turpis id congue lobortis, lectus leo luctus nisi, a blandit enim elit vel nisi. In vel ante nisi, id consequat velit. Nam commodo, nisi non aliquet molestie, turpis sapien viverra tortor, id sollicitudin diam dolor nec orci. In hac habitasse platea dictumst. Donec massa turpis, facilisis ut aliquam eu, convallis nec dolor. Aliquam sit amet enim urna.</p>
<p class="cambria">Pellentesque eu ligula et arcu iaculis varius. Donec ornare sapien ut lacus volutpat faucibus. Sed ac ante est. Curabitur mattis mattis varius.</p>
</div>
<div class="right">
<div class="downloads">
<hr>
<p class="isocpeur">DOWNLOADS</p>
</div>
</div>
</div>
</div>
<div class="content sml dwelling urbanism">
<a class="divlink" href="#dwelling,#urbanism"></a>
<div class="left">
<div id="gallery" class="ad-gallery">
<div class="ad-image-wrapper"></div>
<div class="ad-controls"></div>
<div class="ad-nav">
<div class="ad-thumbs">
<ul class="ad-thumb-list">
<li>
<a href="images/items/201101_sml/0.jpg"><img src="images/items/201101_sml/thumbs/t0.jpg" alt="sml intense high dense 0" class="image0"></a>
</li>
<li>
<a href="images/items/testgallery/1.jpg"><img src="images/items/testgallery/thumbs/t1.jpg" class="image1"></a>
</li>
<li>
<a href="images/items/testgallery/2.jpg"><img src="images/items/testgallery/thumbs/t2.jpg" class="image2"></a>
</li>
<li>
<a href="images/items/testgallery/3.jpg"><img src="images/items/testgallery/thumbs/t3.jpg" class="image3"></a>
</li>
<li>
<a href="images/items/testgallery/4.jpg"><img src="images/items/testgallery/thumbs/t4.jpg" class="image4"></a>
</li>
<li>
<a href="images/items/testgallery/5.jpg"><img src="images/items/testgallery/thumbs/t5.jpg" class="image5"></a>
</li>
<li>
<a href="images/items/testgallery/6.jpg"><img src="images/items/testgallery/thumbs/t6.jpg" class="image6"></a>
</li>
<li>
<a href="images/items/testgallery/7.jpg"><img src="images/items/testgallery/thumbs/t7.jpg" class="image7"></a>
</li>
<li>
<a href="images/items/testgallery/8.jpg"><img src="images/items/testgallery/thumbs/t8.jpg" class="image8"></a>
</li>
<li>
<a href="images/items/testgallery/9.jpg"><img src="images/items/testgallery/thumbs/t9.jpg" class="image9"></a>
</li>
<li>
<a href="images/items/testgallery/10.jpg"><img src="images/items/testgallery/thumbs/t10.jpg" class="image10"></a>
</li>
<li>
<a href="images/items/testgallery/11.jpg"><img src="images/items/testgallery/thumbs/t11.jpg" class="image11"></a>
</li>
<li>
<a href="images/items/testgallery/12.jpg"><img src="images/items/testgallery/thumbs/t12.jpg" class="image12"></a>
</li>
<li>
<a href="images/items/testgallery/13.jpg"><img src="images/items/testgallery/thumbs/t13.jpg" class="image13"></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="right">
<p class="isocpeur">SML - Intense High Dense<br>
2011, January</p>
<p class="isocpeur">LOCATION:<br>
EnCeHa, Groningen, NL</p>
<p class="isocpeur">TEAM:<br>
Fabio Baldo,<br>
Marieke de Graauw,<br>
Mariska Pelgrim</p>
<p class="isocpeur">SUPERVISORS:<br>
L. Alvarez,<br>
P. Kuitenbrouwer<br>
<p class="isocpeur"><a class="readmore" href="#sml">> READ MORE</a></p>
</div>
<div class="text">
<div class="left">
<h1>SML - Intense High dense</h1>
<p class="cambria">The concept of the masterplan is developed on the idea to combine various dwellings with working areas. To be able to define all the different typologies, as well as the relation with the workplaces, we have created several kinds of public spaces on the location.</p>
<p class="cambria">The main public space is formed as a green line which gives a visual connection with the city centre of Groningen. This space will provide collective and recreational areas for families.</p>
<p class="cambria">In addition to this green line a secondary public space in hierarchy is constituted by two public squares; one is located around the already existing villa, and one square is created together with a public building. These spaces will have an urban character and can provide an environment for couples, singles, starters and working areas.</p>
<p class="cambria">To express the quality of these spaces we defined rules for the borders of the building blocks. The dwellings on the squares and on the main street will have a formal border; a strong line separating the public and private sphere. Along the green line and the waterfront the dwellings will have an informal border; public and private have a visual connection and the garden works as a filter between the two.</p>
<p class="cambria">All family typologies have a parking space directly at their house and a garden which is connected to the green. The couples, singles and starters typologies have a garden and/or a patio or terrace.</p>
<p class="cambria">The working areas are combined within the blocks and have their own entrance. The public building on the square provides in extra working facilities.</p>
<p class="cambria">This plan provides living and working spaces for a variety of typologies within a qualitative public space.</p>
</div>
<div class="right">
<div class="downloads">
<hr>
<p class="isocpeur">DOWNLOADS</p>
</div>
</div>
</div>
</div>
<div class="content famousdinners webdesign">
<a class="divlink" href="#webdesign"></a>
<div class="left">
<div id="gallery" class="ad-gallery">
<div class="ad-image-wrapper"></div>
<div class="ad-controls"></div>
<div class="ad-nav">
<div class="ad-thumbs">
<ul class="ad-thumb-list">
<li>
<a href="images/items/201002_famousdinners/0.jpg"><img src="images/items/201002_famousdinners/thumbs/t0.jpg" alt="famous dinners 0" class="image0"></a>
</li>
<li>
<a href="images/items/testgallery/1.jpg"><img src="images/items/testgallery/thumbs/t1.jpg" class="image1"></a>
</li>
<li>
<a href="images/items/testgallery/2.jpg"><img src="images/items/testgallery/thumbs/t2.jpg" class="image2"></a>
</li>
<li>
<a href="images/items/testgallery/3.jpg"><img src="images/items/testgallery/thumbs/t3.jpg" class="image3"></a>
</li>
<li>
<a href="images/items/testgallery/4.jpg"><img src="images/items/testgallery/thumbs/t4.jpg" class="image4"></a>
</li>
<li>
<a href="images/items/testgallery/5.jpg"><img src="images/items/testgallery/thumbs/t5.jpg" class="image5"></a>
</li>
<li>
<a href="images/items/testgallery/6.jpg"><img src="images/items/testgallery/thumbs/t6.jpg" class="image6"></a>
</li>
<li>
<a href="images/items/testgallery/7.jpg"><img src="images/items/testgallery/thumbs/t7.jpg" class="image7"></a>
</li>
<li>
<a href="images/items/testgallery/8.jpg"><img src="images/items/testgallery/thumbs/t8.jpg" class="image8"></a>
</li>
<li>
<a href="images/items/testgallery/9.jpg"><img src="images/items/testgallery/thumbs/t9.jpg" class="image9"></a>
</li>
<li>
<a href="images/items/testgallery/10.jpg"><img src="images/items/testgallery/thumbs/t10.jpg" class="image10"></a>
</li>
<li>
<a href="images/items/testgallery/11.jpg"><img src="images/items/testgallery/thumbs/t11.jpg" class="image11"></a>
</li>
<li>
<a href="images/items/testgallery/12.jpg"><img src="images/items/testgallery/thumbs/t12.jpg" class="image12"></a>
</li>
<li>
<a href="images/items/testgallery/13.jpg"><img src="images/items/testgallery/thumbs/t13.jpg" class="image13"></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="right">
<p class="isocpeur">Famous Dinners<br>
2010, February</p>
<br>
<p class="isocpeur"><a class="readmore" href="#famousdinners">> READ MORE</a></p>
</div>
<div class="text">
<h1>This is a header.</h1>
<p class="cambria">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pretium lectus eu ligula gravida eget facilisis dui hendrerit. Integer consectetur purus ut nisl pellentesque in faucibus metus lacinia. Phasellus venenatis vehicula neque, id vestibulum purus ullamcorper sagittis. Integer faucibus mauris id purus tempor suscipit. In malesuada, ante ut auctor malesuada, ligula turpis suscipit eros, ut blandit arcu eros tincidunt massa. Curabitur sollicitudin tellus quis magna condimentum eget sollicitudin nisl vulputate. Nam tempus scelerisque augue, et dignissim risus lacinia sit amet. Pellentesque vehicula, tortor id tempus semper, nunc nisi bibendum arcu, at convallis dui quam et diam. Aliquam mi arcu, lobortis non molestie ut, gravida gravida tellus. Vestibulum vestibulum lobortis eros, quis venenatis massa blandit in. Vestibulum congue velit et mi dignissim porttitor. Sed egestas laoreet volutpat. Donec nulla magna, scelerisque nec varius sit amet, facilisis a tortor. Nulla lorem massa, porta at imperdiet quis, facilisis non lectus. Nulla id diam vestibulum risus auctor pulvinar eu a lectus. Integer ac tellus in tellus iaculis convallis. Integer et arcu tempor ipsum varius auctor.</p>
<p class="cambria">Morbi quis dolor non elit aliquam convallis vel sed enim. Donec ornare gravida leo, vel egestas ipsum tincidunt lacinia. In eget ligula sed erat sodales dictum. Duis diam dui, porttitor at sagittis a, scelerisque non mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean vulputate nisl quis felis pellentesque eu cursus justo commodo. Vivamus urna mi, consequat et volutpat quis, suscipit quis nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, turpis id congue lobortis, lectus leo luctus nisi, a blandit enim elit vel nisi. In vel ante nisi, id consequat velit. Nam commodo, nisi non aliquet molestie, turpis sapien viverra tortor, id sollicitudin diam dolor nec orci. In hac habitasse platea dictumst. Donec massa turpis, facilisis ut aliquam eu, convallis nec dolor. Aliquam sit amet enim urna.</p>
<p class="cambria">Pellentesque eu ligula et arcu iaculis varius. Donec ornare sapien ut lacus volutpat faucibus. Sed ac ante est. Curabitur mattis mattis varius. Nunc et lacus quam, eget aliquam nisl. Ut velit nulla, porta id accumsan nec, fermentum sit amet leo. Nulla rutrum felis vitae metus gravida auctor. Maecenas tempus velit non leo porttitor volutpat vel et nunc. Aliquam eget erat nec turpis semper egestas id sed risus. Nulla et lectus orci. Maecenas viverra mauris rutrum sem ultricies auctor. Duis scelerisque, libero at pharetra ultrices, ligula urna lacinia sem, in dignissim tortor nulla quis massa. Phasellus lacus odio, fringilla at aliquet vel, varius congue arcu. Praesent cursus nisl a nunc pulvinar euismod. Praesent dignissim elit id nibh ornare iaculis at vel risus. Sed non metus et dui tincidunt convallis. </p>
</div>
</div>
<div class="content particulier dwelling">
<a class="divlink" href="#dwelling"></a>
<div class="left">
<div id="gallery" class="ad-gallery">
<div class="ad-image-wrapper"></div>
<div class="ad-controls"></div>
<div class="ad-nav">
<div class="ad-thumbs">
<ul class="ad-thumb-list">
<li>
<a href="images/items/201001_particulierwoonhuis/0.jpg"><img src="images/items/201001_particulierwoonhuis/thumbs/t0.jpg" alt="particulier woonhuise 0" class="image0"></a>
</li>
<li>
<a href="images/items/testgallery/1.jpg"><img src="images/items/testgallery/thumbs/t1.jpg" class="image1"></a>
</li>
<li>
<a href="images/items/testgallery/2.jpg"><img src="images/items/testgallery/thumbs/t2.jpg" class="image2"></a>
</li>
<li>
<a href="images/items/testgallery/3.jpg"><img src="images/items/testgallery/thumbs/t3.jpg" class="image3"></a>
</li>
<li>
<a href="images/items/testgallery/4.jpg"><img src="images/items/testgallery/thumbs/t4.jpg" class="image4"></a>
</li>
<li>
<a href="images/items/testgallery/5.jpg"><img src="images/items/testgallery/thumbs/t5.jpg" class="image5"></a>
</li>
<li>
<a href="images/items/testgallery/6.jpg"><img src="images/items/testgallery/thumbs/t6.jpg" class="image6"></a>
</li>
<li>
<a href="images/items/testgallery/7.jpg"><img src="images/items/testgallery/thumbs/t7.jpg" class="image7"></a>
</li>
<li>
<a href="images/items/testgallery/8.jpg"><img src="images/items/testgallery/thumbs/t8.jpg" class="image8"></a>
</li>
<li>
<a href="images/items/testgallery/9.jpg"><img src="images/items/testgallery/thumbs/t9.jpg" class="image9"></a>
</li>
<li>
<a href="images/items/testgallery/10.jpg"><img src="images/items/testgallery/thumbs/t10.jpg" class="image10"></a>
</li>
<li>
<a href="images/items/testgallery/11.jpg"><img src="images/items/testgallery/thumbs/t11.jpg" class="image11"></a>
</li>
<li>
<a href="images/items/testgallery/12.jpg"><img src="images/items/testgallery/thumbs/t12.jpg" class="image12"></a>
</li>
<li>
<a href="images/items/testgallery/13.jpg"><img src="images/items/testgallery/thumbs/t13.jpg" class="image13"></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="right">
<p class="isocpeur">Separated Together<br>
2010, January</p>
<p class="isocpeur">LOCATION:<br>
Nieuw Leyden, Leiden, NL</p>
<p class="isocpeur">SUPERVISOR:<br>
S. Witteman</p>
<p class="isocpeur"><a class="readmore" href="#particulier">> READ MORE</a></p>
</div>
<div class="text">
<h1>This is a header.</h1>
<p class="cambria">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pretium lectus eu ligula gravida eget facilisis dui hendrerit. Integer consectetur purus ut nisl pellentesque in faucibus metus lacinia. Phasellus venenatis vehicula neque, id vestibulum purus ullamcorper sagittis. Integer faucibus mauris id purus tempor suscipit. In malesuada, ante ut auctor malesuada, ligula turpis suscipit eros, ut blandit arcu eros tincidunt massa. Curabitur sollicitudin tellus quis magna condimentum eget sollicitudin nisl vulputate. Nam tempus scelerisque augue, et dignissim risus lacinia sit amet. Pellentesque vehicula, tortor id tempus semper, nunc nisi bibendum arcu, at convallis dui quam et diam. Aliquam mi arcu, lobortis non molestie ut, gravida gravida tellus. Vestibulum vestibulum lobortis eros, quis venenatis massa blandit in. Vestibulum congue velit et mi dignissim porttitor. Sed egestas laoreet volutpat. Donec nulla magna, scelerisque nec varius sit amet, facilisis a tortor. Nulla lorem massa, porta at imperdiet quis, facilisis non lectus. Nulla id diam vestibulum risus auctor pulvinar eu a lectus. Integer ac tellus in tellus iaculis convallis. Integer et arcu tempor ipsum varius auctor.</p>
<p class="cambria">Morbi quis dolor non elit aliquam convallis vel sed enim. Donec ornare gravida leo, vel egestas ipsum tincidunt lacinia. In eget ligula sed erat sodales dictum. Duis diam dui, porttitor at sagittis a, scelerisque non mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean vulputate nisl quis felis pellentesque eu cursus justo commodo. Vivamus urna mi, consequat et volutpat quis, suscipit quis nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, turpis id congue lobortis, lectus leo luctus nisi, a blandit enim elit vel nisi. In vel ante nisi, id consequat velit. Nam commodo, nisi non aliquet molestie, turpis sapien viverra tortor, id sollicitudin diam dolor nec orci. In hac habitasse platea dictumst. Donec massa turpis, facilisis ut aliquam eu, convallis nec dolor. Aliquam sit amet enim urna.</p>
<p class="cambria">Pellentesque eu ligula et arcu iaculis varius. Donec ornare sapien ut lacus volutpat faucibus. Sed ac ante est. Curabitur mattis mattis varius. Nunc et lacus quam, eget aliquam nisl. Ut velit nulla, porta id accumsan nec, fermentum sit amet leo. Nulla rutrum felis vitae metus gravida auctor. Maecenas tempus velit non leo porttitor volutpat vel et nunc. Aliquam eget erat nec turpis semper egestas id sed risus. Nulla et lectus orci. Maecenas viverra mauris rutrum sem ultricies auctor. Duis scelerisque, libero at pharetra ultrices, ligula urna lacinia sem, in dignissim tortor nulla quis massa. Phasellus lacus odio, fringilla at aliquet vel, varius congue arcu. Praesent cursus nisl a nunc pulvinar euismod. Praesent dignissim elit id nibh ornare iaculis at vel risus. Sed non metus et dui tincidunt convallis. </p>
</div>
</div>
<div class="content retail interior">
<a class="divlink" href="#interior"></a>
<div class="left">
<div id="gallery" class="ad-gallery">
<div class="ad-image-wrapper"></div>
<div class="ad-controls"></div>
<div class="ad-nav">
<div class="ad-thumbs">
<ul class="ad-thumb-list">
<li>
<a href="images/items/200910_retail/0.jpg"><img src="images/items/200910_retail/thumbs/t0.jpg" alt="retail 0" class="image0"></a>
</li>
<li>
<a href="images/items/testgallery/1.jpg"><img src="images/items/testgallery/thumbs/t1.jpg" class="image1"></a>
</li>
<li>
<a href="images/items/testgallery/2.jpg"><img src="images/items/testgallery/thumbs/t2.jpg" class="image2"></a>
</li>
<li>
<a href="images/items/testgallery/3.jpg"><img src="images/items/testgallery/thumbs/t3.jpg" class="image3"></a>
</li>
<li>
<a href="images/items/testgallery/4.jpg"><img src="images/items/testgallery/thumbs/t4.jpg" class="image4"></a>
</li>
<li>
<a href="images/items/testgallery/5.jpg"><img src="images/items/testgallery/thumbs/t5.jpg" class="image5"></a>
</li>
<li>
<a href="images/items/testgallery/6.jpg"><img src="images/items/testgallery/thumbs/t6.jpg" class="image6"></a>
</li>
<li>
<a href="images/items/testgallery/7.jpg"><img src="images/items/testgallery/thumbs/t7.jpg" class="image7"></a>
</li>
<li>
<a href="images/items/testgallery/8.jpg"><img src="images/items/testgallery/thumbs/t8.jpg" class="image8"></a>
</li>
<li>
<a href="images/items/testgallery/9.jpg"><img src="images/items/testgallery/thumbs/t9.jpg" class="image9"></a>
</li>
<li>
<a href="images/items/testgallery/10.jpg"><img src="images/items/testgallery/thumbs/t10.jpg" class="image10"></a>
</li>
<li>
<a href="images/items/testgallery/11.jpg"><img src="images/items/testgallery/thumbs/t11.jpg" class="image11"></a>
</li>
<li>
<a href="images/items/testgallery/12.jpg"><img src="images/items/testgallery/thumbs/t12.jpg" class="image12"></a>
</li>
<li>
<a href="images/items/testgallery/13.jpg"><img src="images/items/testgallery/thumbs/t13.jpg" class="image13"></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="right">
<p class="isocpeur">Plakkies<br>
2009, October</p>
<p class="isocpeur">LOCATION:<br>
Coolsingen, Rotterdam, NL</p>
<p class="isocpeur">SUPERVISORS:<br>
H. Serbruyns,<br>
J. Voorn<br>
<p class="isocpeur"><a class="readmore" href="#retail">> READ MORE</a></p>
</div>
<div class="text">
<h1>This is a header.</h1>
<p class="cambria">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pretium lectus eu ligula gravida eget facilisis dui hendrerit. Integer consectetur purus ut nisl pellentesque in faucibus metus lacinia. Phasellus venenatis vehicula neque, id vestibulum purus ullamcorper sagittis. Integer faucibus mauris id purus tempor suscipit. In malesuada, ante ut auctor malesuada, ligula turpis suscipit eros, ut blandit arcu eros tincidunt massa. Curabitur sollicitudin tellus quis magna condimentum eget sollicitudin nisl vulputate. Nam tempus scelerisque augue, et dignissim risus lacinia sit amet. Pellentesque vehicula, tortor id tempus semper, nunc nisi bibendum arcu, at convallis dui quam et diam. Aliquam mi arcu, lobortis non molestie ut, gravida gravida tellus. Vestibulum vestibulum lobortis eros, quis venenatis massa blandit in. Vestibulum congue velit et mi dignissim porttitor. Sed egestas laoreet volutpat. Donec nulla magna, scelerisque nec varius sit amet, facilisis a tortor. Nulla lorem massa, porta at imperdiet quis, facilisis non lectus. Nulla id diam vestibulum risus auctor pulvinar eu a lectus. Integer ac tellus in tellus iaculis convallis. Integer et arcu tempor ipsum varius auctor.</p>
<p class="cambria">Morbi quis dolor non elit aliquam convallis vel sed enim. Donec ornare gravida leo, vel egestas ipsum tincidunt lacinia. In eget ligula sed erat sodales dictum. Duis diam dui, porttitor at sagittis a, scelerisque non mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean vulputate nisl quis felis pellentesque eu cursus justo commodo. Vivamus urna mi, consequat et volutpat quis, suscipit quis nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, turpis id congue lobortis, lectus leo luctus nisi, a blandit enim elit vel nisi. In vel ante nisi, id consequat velit. Nam commodo, nisi non aliquet molestie, turpis sapien viverra tortor, id sollicitudin diam dolor nec orci. In hac habitasse platea dictumst. Donec massa turpis, facilisis ut aliquam eu, convallis nec dolor. Aliquam sit amet enim urna.</p>
<p class="cambria">Pellentesque eu ligula et arcu iaculis varius. Donec ornare sapien ut lacus volutpat faucibus. Sed ac ante est. Curabitur mattis mattis varius. Nunc et lacus quam, eget aliquam nisl. Ut velit nulla, porta id accumsan nec, fermentum sit amet leo. Nulla rutrum felis vitae metus gravida auctor. Maecenas tempus velit non leo porttitor volutpat vel et nunc. Aliquam eget erat nec turpis semper egestas id sed risus. Nulla et lectus orci. Maecenas viverra mauris rutrum sem ultricies auctor. Duis scelerisque, libero at pharetra ultrices, ligula urna lacinia sem, in dignissim tortor nulla quis massa. Phasellus lacus odio, fringilla at aliquet vel, varius congue arcu. Praesent cursus nisl a nunc pulvinar euismod. Praesent dignissim elit id nibh ornare iaculis at vel risus. Sed non metus et dui tincidunt convallis. </p>
</div>
</div>
<div class="content openbaargebouw hybrid public">
<a class="divlink" href="#hybrid,#public"></a>
<div class="left">
<div id="gallery" class="ad-gallery">
<div class="ad-image-wrapper"></div>
<div class="ad-controls"></div>
<div class="ad-nav">
<div class="ad-thumbs">
<ul class="ad-thumb-list">
<li>
<a href="images/items/200906_kleinopenbaargebouw/0.jpg"><img src="images/items/200906_kleinopenbaargebouw/thumbs/t0.jpg" alt="klein openbaar gebouw 0" class="image0"></a>
</li>
<li>
<a href="images/items/testgallery/1.jpg"><img src="images/items/testgallery/thumbs/t1.jpg" class="image1"></a>
</li>
<li>
<a href="images/items/testgallery/2.jpg"><img src="images/items/testgallery/thumbs/t2.jpg" class="image2"></a>
</li>
<li>
<a href="images/items/testgallery/3.jpg"><img src="images/items/testgallery/thumbs/t3.jpg" class="image3"></a>
</li>
<li>
<a href="images/items/testgallery/4.jpg"><img src="images/items/testgallery/thumbs/t4.jpg" class="image4"></a>
</li>
<li>
<a href="images/items/testgallery/5.jpg"><img src="images/items/testgallery/thumbs/t5.jpg" class="image5"></a>
</li>
<li>
<a href="images/items/testgallery/6.jpg"><img src="images/items/testgallery/thumbs/t6.jpg" class="image6"></a>
</li>
<li>
<a href="images/items/testgallery/7.jpg"><img src="images/items/testgallery/thumbs/t7.jpg" class="image7"></a>
</li>
<li>
<a href="images/items/testgallery/8.jpg"><img src="images/items/testgallery/thumbs/t8.jpg" class="image8"></a>
</li>
<li>
<a href="images/items/testgallery/9.jpg"><img src="images/items/testgallery/thumbs/t9.jpg" class="image9"></a>
</li>
<li>
<a href="images/items/testgallery/10.jpg"><img src="images/items/testgallery/thumbs/t10.jpg" class="image10"></a>
</li>
<li>
<a href="images/items/testgallery/11.jpg"><img src="images/items/testgallery/thumbs/t11.jpg" class="image11"></a>
</li>
<li>
<a href="images/items/testgallery/12.jpg"><img src="images/items/testgallery/thumbs/t12.jpg" class="image12"></a>
</li>
<li>
<a href="images/items/testgallery/13.jpg"><img src="images/items/testgallery/thumbs/t13.jpg" class="image13"></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="right">
<p class="isocpeur">Town Hall Westland<br>
2009, July</p>
<p class="isocpeur">LOCATION:<br>
Verdilaan, Naaldwijk, NL</p>
<p class="isocpeur">TEAM:<br>
Bart van der Zalm,<br>
Esmee Mlihi,<br>
Marc Nicolai,<br>
Mariska Pelgrim,<br>
Sarah Marijn Trap</p>
<p class="isocpeur">SUPERVISORS:<br>
O. Caso,<br>
G. Eide</p>
<p class="isocpeur"><a class="readmore" href="#openbaargebouw">> READ MORE</a></p>
</div>
<div class="text">
<h1>This is a header.</h1>
<p class="cambria">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pretium lectus eu ligula gravida eget facilisis dui hendrerit. Integer consectetur purus ut nisl pellentesque in faucibus metus lacinia. Phasellus venenatis vehicula neque, id vestibulum purus ullamcorper sagittis. Integer faucibus mauris id purus tempor suscipit. In malesuada, ante ut auctor malesuada, ligula turpis suscipit eros, ut blandit arcu eros tincidunt massa. Curabitur sollicitudin tellus quis magna condimentum eget sollicitudin nisl vulputate. Nam tempus scelerisque augue, et dignissim risus lacinia sit amet. Pellentesque vehicula, tortor id tempus semper, nunc nisi bibendum arcu, at convallis dui quam et diam. Aliquam mi arcu, lobortis non molestie ut, gravida gravida tellus. Vestibulum vestibulum lobortis eros, quis venenatis massa blandit in. Vestibulum congue velit et mi dignissim porttitor. Sed egestas laoreet volutpat. Donec nulla magna, scelerisque nec varius sit amet, facilisis a tortor. Nulla lorem massa, porta at imperdiet quis, facilisis non lectus. Nulla id diam vestibulum risus auctor pulvinar eu a lectus. Integer ac tellus in tellus iaculis convallis. Integer et arcu tempor ipsum varius auctor.</p>
<p class="cambria">Morbi quis dolor non elit aliquam convallis vel sed enim. Donec ornare gravida leo, vel egestas ipsum tincidunt lacinia. In eget ligula sed erat sodales dictum. Duis diam dui, porttitor at sagittis a, scelerisque non mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean vulputate nisl quis felis pellentesque eu cursus justo commodo. Vivamus urna mi, consequat et volutpat quis, suscipit quis nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, turpis id congue lobortis, lectus leo luctus nisi, a blandit enim elit vel nisi. In vel ante nisi, id consequat velit. Nam commodo, nisi non aliquet molestie, turpis sapien viverra tortor, id sollicitudin diam dolor nec orci. In hac habitasse platea dictumst. Donec massa turpis, facilisis ut aliquam eu, convallis nec dolor. Aliquam sit amet enim urna.</p>
<p class="cambria">Pellentesque eu ligula et arcu iaculis varius. Donec ornare sapien ut lacus volutpat faucibus. Sed ac ante est. Curabitur mattis mattis varius. Nunc et lacus quam, eget aliquam nisl. Ut velit nulla, porta id accumsan nec, fermentum sit amet leo. Nulla rutrum felis vitae metus gravida auctor. Maecenas tempus velit non leo porttitor volutpat vel et nunc. Aliquam eget erat nec turpis semper egestas id sed risus. Nulla et lectus orci. Maecenas viverra mauris rutrum sem ultricies auctor. Duis scelerisque, libero at pharetra ultrices, ligula urna lacinia sem, in dignissim tortor nulla quis massa. Phasellus lacus odio, fringilla at aliquet vel, varius congue arcu. Praesent cursus nisl a nunc pulvinar euismod. Praesent dignissim elit id nibh ornare iaculis at vel risus. Sed non metus et dui tincidunt convallis. </p>
</div>
</div>
<div class="content hergebruik hybrid public transform urbanism">
<a class="divlink" href="#hybrid,#public,#transform,#urbanism"></a>
<div class="left">
<div id="gallery" class="ad-gallery">
<div class="ad-image-wrapper"></div>
<div class="ad-controls"></div>
<div class="ad-nav">
<div class="ad-thumbs">
<ul class="ad-thumb-list">
<li>
<a href="images/items/200812_hergebruik/0.jpg"><img src="images/items/200812_hergebruik/thumbs/t0.jpg" alt="hergebruik en functiemenging 0" class="image0"></a>
</li>
<li>
<a href="images/items/testgallery/1.jpg"><img src="images/items/testgallery/thumbs/t1.jpg" class="image1"></a>
</li>
<li>
<a href="images/items/testgallery/2.jpg"><img src="images/items/testgallery/thumbs/t2.jpg" class="image2"></a>
</li>
<li>
<a href="images/items/testgallery/3.jpg"><img src="images/items/testgallery/thumbs/t3.jpg" class="image3"></a>
</li>
<li>
<a href="images/items/testgallery/4.jpg"><img src="images/items/testgallery/thumbs/t4.jpg" class="image4"></a>
</li>
<li>
<a href="images/items/testgallery/5.jpg"><img src="images/items/testgallery/thumbs/t5.jpg" class="image5"></a>
</li>
<li>
<a href="images/items/testgallery/6.jpg"><img src="images/items/testgallery/thumbs/t6.jpg" class="image6"></a>
</li>
<li>
<a href="images/items/testgallery/7.jpg"><img src="images/items/testgallery/thumbs/t7.jpg" class="image7"></a>
</li>
<li>
<a href="images/items/testgallery/8.jpg"><img src="images/items/testgallery/thumbs/t8.jpg" class="image8"></a>
</li>
<li>
<a href="images/items/testgallery/9.jpg"><img src="images/items/testgallery/thumbs/t9.jpg" class="image9"></a>
</li>
<li>
<a href="images/items/testgallery/10.jpg"><img src="images/items/testgallery/thumbs/t10.jpg" class="image10"></a>
</li>
<li>
<a href="images/items/testgallery/11.jpg"><img src="images/items/testgallery/thumbs/t11.jpg" class="image11"></a>
</li>
<li>
<a href="images/items/testgallery/12.jpg"><img src="images/items/testgallery/thumbs/t12.jpg" class="image12"></a>
</li>
<li>
<a href="images/items/testgallery/13.jpg"><img src="images/items/testgallery/thumbs/t13.jpg" class="image13"></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="right">
<p class="isocpeur">Santos<br>
2008, December</p>
<p class="isocpeur">LOCATION:<br>
Katendrecht, Rotterdam, NL</p>
<p class="isocpeur">TEAM:<br>
Arend Ripping,<br>
Ben Luteijn,<br>
Mariska Pelgrim,<br>
Sereh Mandias</p>
<p class="isocpeur">SUPERVISORS:<br>
P. Wienberg,<br>
N. Stukje (SA)</p>
<p class="isocpeur"><a class="readmore" href="#hergebruik">> READ MORE</a></p>
</div>
<div class="text">
<h1>This is a header.</h1>
<p class="cambria">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pretium lectus eu ligula gravida eget facilisis dui hendrerit. Integer consectetur purus ut nisl pellentesque in faucibus metus lacinia. Phasellus venenatis vehicula neque, id vestibulum purus ullamcorper sagittis. Integer faucibus mauris id purus tempor suscipit. In malesuada, ante ut auctor malesuada, ligula turpis suscipit eros, ut blandit arcu eros tincidunt massa. Curabitur sollicitudin tellus quis magna condimentum eget sollicitudin nisl vulputate. Nam tempus scelerisque augue, et dignissim risus lacinia sit amet. Pellentesque vehicula, tortor id tempus semper, nunc nisi bibendum arcu, at convallis dui quam et diam. Aliquam mi arcu, lobortis non molestie ut, gravida gravida tellus. Vestibulum vestibulum lobortis eros, quis venenatis massa blandit in. Vestibulum congue velit et mi dignissim porttitor. Sed egestas laoreet volutpat. Donec nulla magna, scelerisque nec varius sit amet, facilisis a tortor. Nulla lorem massa, porta at imperdiet quis, facilisis non lectus. Nulla id diam vestibulum risus auctor pulvinar eu a lectus. Integer ac tellus in tellus iaculis convallis. Integer et arcu tempor ipsum varius auctor.</p>
<p class="cambria">Morbi quis dolor non elit aliquam convallis vel sed enim. Donec ornare gravida leo, vel egestas ipsum tincidunt lacinia. In eget ligula sed erat sodales dictum. Duis diam dui, porttitor at sagittis a, scelerisque non mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean vulputate nisl quis felis pellentesque eu cursus justo commodo. Vivamus urna mi, consequat et volutpat quis, suscipit quis nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, turpis id congue lobortis, lectus leo luctus nisi, a blandit enim elit vel nisi. In vel ante nisi, id consequat velit. Nam commodo, nisi non aliquet molestie, turpis sapien viverra tortor, id sollicitudin diam dolor nec orci. In hac habitasse platea dictumst. Donec massa turpis, facilisis ut aliquam eu, convallis nec dolor. Aliquam sit amet enim urna.</p>
<p class="cambria">Pellentesque eu ligula et arcu iaculis varius. Donec ornare sapien ut lacus volutpat faucibus. Sed ac ante est. Curabitur mattis mattis varius. Nunc et lacus quam, eget aliquam nisl. Ut velit nulla, porta id accumsan nec, fermentum sit amet leo. Nulla rutrum felis vitae metus gravida auctor. Maecenas tempus velit non leo porttitor volutpat vel et nunc. Aliquam eget erat nec turpis semper egestas id sed risus. Nulla et lectus orci. Maecenas viverra mauris rutrum sem ultricies auctor. Duis scelerisque, libero at pharetra ultrices, ligula urna lacinia sem, in dignissim tortor nulla quis massa. Phasellus lacus odio, fringilla at aliquet vel, varius congue arcu. Praesent cursus nisl a nunc pulvinar euismod. Praesent dignissim elit id nibh ornare iaculis at vel risus. Sed non metus et dui tincidunt convallis. </p>
</div>
</div>
<div class="last content vormstudie form">
<a class="divlink" href="#form"></a>
<div class="left">
<div id="gallery" class="ad-gallery">
<div class="ad-image-wrapper"></div>
<div class="ad-controls"></div>
<div class="ad-nav">
<div class="ad-thumbs">
<ul class="ad-thumb-list">
<li>
<a href="images/items/200706_vormstudie/0.jpg"><img src="images/items/200706_vormstudie/thumbs/t0.jpg" alt="vormstudie 0" class="image0"></a>
</li>
<li>
<a href="images/items/testgallery/1.jpg"><img src="images/items/testgallery/thumbs/t1.jpg" class="image1"></a>
</li>
<li>
<a href="images/items/testgallery/2.jpg"><img src="images/items/testgallery/thumbs/t2.jpg" class="image2"></a>
</li>
<li>
<a href="images/items/testgallery/3.jpg"><img src="images/items/testgallery/thumbs/t3.jpg" class="image3"></a>
</li>
<li>
<a href="images/items/testgallery/4.jpg"><img src="images/items/testgallery/thumbs/t4.jpg" class="image4"></a>
</li>
<li>
<a href="images/items/testgallery/5.jpg"><img src="images/items/testgallery/thumbs/t5.jpg" class="image5"></a>
</li>
<li>
<a href="images/items/testgallery/6.jpg"><img src="images/items/testgallery/thumbs/t6.jpg" class="image6"></a>
</li>
<li>
<a href="images/items/testgallery/7.jpg"><img src="images/items/testgallery/thumbs/t7.jpg" class="image7"></a>
</li>
<li>
<a href="images/items/testgallery/8.jpg"><img src="images/items/testgallery/thumbs/t8.jpg" class="image8"></a>
</li>
<li>
<a href="images/items/testgallery/9.jpg"><img src="images/items/testgallery/thumbs/t9.jpg" class="image9"></a>
</li>
<li>
<a href="images/items/testgallery/10.jpg"><img src="images/items/testgallery/thumbs/t10.jpg" class="image10"></a>
</li>
<li>
<a href="images/items/testgallery/11.jpg"><img src="images/items/testgallery/thumbs/t11.jpg" class="image11"></a>
</li>
<li>
<a href="images/items/testgallery/12.jpg"><img src="images/items/testgallery/thumbs/t12.jpg" class="image12"></a>
</li>
<li>
<a href="images/items/testgallery/13.jpg"><img src="images/items/testgallery/thumbs/t13.jpg" class="image13"></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="right">
<p class="isocpeur">Pavilion<br>
2007, July</p>
<p class="isocpeur">LOCATION:<br>
Hortus Botanicus, Leiden, NL</p>
<p class="isocpeur">SUPERVISOR:<br>
B. Olsthoorn</p>
<p class="isocpeur"><a class="readmore" href="#vormstudie">> READ MORE</a></p>
</div>
<div class="text">
<h1>This is a header.</h1>
<p class="cambria">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pretium lectus eu ligula gravida eget facilisis dui hendrerit. Integer consectetur purus ut nisl pellentesque in faucibus metus lacinia. Phasellus venenatis vehicula neque, id vestibulum purus ullamcorper sagittis. Integer faucibus mauris id purus tempor suscipit. In malesuada, ante ut auctor malesuada, ligula turpis suscipit eros, ut blandit arcu eros tincidunt massa. Curabitur sollicitudin tellus quis magna condimentum eget sollicitudin nisl vulputate. Nam tempus scelerisque augue, et dignissim risus lacinia sit amet. Pellentesque vehicula, tortor id tempus semper, nunc nisi bibendum arcu, at convallis dui quam et diam. Aliquam mi arcu, lobortis non molestie ut, gravida gravida tellus. Vestibulum vestibulum lobortis eros, quis venenatis massa blandit in. Vestibulum congue velit et mi dignissim porttitor. Sed egestas laoreet volutpat. Donec nulla magna, scelerisque nec varius sit amet, facilisis a tortor. Nulla lorem massa, porta at imperdiet quis, facilisis non lectus. Nulla id diam vestibulum risus auctor pulvinar eu a lectus. Integer ac tellus in tellus iaculis convallis. Integer et arcu tempor ipsum varius auctor.</p>
<p class="cambria">Morbi quis dolor non elit aliquam convallis vel sed enim. Donec ornare gravida leo, vel egestas ipsum tincidunt lacinia. In eget ligula sed erat sodales dictum. Duis diam dui, porttitor at sagittis a, scelerisque non mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean vulputate nisl quis felis pellentesque eu cursus justo commodo. Vivamus urna mi, consequat et volutpat quis, suscipit quis nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, turpis id congue lobortis, lectus leo luctus nisi, a blandit enim elit vel nisi. In vel ante nisi, id consequat velit. Nam commodo, nisi non aliquet molestie, turpis sapien viverra tortor, id sollicitudin diam dolor nec orci. In hac habitasse platea dictumst. Donec massa turpis, facilisis ut aliquam eu, convallis nec dolor. Aliquam sit amet enim urna.</p>
<p class="cambria">Pellentesque eu ligula et arcu iaculis varius. Donec ornare sapien ut lacus volutpat faucibus. Sed ac ante est. Curabitur mattis mattis varius. Nunc et lacus quam, eget aliquam nisl. Ut velit nulla, porta id accumsan nec, fermentum sit amet leo. Nulla rutrum felis vitae metus gravida auctor. Maecenas tempus velit non leo porttitor volutpat vel et nunc. Aliquam eget erat nec turpis semper egestas id sed risus. Nulla et lectus orci. Maecenas viverra mauris rutrum sem ultricies auctor. Duis scelerisque, libero at pharetra ultrices, ligula urna lacinia sem, in dignissim tortor nulla quis massa. Phasellus lacus odio, fringilla at aliquet vel, varius congue arcu. Praesent cursus nisl a nunc pulvinar euismod. Praesent dignissim elit id nibh ornare iaculis at vel risus. Sed non metus et dui tincidunt convallis. </p>
</div>
</div>
</div>
<a href="contact.html" id="footer"><div id="footer"></div></a>
</body>
</html>
Ik heb nu de toggle functie in een click functie veranderd en wil dan dat hij ziet of die categorie aan of uit staat voordat hij een bepaalde functie uitvoerd, maar het werkt niet helemaal. De code ziet er nu zo uit:
[JS]
$("a.nav").click(
function() {
var category = $(this).attr("href");
if(currentCategories.indexOf(category) == -1) {
slideOut(category);
}
else {
slideIn(category);
}
}
);
[/JS]
Het uitschuiven gaat prima, maar inschuiven doet ie niet. Kan iemand ontdekken wat er fout gaat en hoe ik dit op kan lossen?
Ontzettend bedankt alvast!
Oh ja, en hier is een online (oudere) versie van de site, voor als totaal onduidelijk is wat ik bedoel: http://bkinfo.bk.tudelft.nl/portfolio/websites/mpelgrim/wk4.8_test8/