Forum - Bilder-Collagen

 
div.grid_2, div.grid_3  {
	float: left;
}
 
.pixelborder {border: 1px dotted lime;}
 
div.grid_2 img {
	width: 46%;
	margin:2% 2%;		
	}
 
div.grid_3 img {
	width: 30%;
	margin:1.5% 1.5%;		
	}
 

 

[div=grid_2 pixelborder |]
[url=https://files.homepagemodules.de/b915068/blog-8463-n6_lQKLfwhR.jpg][img]https://files.homepagemodules.de/b915068/resize/1920.  Vv x1200/blog-8463-n6_lQKLfwhR.jpg[/img][/url][url=https://files.homepagemodules.de/b915068 '8/blog-8463-n7_ItLFYTAB.jpg][img]https://files.homepagemodules.de/b915068/resize/1920x.  1200/blog-8463-n7_ItLFYTAB.jpg[/img][/url] 
 
[url=https://files.homepagemodules.de/b915068/blog-846.  3-n8_SxDUoEQe.jpg][img]https://files.homepagemodules.de/b915068/resize/.  1920x1200/blog-8463-n8_SxDUoEQe.jpg[/img][/url][url=https://files.homepagemodules.de/b915068/blog-8463-n9_. KTOhIVo.jpg][img]https://files.homepagemodules.de/b915068/resize/1.   920x1200/blog-8463-n9_aKTOhIVo.jpg[/img][/url]
[/div]
 
[div=grid_3 pixelborder| background-color: lightskyblue; ]
[url=https://files.homepagemodules.de/b915068/blog-8463-n6_lQKLfwhR.jpg][img]https://files.homepagemodules.de/b915068/resize/19.  20x1200/blog-8463-n6_lQKLfwhR.jpg[/img][/url][url=https://files.homepagemodules.de/b915068/blog-8463-n7_ItLFYTAB.jpg][img]https://files.homepagemodules.de/b915068/resize/1920.  x1200/blog-8463-n7_ItLFYTAB.jpg[/img][/url][url=https://files.homepagemodules.de/b915068/blog-8463-n8_SxDUoEQe.jpg][img]https://files.homepagemodules.de/b915068/resize/1920. Bbx1200/blog-8463-n8_SxDUoEQe.jpg[/img][/url]
[/div]
 

 

div.grid_2,div.grid_3  {
	float: left;
}
 
div.grid_2 img {
	width: 46%;
	margin:2% 2%;		
	}
 
div.grid_3 img {
	width: 30%;
	margin:1.5% 1.5%;		
	}
 
div.flex {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	}
 
div.flex.gap2 {
	gap: 2px;
	}
 
div.flex.gap10 {
	gap: 10px;
	}
 
div.img_rahmen3 img	{
	border: 3px outset;
	}
 
div.img_innen5 img	{
	padding:5px;
	}
 
div.img_width22 img {
	width: 22%;
	}
 
div.img_width30 img {
	width: 30%;
	}
 
div.img_width46 img {
	width: 46%;
	}
 

 

<div class="xob_icon_cont float-left " ><button id="but_dia1" type="button"
	title="Bilder-Collagen erzeugen">[div...</button>
</div>
 
<style>
/*	https://wiki.selfhtml.org/wiki/Infobox/modale_Dialogfenster
**	https://test-2022.xobor.de/t116f21317-Bilder-anordnen.html
*/
dialog:not([open]) {
  display: none;
}
 
dialog[open] { 
  width: 30em; 
	max-width: 80%;
  background: #fffbf0; 
  border: thin solid #e7c157;
  margin: 5em auto;
	padding: 1em;
}
dialog p{
  padding: 0.3em 1em;
	}
dialog p:hover{
  background:#eeebe0;
	}
 
dialog input[type=checkbox]{
  width:1.5em;
	}
 
dialog Button, #fs_dia1 {
  margin: 1em 1em;
	}
 
</style> 
 
<dialog id="div_dia1" closedby="any">
<fieldset	id="fs_dia1">
	<p>Gittermodus<br>
  <label><input name="gap" type="radio" value="flex gap2 " >flex gap2</label>
  <label><input name="gap" type="radio" value="flex " >flex gap5</label>
  <label><input name="gap" type="radio" value="flex gap10 " >flex gap10</label>
  <label><input name="gap" type="radio" checked value="grid2 " >grid2</label>
  <label><input name="gap" type="radio" value="grid3 " >grid3</label>
  <label><input name="gap" type="radio" value=" " >ohne class</label>
 
  </p><p>zusätzlich:<br>
  <label><input name="zusatz" type="checkbox" value="img_rahmen3 " >img Rahmen</label><br>
  <label><input name="zusatz" type="checkbox" value="img_innen5 " >img_innen Abstand</label><br>
 
  </p><p>Bildbreiten<br>
	<label><input name="img_width" type="radio" value="img_width22 " >img width 22%</label>
	<label><input name="img_width" type="radio" value="img_width30 " >img width 30%</label>
  <label><input name="img_width" type="radio" checked value="img_width46 " >img width 46%</label>
  <label><input name="img_width" type="radio" value=" " >ohne class</label>
  </p><p>
 
	<label>div style: <br><input name="div_style" type="text" value="" list="dia_style_opt" ></label>
	<datalist id="dia_style_opt">
		<option	value="background-color: lightskyblue; ">
		<option	value="background-color: beige; ">
		<option	value="background-image: linear-gradient(to right bottom, lightcyan, blue); ">
		<option	value="border: 5px outset; ">
		<option	value="padding: 5px; ">
		</datalist>
	</p>
        <p><button id="dia_ok">ok</button>
           <button id="dia_close">Abbrechen</button>
        </p>
</fieldset>
</dialog>
 
<script>  // 10.3.
window.addEventListener('DOMContentLoaded',function() {
 
	const x={
		but_id:"but_dia1"
		,dia_id:"div_dia1"
		,fs_id:"fs_dia1"
 
		}
	const dia=document.getElementById(x.dia_id);
	const but=document.getElementById(x.but_id);
	const fs=document.getElementById(x.fs_id);
 
	but.addEventListener("click", () => {
		dia.appendChild(fs);
    dia.showModal();
		});
 
	function dia_close(){
		dia.close();
		event.stopPropagation();
		dia.removeChild(fs);
		return	false;
		}	
			
 
document.getElementById("dia_close").addEventListener("click", dia_close);
 
document.getElementById("dia_ok").addEventListener("click", (ev) => {
 
		let frm=ev.target.form;
		let ele_val=function(nam){
			let ele=frm.elements[nam];
			let	v="";
			if (ele	&& ele.length && ele[0].type=="checkbox") {
				if (ele.length==1)	ele=[ele];
				for( let i=0;i<ele.length;i++){
					if(ele[i].checked) v+=ele[i].value;
					}
				}
			else if (ele)	v=ele.value
			else alert(`Element "${nam}" existiert nicht im Dialog`);
			return v;
			}
		let b=function(tag){return "["+tag+"]";}
 
		let d="div="
			+ele_val("gap")+ ele_val("img_width")+ ele_val("zusatz")
			+"| "+ele_val("div_style");
 
		xob_insert(	b(d)," "+b("/div")+b("clear") );
 
    return dia_close();
    });	//ok
 
    dia.removeChild(fs);
}); //
</script>