dynamische Galeriebildanzeige mit flexbox

This commit is contained in:
Torsten 2024-02-17 08:53:26 +01:00
parent ebd663e842
commit 5c9f1229d4

View file

@ -1,15 +1,16 @@
@extends('layouts.app') @extends('layouts.app')
@section('content') @section('content')
<div class="container text-center text-light mt-5"> <div class="container-fluid text-center text-light mt-5">
<h1>{{$tour_name}}</h1> <h1>{{$tour_name}}</h1>
<div class="container text-primary" style="display:flex"> <div class="col-12 text-primary d-flex">
<!-- <ul class="list-group offset-2 col-8" style="display:inline"> --> <ul class="list-group col-12" style="display:inline">
<ul class="list-group offset-2 col-8" style="display:flex; flex-direction: row;"> <!-- <ul class="list-group offsest-2 col-8" style="display:flex; flex-direction: row;"> -->
@foreach($imagelist as $img_tpl) <!-- 0=filename, 1=displayname --> @foreach($imagelist as $img_tpl) <!-- 0=filename, 1=displayname -->
<label style="display:flex; flex-direction: column;"> <!-- <label style="display:flex; flex-direction: column;"> -->
<label>
<a title="{{$img_tpl[1]}}" style="display: inline;" href="/img_storage/tour-{{$tour_id}}/{{$img_tpl[0]}}_gross.jpg" data-lightbox="/img_storage/tour-{{$tour_id}}/{{$img_tpl[0]}}_gross.jpg" data-title="{{$img_tpl[1]}}"> <a title="{{$img_tpl[1]}}" style="display: inline;" href="/img_storage/tour-{{$tour_id}}/{{$img_tpl[0]}}_gross.jpg" data-lightbox="/img_storage/tour-{{$tour_id}}/{{$img_tpl[0]}}_gross.jpg" data-title="{{$img_tpl[1]}}">
<img class="mt-3 ml-3" src="/img_storage/tour-{{$tour_id}}/{{$img_tpl[0]}}.jpg"> <img class="mt-3 ml-3" src="/img_storage/tour-{{$tour_id}}/{{$img_tpl[0]}}.jpg">
</a> </a>