142 lines
5.6 KiB
HTML
142 lines
5.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
<title>iFrame</title>
|
|
<link rel='stylesheet' href='css/lc_lightbox.min.css' />
|
|
<link rel='stylesheet' href='css/open_close_fx.css' />
|
|
<link rel='stylesheet' href='css/minimal.css' />
|
|
|
|
<style>
|
|
.map-responsive{
|
|
overflow:hidden;
|
|
padding-bottom:56.25%;
|
|
position:relative;
|
|
height:0;
|
|
}
|
|
.map-responsive iframe{
|
|
left:0;
|
|
top:0;
|
|
height:100%;
|
|
width:100%;
|
|
position:absolute;
|
|
}
|
|
</style>
|
|
|
|
<script src='https://code.jquery.com/jquery-3.2.1.min.js'></script>
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<h3>iFrame</h3>
|
|
|
|
<iframe width="600" height="500" id="gmap_canvas" src="https://maps.google.com/maps?q=46.61211515,5.8780727&t=&z=9&ie=UTF8&iwloc=&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" allow="fullscreen"></iframe>
|
|
|
|
<!--
|
|
# Feature-Policy
|
|
<IfModule mod_headers.c>
|
|
Header set Feature-Policy "geolocation 'self'; vibrate 'none'"
|
|
</IfModule>
|
|
-->
|
|
|
|
<br />
|
|
<h3>LC Lightbox</h3>
|
|
|
|
<div class="cadre" id="lcl_month">
|
|
<a href ="https://maps.google.com/maps?q=46.61211515,5.8780727&t=&z=9&ie=UTF8&iwloc=&output=embed" title="Google Maps Iframe" data-lcl-txt="LC Lightbox can handle any iframe:<br/> for example you can also display websites and Google Documents <em>(then Word docs, PDFs, etc)</em>" data-lcl-author="@sur-le-sentier.fr">GoogleMaps @ LC Lightbox</a>
|
|
</div>
|
|
|
|
|
|
<script type='text/javascript'>
|
|
$(document).ready(function() {
|
|
var $obj = lc_lightbox('#lcl_gallery a', {
|
|
img_zoom : true,
|
|
open_close_time : 200, // durée de l'animation pour l'ouverture et la fermeture de la lightbox
|
|
ol_time_diff : 100, // animation de superposition avance (à l'ouverture) et retard (à la fermeture) à la fenêtre
|
|
fading_time : 50, // durée de l'animation de fondu des éléments
|
|
slideshow_time : 4000, // durée de l'intervalle du diaporama
|
|
animation_time : 100,
|
|
counter : false, // s'il faut afficher le compteur d'éléments
|
|
progressbar : false, // s'il faut afficher une barre de progression lors de l'exécution du diaporama
|
|
max_width : '95%', // largeur maximale de la lightbox
|
|
max_height : '95%', // hauteur maximale de la lightbox
|
|
wrap_class : 'lcl_fade_oc', // Classes personnalisées ajoutées au wrapper: effet à l'ouverture de la lb (lcl_fade_oc | lcl_zoomin_oc | lcl_rtl_oc)
|
|
skin : 'minimal', // minimal | light | dark
|
|
data_position : 'over', // Spécifie où les données des éléments seront affichées. Les modes disponibles sont :over, under|rside|lside
|
|
cmd_position : 'inner', // Déclare où les commandes doivent être affichées : inner|outer
|
|
nav_btn_pos : 'normal', // Régle les flèches et la position de lecture/pause. Options disponibles: normal|middle
|
|
show_title : true, // s'il faut afficher les titres
|
|
show_descr : true, // s'il faut afficher les descriptions
|
|
show_author : true, // s'il faut afficher les auteurs
|
|
thumbs_nav : false, // permet la navigation par vignettes (nécessite des éléments affiche ou images)
|
|
fullscreen : true, // Autoriser ou non le mode plein écran
|
|
fs_img_behavior : 'smart', //Comportement de l'image en plein écran : fit|fill|smart
|
|
fs_only : 500, // s'il faut utiliser uniquement l'ouverture de la lightbox en mode plein écran (utile pour les appareils mobiles) : false | (integer)
|
|
browser_fs_mode : true, // utiliser ou non le mode plein écran du navigateur
|
|
txt_toggle_cmd : true, // s'il faut afficher le bouton de basculement du texte de l'élément
|
|
download : true, // whether to show element's file download button
|
|
touchswipe : true, // permet les interactions tactiles (nécessite AlloyFinger)
|
|
rclick_prevent : true, // s'il faut éviter le clic droit sur les éléments de la lightbox
|
|
});
|
|
|
|
var $obj2 = lc_lightbox('#lcl_month a', {
|
|
img_zoom : true,
|
|
open_close_time : 100,
|
|
ol_time_diff : 100,
|
|
max_width : '65%',
|
|
max_height : '65%',
|
|
wrap_class : 'lcl_zoomin_oc',
|
|
skin : 'minimal',
|
|
data_position : 'rside',
|
|
cmd_position : 'inner',
|
|
show_title : true,
|
|
show_descr : true,
|
|
show_author : true,
|
|
fullscreen : true,
|
|
fs_img_behavior : 'smart',
|
|
browser_fs_mode : false,
|
|
touchswipe : true,
|
|
rclick_prevent : true,
|
|
});
|
|
|
|
});
|
|
</script>
|
|
|
|
|
|
<!-- https://www.labnol.org/internet/embed-responsive-google-maps/28333/ -->
|
|
<script>
|
|
/*
|
|
var iframe = document.createElement("iframe");
|
|
iframe.onload = function() {
|
|
var doc = iframe.contentDocument;
|
|
|
|
iframe.contentWindow.showNewMap = function() {
|
|
var mapContainer = doc.createElement('div');
|
|
mapContainer.setAttribute('style',"width: 500px; height: 300px");
|
|
doc.body.appendChild(mapContainer);
|
|
|
|
var mapOptions = {
|
|
center: new this.google.maps.LatLng(-35.000009, -58.197645),
|
|
zoom: 5,
|
|
mapTypeId: this.google.maps.MapTypeId.ROADMAP
|
|
}
|
|
|
|
var map = new this.google.maps.Map(mapContainer,mapOptions);
|
|
}
|
|
|
|
var script = document.createElement('script');
|
|
script.type = 'text/javascript';
|
|
script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&key=AIzaSyBhi566YKgkoys4UAInAeNkU1pkz4JU9I8&' + 'callback=showNewMap';
|
|
iframe.contentDocument.getElementsByTagName('head')[0].appendChild(script);
|
|
};
|
|
document.body.appendChild(iframe);
|
|
*/
|
|
</script>
|
|
|
|
<script src='js/lc_lightbox.min.js'></script>
|
|
<script src='js/alloy_finger.min.js'></script>
|
|
|
|
</body>
|
|
</html> |