PDA

View Full Version : smoothly appearing content



chechu
05-06-2017, 10:12 AM
Hey all,
On my website I have added this code for content to show up in a box when clicked on it.
But I would like the content to appear smoothly. This is the code I have so far. What needs to be added, please?


<script type="text/javascript">
$(function () {
$('.toggle').click(function (event) {
event.preventDefault();
var target = $(this).attr('href');
$(target).toggleClass('hidden show');
});
});
</script>

Thanks.

coothead
05-06-2017, 11:48 AM
Hi there chechu,


may we see the relevant HTML?

It is also quite possible that this task can be done with just CSS. ;)


coothead

Tabassum
05-06-2017, 11:55 AM
The code is actually right.
But if you want smooth functioning, you need to use animation CSS and while you're using this, you should not use Toggle function. Instead of Toggle, you can use hide or show function.

chechu
05-06-2017, 11:56 AM
Hey coothead,
This is what I added:

<a href="#info" class="toggle"><img src="img/info.png"></a>
<div id="info" class="hidden">
<p class="infobox">content</p>
</div>

.cover .hi .infobox {font-size:11px; background-color:#fff; border:1px solid #ccc; color:#444; line-height:1.8em; padding:10px; margin-top:5px; text-align:left;}

You can see in action here on the top left, and the button beneath the actor portfolio section: http://www.brunomazereel.com

I'm looking for something like this:

$('#toggle').on('click', function() {
img.fadeToggle();
});
But I have no idea how to make it work with the existing js.

coothead
05-06-2017, 01:13 PM
Hi there chechu,


I cannot help you with jQuery as I only know "Vanilla JavaScript". :D

But I can show you the CSS version...



<!DOCTYPE html>
<html lang="en">
<head>
<base href="http://www.brunomazereel.com/">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
body {
background-color: #333; /* just used for display purposes!! */
}
#cb {
position: absolute;
left: -999em;
}
label[for="cb"] {
cursor: pointer;
}
#info {
height: 0;
opacity: 0;
overflow: hidden;
transition: 1s ease-in-out;
}
#info p {
display: inline-block;
padding: 0.625em;
margin-top: 0.32em;
background-color: #fff;
border: 0.06em solid #ccc;
line-height: 1.8em;
font-size: 0.7em;
color: #444;
}
#info p a {
color: #444;
}
#cb:checked~#info {
height: 12em; /* this value is adjusable */
opacity: 1;
}
</style>

</head>
<body>

<div class="hi">
<span>
<a href="#overview" class="download-link hidden-xs"><img src="img/arrow_down.png"></a>
</span>

<input id="cb" type="checkbox">
<label for="cb"><img src="img/info.png" alt=""></label>

<div id="info">
<p>
» commercial Toerisme Limburg 2 (2017)<br>
» commercial Engie France (2017)<br>
» commercial Toerisme Limburg 1 (2017)<br>
» commercial Volkswagen (2016)<br>
» commercial CM (2016)<br>
» commercial Volkswagen (2016)<br><br>
<a href="#portfolio">» watch all commercials</a>
</p>
<!-- .hi --></div>
<!-- .hi --></div>

</body>
</html>



coothead

chechu
05-06-2017, 02:40 PM
That works perfectly, thanks!
I adjusted the top one, but now there is also another I was using here (http://www.brunomazereel.com/#portfolio), below the actor portfolio.
How do I adjust that? Always happy to be able to replace js by css ...

coothead
05-06-2017, 06:44 PM
Hi there chechu,


does this help...



<!DOCTYPE html>
<html lang="en">
<head>
<base href="http://www.brunomazereel.com/">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<link rel="stylesheet" href="http://www.brunomazereel.com/css/main.css">
<link rel="stylesheet" href="http://www.brunomazereel.com/portfolio/css/cubeportfolio.css">

<style media="screen">
#cb1 {
position: absolute;
left: -999em;
}
label[for="cb1"] {
cursor: pointer;
}
#updates {
height: 0;
opacity: 0;
overflow: hidden;
transition: 1s ease-in-out;
}
#cb1:checked~#updates {
height: 25em; /* this value is adjustable */
opacity: 1;
}
</style>

</head>
<body>

<div id="loadMore-container" class="cbp-l-loadMore-button hidden-xs">

<hr class="spacer">

<input id="cb1" type="checkbox">
<label for="cb1" class="btn btn-primary btn-lg download-link">
click here for updates chronologically, links to commercials<br>
and downloads of all pictures and links to commercials
</label>

<hr class="spacer">

<div id="updates">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#chrono">updates chronologically in 2017</a></li>
<li><a data-toggle="tab" href="#links">links to commercials and voice-overs</a></li>
<li><a data-toggle="tab" href="#download">downloads pictures and links to commercials</a></li>
</ul>

<div class="tab-content">

<div id="chrono" class="tab-pane fade in active">
<p style="text-align:left;">
<a href="http://www.youtube.com/watch?v=jwB1J8FL76s?&rel=0&showinfo=0" data-title="Toerisme Limburg 2 (2017): SBS, Medialaan (BE)" class="cbp-lightbox"><img src="portfolio/img/commercial_limburg2.jpg" title="commercial Limburg 2" class="imgupdates tool-tip" data-placement="top" alt="" ></a>
<a href="portfolio/work/torfs1.jpg" data-title="Torfs (2017)" class="cbp-lightbox"><img src="portfolio/work/torfs1.jpg" title="Torfs" class="imgupdates tool-tip" data-placement="top" alt=""></a>
<a href="portfolio/work/torfs2.jpg" data-title="Torfs (2017)" class="cbp-lightbox"><img src="portfolio/work/torfs2.jpg" title="Torfs" class="imgupdates tool-tip" data-placement="top" alt=""></a>
<a href="portfolio/work/torfs3.jpg" data-title="Torfs (2017)" class="cbp-lightbox"><img src="portfolio/work/torfs3.jpg" title="Torfs" class="imgupdates tool-tip" data-placement="top" alt=""></a>
<a href="portfolio/work/torfs4.jpg" data-title="Torfs (2017)" class="cbp-lightbox"><img src="portfolio/work/torfs4.jpg" title="Torfs" class="imgupdates tool-tip" data-placement="top" alt=""></a>
<a href="portfolio/work/fintro.jpg" data-title="Fintro (2017)" class="cbp-lightbox"><img src="portfolio/work/fintro.jpg" title="Fintro" class="imgupdates tool-tip" data-placement="top" alt=""></a>
<a href="http://www.youtube.com/watch?v=va4vTwOLlrc?&rel=0&showinfo=0" data-title="Engie France (2017)" class="cbp-lightbox"><img src="portfolio/img/commercial_engieFR.jpg" title="commercial Engie FR" class="imgupdates tool-tip" data-placement="top" alt=""></a>
<a href="portfolio/work/ams4.jpg" data-title="Antwerp Management School (2017)" class="cbp-lightbox"><img src="portfolio/work/ams4.jpg" title="Antwerp Management School" class="imgupdates tool-tip" data-placement="top" alt=""></a>
<a href="portfolio/work/ams2.jpg" data-title="Antwerp Management School (2017)" class="cbp-lightbox"><img src="portfolio/work/ams2.jpg" title="Antwerp Management School" class="imgupdates tool-tip" data-placement="top" alt=""></a>
<a href="portfolio/work/ams3.jpg" data-title="Antwerp Management School (2017)" class="cbp-lightbox"><img src="portfolio/work/ams3.jpg" title="Antwerp Management School" class="imgupdates tool-tip" data-placement="top" alt=""></a>
<a href="http://www.youtube.com/watch?v=9MKvqVTtzzc?&rel=0&showinfo=0" data-title="Toerisme Limburg 1 (2017): SBS, Medialaan (BE)" class="cbp-lightbox"><img src="portfolio/img/commercial_limburg1.jpg" title="commercial Limburg 1" class="imgupdates tool-tip" data-placement="top" alt=""></a>
<a href="portfolio/work/delhaize.jpg" data-title="Delhaize (2017)" class="cbp-lightbox"><img src="portfolio/work/delhaize.jpg" title="Delhaize" class="imgupdates tool-tip" data-placement="top" alt=""></a>
<a href="portfolio/work/Zgeneration.jpg" data-title="Z-Generation (2017)" class="cbp-lightbox"><img src="portfolio/work/Zgeneration.jpg" title="Z-Generation" class="imgupdates tool-tip" data-placement="top" alt=""></a>
<a href="portfolio/work/fme.jpg" data-title="Fresh Mushrooms Europe (2017)" class="cbp-lightbox"><img src="portfolio/work/fme.jpg" title="Fresh Mushrooms Europe" class="imgupdates tool-tip" data-placement="top" alt=""></a>
</p>
<!-- #chrono --></div>

<div id="links" class="tab-pane fade">

<div class="row">

<div class="col-lg-6">
<p style="text-align:left;margin-left:15px;">
<br><a href="http://www.youtube.com/watch?v=jwB1J8FL76s" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="Toerisme Limburg 2 (2017)" data-placement="top"></i> &nbsp;&nbsp; http://www.youtube.com/watch?v=jwB1J8FL76s
<br><a href="http://www.youtube.com/watch?v=va4vTwOLlrc" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="Engie FR (2017)" data-placement="top"></i> &nbsp;&nbsp; http://www.youtube.com/watch?v=va4vTwOLlrc
<br><a href="http://www.youtube.com/watch?v=9MKvqVTtzzc" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="Toerisme Limburg 1 (2017)" data-placement="top"></i> &nbsp;&nbsp; http://www.youtube.com/watch?v=9MKvqVTtzzc
<br><a href="http://www.youtube.com/watch?v=MAtwgOsycc0" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="Volkswagen 3 (2016)" data-placement="top"></i> &nbsp;&nbsp; http://www.youtube.com/watch?v=MAtwgOsycc0
<br><a href="http://www.youtube.com/watch?v=OFQgEAkZv8k" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="JBC (2016)" data-placement="top"></i> &nbsp;&nbsp; http://www.youtube.com/watch?v=OFQgEAkZv8k
<br><a href="http://www.youtube.com/watch?v=bVYHjVlXRgw" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="Engie BE (2016)" data-placement="top"></i> &nbsp;&nbsp; http://www.youtube.com/watch?v=bVYHjVlXRgw
<br><a href="http://www.youtube.com/watch?v=gjElHVZ4f14" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="Volkswagen 2 (2016)" data-placement="top"></i> &nbsp;&nbsp; http://www.youtube.com/watch?v=gjElHVZ4f14
<br><a href="http://www.youtube.com/watch?v=ELFdbTwJkJE" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="Volkswagen 1 (2016)" data-placement="top"></i> &nbsp;&nbsp; http://www.youtube.com/watch?v=ELFdbTwJkJE
<br><a href="http://www.youtube.com/watch?v=Sa0nGFmk7Ec" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="Bison (2016)" data-placement="top"></i> &nbsp;&nbsp; http://www.youtube.com/watch?v=Sa0nGFmk7Ec
<br><a href="http://www.youtube.com/watch?v=nvENEbvSMW4" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="CM (2016)" data-placement="top"></i> &nbsp;&nbsp; http://www.youtube.com/watch?v=nvENEbvSMW4
</p>
<!-- .col-lg-6 --></div>

<div class="col-lg-6">
<p style="text-align:left;margin-left:15px;">
<br><a href="http://www.youtube.com/watch?v=tuXjrcIGsWY" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="Krėfel (2016)" data-placement="top"></i> &nbsp;&nbsp; http://www.youtube.com/watch?v=tuXjrcIGsWY
<br><a href="http://vimeo.com/133641061" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="Skyline Europe (2016)" data-placement="top"></i> &nbsp;&nbsp; http://vimeo.com/133641061
<br><a href="http://www.youtube.com/watch?v=MVqAA9_7gR4" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="Peugeot tutorial (2015)" data-placement="top"></i> &nbsp;&nbsp; http://www.youtube.com/watch?v=MVqAA9_7gR4
<br><a href="http://www.youtube.com/watch?v=8MGYyB41lJ8" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="voice-over English (2016)" data-placement="top"></i> &nbsp;&nbsp; http://www.youtube.com/watch?v=8MGYyB41lJ8
<br><a href="http://www.youtube.com/watch?v=6uzW4hN_Yd0" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="Aoste voice-over Dutch (2016)" data-placement="top"></i> &nbsp;&nbsp; http://www.youtube.com/watch?v=6uzW4hN_Yd0
<br><a href="http://www.youtube.com/watch?v=RMVH-JfOacQ" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="Roompot (2015)" data-placement="top"></i> &nbsp;&nbsp; http://www.youtube.com/watch?v=RMVH-JfOacQ
<br><a href="http://www.youtube.com/watch?v=fjtfIBUzNQA" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="Tour Eiffel FR (2015)" data-placement="top"></i> &nbsp;&nbsp; http://www.youtube.com/watch?v=fjtfIBUzNQA
<br><a href="http://www.youtube.com/watch?v=rm8mHmxASAk" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="Bokrijk (2015)" data-placement="top"></i> &nbsp;&nbsp; http://www.youtube.com/watch?v=rm8mHmxASAk
<br><a href="http://www.youtube.com/watch?v=Ba3Y2Ov2NBE" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="Colruyt (2015)" data-placement="top"></i> &nbsp;&nbsp; http://www.youtube.com/watch?v=Ba3Y2Ov2NBE
<br><a href="http://www.youtube.com/watch?v=KZQPkOE2PvI" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="Dats24 (2015)" data-placement="top"></i> &nbsp;&nbsp; http://www.youtube.com/watch?v=KZQPkOE2PvI
</p>
<!-- .col-lg-6 --></div>

<!-- .row --></div>
<!-- #links --></div>

<div id="download" class="tab-pane fade">
<form method="get" action="img/photos_BrunoMazereel.zip" style="float:left;margin-left:15px;">
<button type="submit" class="btn btn-primary btn-lg download-link"><i class="fa fa-folder-open-o" aria-hidden="true"></i> &nbsp; click here to download all pictures (.zip)</button>
</form>
<form method="get" action="img/commercials_BrunoMazereel.zip" style="float:left;margin-left:15px;">
<button type="submit" class="btn btn-primary btn-lg download-link"><i class="fa fa-folder-open-o" aria-hidden="true"></i> &nbsp; click here to download all links to commercials and voice-overs (.zip)</button>
</form>
<!-- #download--></div>

<!-- .tab-content --></div>
<!-- #updates --></div>
<!-- #loadMore-container --></div>


<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://www.brunomazereel.com/js/vendor/bootstrap.js"></script>

</body>
</html>

Note:-

This...


<base href="http://www.brunomazereel.com/">
...and various instances of...


http://www.brunomazereel.com/
...were added for testing purposes only.

I have also corrected and validated the HTML. ;)

Your page has numerous errors...

https://validator.w3.org/nu/?doc=http%3A%2F%2Fwww.brunomazereel.com%2F
...which need your attention :eek:



coothead

chechu
05-06-2017, 11:42 PM
That's some really great stuff what you did there, thanks.
Just one issue: if you check the site on smaller devices than laptop, not the whole content of the tabs is shown (see below). I guess that's because here you set a fixed height:

#cb1:checked~#updates {height: 25em; opacity: 1;}
How to fix that so that the height will always be at least the height of the tab with the most content, please?
6167

coothead
05-07-2017, 09:43 AM
Hi there chechu,


Sorry about that, I forgot to make the code responsive. :eek:

Add these media queries...



@media screen and (max-width:75em){
#cb1:checked~#updates {
height: 40em;
}
}

@media screen and (max-width:62em){
#cb1:checked~#updates {
height: 50em;
}
}

...to your "theme.css" file. ;)



coothead

chechu
05-07-2017, 09:49 AM
Thanks for that.
But is it not possible not to work with fixed height? I don't mind if the content underneath moves according to the amount of content in the tabs.

coothead
05-07-2017, 10:27 AM
Hi there chechu,


You need to bear in mind that you have chosen to use
frameworks for your site rather than bespoke coding.

If I did not have to fight "Bootstrap" then I would have
just coded it like this...



#updates {
max-height: 0;
opacity: 0;
overflow: hidden;
transition: 1s ease-in-out;
}
#cb1:checked~#updates {
max-height: 100%;
opacity: 1;
}


...job done.

The only way to bypass "Bootstrap's" control in this case,
is to use the media queries that I have suggested.


coothead

chechu
05-07-2017, 10:43 AM
No need for fighting, you overrode Bootstrap :-)
Just added your code to my css file and it seems to work fine. If you could check from your side, please?

coothead
05-07-2017, 10:58 AM
Hi there chechu,


yes, that is working OK. :D


coothead

chechu
05-07-2017, 11:14 AM
When hovering over the info icon on the "links" section (second tab), the hover text of the links in the left column doesn't appear entirely.
Is that a pdding-margin issue?

EDIT: no worries, I'll make the tooltip appear on the right instead of top.
Thanks for your help!

chechu
05-09-2017, 04:33 PM
How to create the same effect in css, but with the title disappearing when clicked upon and having the content moving up to where the title was.
Is that possible?

coothead
05-09-2017, 08:15 PM
Hi there chechu,


something like this perhaps...



<!DOCTYPE html>
<html lang="en">
<head>
<base href="http://www.brunomazereel.com/">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<link rel="stylesheet" href="http://www.brunomazereel.com/css/main.css">
<link rel="stylesheet" href="http://www.brunomazereel.com/portfolio/css/cubeportfolio.css">

<style media="screen">
#cb1 {
position: absolute;
left: -999em;
}
label[for="cb1"] {
opacity: 1;
cursor: pointer;
transition: 0.4s 0.25s ease-in-out;
}
#updates {
max-height: 0;
opacity: 0;
overflow: hidden;
transition: 1s ease-in-out;
}
#cb1:checked~#updates {
max-height: 100%;
margin-top: -9.5em;
opacity: 1;
}
#cb1:checked~label[for="cb1"] {
opacity: 0;
}
.nav li label {
position: relative;
display: block;
padding: 0.625em 0.9375em;
margin-left: 0.5em;
border: 0.0625em solid #999;
border-radius: 0.5em;
background-color: #eee;
font-weight: normal;
color: #393939;
}
</style>

</head>
<body>

<div id="loadMore-container" class="cbp-l-loadMore-button hidden-xs">

<hr class="spacer">

<input id="cb1" type="radio" name="r">
<input id="cb2" type="radio" name="r">

<label for="cb1" class="btn btn-primary btn-lg download-link">
click here for updates chronologically, links to commercials<br>
and downloads of all pictures and links to commercials
</label>

<hr class="spacer">

<div id="updates">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#chrono">updates chronologically in 2017</a></li>
<li><a data-toggle="tab" href="#links">links to commercials and voice-overs</a></li>
<li><a data-toggle="tab" href="#download">downloads pictures and links to commercials</a></li>
<li><label for="cb2">close updates</label></li>
</ul>

<div class="tab-content">

<div id="chrono" class="tab-pane fade in active">
<p style="text-align:left;">
<a href="http://www.youtube.com/watch?v=jwB1J8FL76s?&rel=0&showinfo=0" data-title="Toerisme Limburg 2 (2017): SBS, Medialaan (BE)" class="cbp-lightbox"><img src="portfolio/img/commercial_limburg2.jpg" title="commercial Limburg 2" class="imgupdates tool-tip" data-placement="top" alt="" ></a>
<a href="portfolio/work/torfs1.jpg" data-title="Torfs (2017)" class="cbp-lightbox"><img src="portfolio/work/torfs1.jpg" title="Torfs" class="imgupdates tool-tip" data-placement="top" alt=""></a>
<a href="portfolio/work/torfs2.jpg" data-title="Torfs (2017)" class="cbp-lightbox"><img src="portfolio/work/torfs2.jpg" title="Torfs" class="imgupdates tool-tip" data-placement="top" alt=""></a>
<a href="portfolio/work/torfs3.jpg" data-title="Torfs (2017)" class="cbp-lightbox"><img src="portfolio/work/torfs3.jpg" title="Torfs" class="imgupdates tool-tip" data-placement="top" alt=""></a>
<a href="portfolio/work/torfs4.jpg" data-title="Torfs (2017)" class="cbp-lightbox"><img src="portfolio/work/torfs4.jpg" title="Torfs" class="imgupdates tool-tip" data-placement="top" alt=""></a>
<a href="portfolio/work/fintro.jpg" data-title="Fintro (2017)" class="cbp-lightbox"><img src="portfolio/work/fintro.jpg" title="Fintro" class="imgupdates tool-tip" data-placement="top" alt=""></a>
<a href="http://www.youtube.com/watch?v=va4vTwOLlrc?&rel=0&showinfo=0" data-title="Engie France (2017)" class="cbp-lightbox"><img src="portfolio/img/commercial_engieFR.jpg" title="commercial Engie FR" class="imgupdates tool-tip" data-placement="top" alt=""></a>
<a href="portfolio/work/ams4.jpg" data-title="Antwerp Management School (2017)" class="cbp-lightbox"><img src="portfolio/work/ams4.jpg" title="Antwerp Management School" class="imgupdates tool-tip" data-placement="top" alt=""></a>
<a href="portfolio/work/ams2.jpg" data-title="Antwerp Management School (2017)" class="cbp-lightbox"><img src="portfolio/work/ams2.jpg" title="Antwerp Management School" class="imgupdates tool-tip" data-placement="top" alt=""></a>
<a href="portfolio/work/ams3.jpg" data-title="Antwerp Management School (2017)" class="cbp-lightbox"><img src="portfolio/work/ams3.jpg" title="Antwerp Management School" class="imgupdates tool-tip" data-placement="top" alt=""></a>
<a href="http://www.youtube.com/watch?v=9MKvqVTtzzc?&rel=0&showinfo=0" data-title="Toerisme Limburg 1 (2017): SBS, Medialaan (BE)" class="cbp-lightbox"><img src="portfolio/img/commercial_limburg1.jpg" title="commercial Limburg 1" class="imgupdates tool-tip" data-placement="top" alt=""></a>
<a href="portfolio/work/delhaize.jpg" data-title="Delhaize (2017)" class="cbp-lightbox"><img src="portfolio/work/delhaize.jpg" title="Delhaize" class="imgupdates tool-tip" data-placement="top" alt=""></a>
<a href="portfolio/work/Zgeneration.jpg" data-title="Z-Generation (2017)" class="cbp-lightbox"><img src="portfolio/work/Zgeneration.jpg" title="Z-Generation" class="imgupdates tool-tip" data-placement="top" alt=""></a>
<a href="portfolio/work/fme.jpg" data-title="Fresh Mushrooms Europe (2017)" class="cbp-lightbox"><img src="portfolio/work/fme.jpg" title="Fresh Mushrooms Europe" class="imgupdates tool-tip" data-placement="top" alt=""></a>
</p>
<!-- #chrono --></div>

<div id="links" class="tab-pane fade">

<div class="row">

<div class="col-lg-6">
<p style="text-align:left;margin-left:15px;">
<br><a href="http://www.youtube.com/watch?v=jwB1J8FL76s" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="Toerisme Limburg 2 (2017)" data-placement="top"></i> &nbsp;&nbsp; http://www.youtube.com/watch?v=jwB1J8FL76s
<br><a href="http://www.youtube.com/watch?v=va4vTwOLlrc" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="Engie FR (2017)" data-placement="top"></i> &nbsp;&nbsp; http://www.youtube.com/watch?v=va4vTwOLlrc
<br><a href="http://www.youtube.com/watch?v=9MKvqVTtzzc" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="Toerisme Limburg 1 (2017)" data-placement="top"></i> &nbsp;&nbsp; http://www.youtube.com/watch?v=9MKvqVTtzzc
<br><a href="http://www.youtube.com/watch?v=MAtwgOsycc0" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="Volkswagen 3 (2016)" data-placement="top"></i> &nbsp;&nbsp; http://www.youtube.com/watch?v=MAtwgOsycc0
<br><a href="http://www.youtube.com/watch?v=OFQgEAkZv8k" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="JBC (2016)" data-placement="top"></i> &nbsp;&nbsp; http://www.youtube.com/watch?v=OFQgEAkZv8k
<br><a href="http://www.youtube.com/watch?v=bVYHjVlXRgw" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="Engie BE (2016)" data-placement="top"></i> &nbsp;&nbsp; http://www.youtube.com/watch?v=bVYHjVlXRgw
<br><a href="http://www.youtube.com/watch?v=gjElHVZ4f14" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="Volkswagen 2 (2016)" data-placement="top"></i> &nbsp;&nbsp; http://www.youtube.com/watch?v=gjElHVZ4f14
<br><a href="http://www.youtube.com/watch?v=ELFdbTwJkJE" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="Volkswagen 1 (2016)" data-placement="top"></i> &nbsp;&nbsp; http://www.youtube.com/watch?v=ELFdbTwJkJE
<br><a href="http://www.youtube.com/watch?v=Sa0nGFmk7Ec" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="Bison (2016)" data-placement="top"></i> &nbsp;&nbsp; http://www.youtube.com/watch?v=Sa0nGFmk7Ec
<br><a href="http://www.youtube.com/watch?v=nvENEbvSMW4" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="CM (2016)" data-placement="top"></i> &nbsp;&nbsp; http://www.youtube.com/watch?v=nvENEbvSMW4
</p>
<!-- .col-lg-6 --></div>

<div class="col-lg-6">
<p style="text-align:left;margin-left:15px;">
<br><a href="http://www.youtube.com/watch?v=tuXjrcIGsWY" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="Krėfel (2016)" data-placement="top"></i> &nbsp;&nbsp; http://www.youtube.com/watch?v=tuXjrcIGsWY
<br><a href="http://vimeo.com/133641061" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="Skyline Europe (2016)" data-placement="top"></i> &nbsp;&nbsp; http://vimeo.com/133641061
<br><a href="http://www.youtube.com/watch?v=MVqAA9_7gR4" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="Peugeot tutorial (2015)" data-placement="top"></i> &nbsp;&nbsp; http://www.youtube.com/watch?v=MVqAA9_7gR4
<br><a href="http://www.youtube.com/watch?v=8MGYyB41lJ8" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="voice-over English (2016)" data-placement="top"></i> &nbsp;&nbsp; http://www.youtube.com/watch?v=8MGYyB41lJ8
<br><a href="http://www.youtube.com/watch?v=6uzW4hN_Yd0" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="Aoste voice-over Dutch (2016)" data-placement="top"></i> &nbsp;&nbsp; http://www.youtube.com/watch?v=6uzW4hN_Yd0
<br><a href="http://www.youtube.com/watch?v=RMVH-JfOacQ" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="Roompot (2015)" data-placement="top"></i> &nbsp;&nbsp; http://www.youtube.com/watch?v=RMVH-JfOacQ
<br><a href="http://www.youtube.com/watch?v=fjtfIBUzNQA" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="Tour Eiffel FR (2015)" data-placement="top"></i> &nbsp;&nbsp; http://www.youtube.com/watch?v=fjtfIBUzNQA
<br><a href="http://www.youtube.com/watch?v=rm8mHmxASAk" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="Bokrijk (2015)" data-placement="top"></i> &nbsp;&nbsp; http://www.youtube.com/watch?v=rm8mHmxASAk
<br><a href="http://www.youtube.com/watch?v=Ba3Y2Ov2NBE" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="Colruyt (2015)" data-placement="top"></i> &nbsp;&nbsp; http://www.youtube.com/watch?v=Ba3Y2Ov2NBE
<br><a href="http://www.youtube.com/watch?v=KZQPkOE2PvI" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a> &nbsp; <i class="fa fa-info-circle tool-tip" aria-hidden="true" title="Dats24 (2015)" data-placement="top"></i> &nbsp;&nbsp; http://www.youtube.com/watch?v=KZQPkOE2PvI
</p>
<!-- .col-lg-6 --></div>

<!-- .row --></div>
<!-- #links --></div>

<div id="download" class="tab-pane fade">
<form method="get" action="img/photos_BrunoMazereel.zip" style="float:left;margin-left:15px;">
<button type="submit" class="btn btn-primary btn-lg download-link"><i class="fa fa-folder-open-o" aria-hidden="true"></i> &nbsp; click here to download all pictures (.zip)</button>
</form>
<form method="get" action="img/commercials_BrunoMazereel.zip" style="float:left;margin-left:15px;">
<button type="submit" class="btn btn-primary btn-lg download-link"><i class="fa fa-folder-open-o" aria-hidden="true"></i> &nbsp; click here to download all links to commercials and voice-overs (.zip)</button>
</form>
<!-- #download--></div>

<!-- .tab-content --></div>
<!-- #updates --></div>
<!-- #loadMore-container --></div>


<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://www.brunomazereel.com/js/vendor/bootstrap.js"></script>

</body>
</html>



coothead

chechu
05-09-2017, 08:42 PM
Cool stuff, Coothead!
Thanks!