Simplification fenetres modales
This commit is contained in:
parent
83bd656a91
commit
a804c6caa8
GPG Key ID:
F85D93686A3A9063
130
index.html
130
index.html
|
|
@ -100,32 +100,32 @@
|
|||
|
||||
<section id="portfolio">
|
||||
<div class="d-flex flex-wrap">
|
||||
<div class="element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#youtubeModal" data-youtubeid="xy4rGshm9us" data-options="autoplay=1&loop=1&playlist=xy4rGshm9us">
|
||||
<div class="element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#iframeModal" data-youtubeid="xy4rGshm9us" data-options="autoplay=1&loop=1&playlist=xy4rGshm9us">
|
||||
<video loop muted poster="img/portfolio/city.jpg">
|
||||
<source src="video/portfolio/ci.webm" type="video/webm">
|
||||
</video>
|
||||
</div>
|
||||
<div class="element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#youtubeModal" data-youtubeid="RV0M18MpDtQ" data-comment="Film de fin d'étude en licence Professionelle à L'ESAV Castres. La fin devait être différente mais suite à un cambriolage se déroulant une semaine avant mes soutenances, j'ai perdu la partie finale de mon projet et dû faire une fin alternative en trois jours.">
|
||||
<div class="element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#iframeModal" data-youtubeid="RV0M18MpDtQ" data-comment="Film de fin d'étude en licence Professionelle à L'ESAV Castres. La fin devait être différente mais suite à un cambriolage se déroulant une semaine avant mes soutenances, j'ai perdu la partie finale de mon projet et dû faire une fin alternative en trois jours.">
|
||||
<video loop muted poster="img/portfolio/roy.jpg">
|
||||
<source src="video/portfolio/roy.webm" type="video/webm">
|
||||
</video>
|
||||
</div>
|
||||
<div class="element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#youtubeModal" data-youtubeid="32j58XJLHnE" data-options="autoplay=1&loop=1&playlist=32j58XJLHnE" data-comment="Début du court-métrage Mushroom Dreams.">
|
||||
<div class="element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#iframeModal" data-youtubeid="32j58XJLHnE" data-options="autoplay=1&loop=1&playlist=32j58XJLHnE" data-comment="Début du court-métrage Mushroom Dreams.">
|
||||
<video loop muted poster="img/portfolio/champi.jpg">
|
||||
<source src="video/portfolio/champi.webm" type="video/webm">
|
||||
</video>
|
||||
</div>
|
||||
<div class="element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#vimeoModal" data-vimeoid="194362062" data-comment="Clip Vidéo réagissant au rythme de la musique.">
|
||||
<div class="element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#iframeModal" data-vimeoid="194362062" data-comment="Clip Vidéo réagissant au rythme de la musique.">
|
||||
<video loop muted poster="img/portfolio/vector.jpg">
|
||||
<source src="video/portfolio/music.webm" type="video/webm">
|
||||
</video>
|
||||
</div>
|
||||
<div class="element-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#sketchFabModal" data-sketchfabid="7507e61126754169937a24858981b185">
|
||||
<div class="element-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#iframeModal" data-sketchfabid="7507e61126754169937a24858981b185">
|
||||
<div class="portfolio-container">
|
||||
<img src="img/portfolio/Metal Carrot1.jpg" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#vimeoModal" data-vimeoid="202941724" data-comment="Tableau de Santiago Rusiñol y Prat que j'ai animé avec Clémentine Mériadec pour une diffusion au musée GOYA de Castres.">
|
||||
<div class="element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#iframeModal" data-vimeoid="202941724" data-comment="Tableau de Santiago Rusiñol y Prat que j'ai animé avec Clémentine Mériadec pour une diffusion au musée GOYA de Castres.">
|
||||
<video loop muted poster="img/portfolio/jar.jpg">
|
||||
<source src="video/portfolio/jar.webm" type="video/webm">
|
||||
</video>
|
||||
|
|
@ -135,7 +135,7 @@
|
|||
<source src="video/portfolio/1.webm" type="video/webm">
|
||||
</video>
|
||||
</div>
|
||||
<div class="element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#vimeoModal" data-vimeoid="195989917" data-comment="Générique d'un film fantôme réalisé dans le cadre d'une rencontre avec les GOBELINS, j'ai également pu composer la musique.">
|
||||
<div class="element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#iframeModal" data-vimeoid="195989917" data-comment="Générique d'un film fantôme réalisé dans le cadre d'une rencontre avec les GOBELINS, j'ai également pu composer la musique.">
|
||||
<video loop muted poster="img/portfolio/pomp.jpg">
|
||||
<source src="video/portfolio/pomp.webm" type="video/webm">
|
||||
</video>
|
||||
|
|
@ -183,7 +183,7 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<div class="modal fade" id="youtubeModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
||||
<div class="modal fade" id="iframeModal" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
|
|
@ -193,45 +193,7 @@
|
|||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="embed-responsive embed-responsive-16by9">
|
||||
<iframe class="embed-responsive-item" src="" allowfullscreen></iframe>
|
||||
</div>
|
||||
<div class="modal-comment">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="vimeoModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="embed-responsive embed-responsive-16by9">
|
||||
<iframe class="embed-responsive-item" src="" allowfullscreen></iframe>
|
||||
</div>
|
||||
<div class="modal-comment">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="sketchFabModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="embed-responsive embed-responsive-16by9">
|
||||
<iframe allowvr allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" onmousewheel=""></iframe>
|
||||
<iframe class="embed-responsive-item" src=""></iframe>
|
||||
</div>
|
||||
<div class="modal-comment">
|
||||
</div>
|
||||
|
|
@ -315,63 +277,63 @@
|
|||
|
||||
var comment_header = "<hr><p>"
|
||||
|
||||
$('#youtubeModal').on('show.bs.modal', function (event) {
|
||||
masthead_video_mute(true);
|
||||
$('#iframeModal').on('show.bs.modal', function (event) {
|
||||
var modal = $(this);
|
||||
var button = $(event.relatedTarget);
|
||||
var iframe = modal.find('.modal-body iframe')[0];
|
||||
|
||||
var youtube_id = button.data('youtubeid');
|
||||
var vimeo_id = button.data('vimeoid');
|
||||
var sketchfab_id = button.data('sketchfabid');
|
||||
|
||||
var comment = button.data('comment');
|
||||
var options = button.data('options');
|
||||
var modal = $(this);
|
||||
|
||||
var youtube_url = 'https://www.youtube.com/embed/' + youtube_id + "?modestbranding=1&rel=0&html5=1"
|
||||
var url = "";
|
||||
|
||||
if (youtube_id) {
|
||||
|
||||
masthead_video_mute(true);
|
||||
|
||||
url = 'https://www.youtube.com/embed/' + youtube_id + "?modestbranding=1&rel=0&html5=1";
|
||||
|
||||
if (options) {
|
||||
youtube_url += '&' + options;
|
||||
url += '&' + options;
|
||||
}
|
||||
|
||||
modal.find('.modal-body iframe')[0].src = youtube_url;
|
||||
iframe.setAttribute("allowfullscreen", "");
|
||||
iframe.src = url;
|
||||
|
||||
if (comment) {
|
||||
modal.find('.modal-body .modal-comment')[0].innerHTML = comment_header + comment + '</p>';
|
||||
}
|
||||
});
|
||||
$('#youtubeModal').on('hidden.bs.modal', function () {
|
||||
$(this).find('.modal-body iframe')[0].src = "";
|
||||
$(this).find('.modal-body p')[0].innerHTML = "";
|
||||
});
|
||||
} else if (vimeo_id) {
|
||||
|
||||
$('#vimeoModal').on('show.bs.modal', function (event) {
|
||||
masthead_video_mute(true);
|
||||
var button = $(event.relatedTarget);
|
||||
var vimeo_id = button.data('vimeoid');
|
||||
var comment = button.data('comment');
|
||||
var modal = $(this);
|
||||
modal.find('.modal-body iframe')[0].src = 'https://player.vimeo.com/video/' + vimeo_id;
|
||||
|
||||
url = 'https://player.vimeo.com/video/' + vimeo_id;
|
||||
|
||||
iframe.setAttribute("allowfullscreen", "");
|
||||
iframe.src = url;
|
||||
|
||||
} else if (sketchfab_id) {
|
||||
|
||||
url = 'https://sketchfab.com/models/' + sketchfab_id + '/embed?autostart=1';
|
||||
|
||||
iframe.setAttribute("allowfullscreen", "");
|
||||
iframe.setAttribute("allowvr", "");
|
||||
iframe.setAttribute("onmousewheel", "");
|
||||
iframe.src = url;
|
||||
|
||||
}
|
||||
|
||||
if (comment) {
|
||||
modal.find('.modal-body .modal-comment')[0].innerHTML = comment_header + comment + '</p>';
|
||||
}
|
||||
});
|
||||
$('#vimeoModal').on('hidden.bs.modal', function () {
|
||||
|
||||
$('#iframeModal').on('hidden.bs.modal', function () {
|
||||
$(this).find('.modal-body iframe')[0].src = "";
|
||||
$(this).find('.modal-body p')[0].innerHTML = "";
|
||||
$(this).find('.modal-body .modal-comment')[0].innerHTML = "";
|
||||
});
|
||||
|
||||
$('#sketchFabModal').on('show.bs.modal', function (event) {
|
||||
var button = $(event.relatedTarget);
|
||||
var sketchfab_id = button.data('sketchfabid');
|
||||
var comment = button.data('comment');
|
||||
var modal = $(this);
|
||||
modal.find('.modal-body iframe')[0].src = 'https://sketchfab.com/models/' + sketchfab_id + '/embed?autostart=1';
|
||||
|
||||
if (comment) {
|
||||
modal.find('.modal-body .modal-comment')[0].innerHTML = comment_header + comment + '</p>';
|
||||
}
|
||||
});
|
||||
$('#sketchFabModal').on('hidden.bs.modal', function () {
|
||||
$(this).find('.modal-body iframe')[0].src = "";
|
||||
$(this).find('.modal-body p')[0].innerHTML = "";
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
|
|
|||
Loading…
Reference in New Issue