//img.homepagemodules.de/ds/static/gaia/picture.png
 

Reihenfolge: 0
 

[image_slid={{height}}]
 

 ... 
 

[/image_slid]
 

<div style="height: {{height}}" class="mySlides">
 

 ... 
 

</div>
 

[image_slides={{height}}={{dat}}]
 

 ... 
 

[/image_slides]
 

<div style="height: {{height}}" class="mySlides" data="<center><dl><dd>{{dat}}</dd></dl></center>">
 

 ... 
 

<dl><dd>{{dat}}</dd></dl></div>
 

[slideshow={{breite}}]
 

 ... 
 

[/slideshow]
 

<div class="slideshow-container" style="display:none; width:{{breite}}">
 

 ... 
 

<p class="prev"><img title="Zurück" src="//files.homepagemodules.de/b2001010/a_133.png"></p><p class="next"><img title="Weiter" src="//files.homepagemodules.de/b2001010/a_132.png"></p></div>
 

[img_slid={{height}}]
 

 ... 
 

[/img_slid]
 

<div class="mySlides"><img style="height: {{height}};" title="Hier geht es zur Modal-Ansicht!" class="myImgModal" src="
 

 ... 
 

"></div>
 

[img_slides={{height}}={{data}}]
 

 ... 
 

[/img_slides]
 

<div class="mySlides"><img style="height: {{height}} !important;" title="Hier geht es zur Modal-Ansicht!" class="myImgModal" data="<center><dl><dd>{{data}}</dd></dl></center>" src="
 

 ... 
 

"><dl><dd>{{data}}</dd></dl></div>
 

<div onclick="xob_insert('[slideshow=500px]\n[image_slid=250px][[File:Bild1.jpg|none|fullsize]][/image_slid]\n[image_slid=250px][[File:Bild2.jpg|none|fullsize]][/image_slid]\n[image_slid=250px][[File:Bild3.jpg|none|fullsize]][/image_slid]\n[/slideshow]','')" class="xob_icon_cont"><img title="Multiple Diashow ohne Bildbeschreibung - Für Upload-Bilder!" class="xob_icon" src="https://img.homepagemodules.de/ds/static/feedicons/pic_album.png"></div>
 

<div onclick="xob_insert('[slideshow=500px]\n[image_slides=250px=Bildbeschreibung 1][[File:Bild1.jpg|none|fullsize]][/image_slides]\n[image_slides=250px=Bildbeschreibung 2][[File:Bild2.jpg|none|fullsize]][/image_slides]\n[image_slides=250px=Bildbeschreibung 3][[File:Bild3.jpg|none|fullsize]][/image_slides]\n[/slideshow]','')" class="xob_icon_cont"><img title="Multiple Diashow mit Bildbeschreibung - Für Upload-Bilder!" class="xob_icon" src="https://img.homepagemodules.de/ds/static/feedicons/pic_album.png"></div>
 

<div onclick="xob_insert('[slideshow=500px]\n[img_slid=250px]https://www.Bild1.jpg[/img_slid]\n[img_slid=250px]https://www.Bild2.jpg[/img_slid]\n[img_slid=250px]https://www.Bild3.jpg[/img_slid]\n[/slideshow]','')" class="xob_icon_cont"><img title="Multiple Diashow ohne Bildbeschreibung - Für IMG-Bilder!" class="xob_icon" src="https://img.homepagemodules.de/ds/static/feedicons/pic_album.png"></div>
 

<div onclick="xob_insert('[slideshow=500px]\n[img_slides=250px=Bildbeschreibung 1]https://www.Bild1.jpg[/img_slides]\n[img_slides=250px=Bildbeschreibung 2]https://www.Bild2.jpg[/img_slides]\n[img_slides=250px=Bildbeschreibung 3]https://www.Bild3.jpg[/img_slides]\n[/slideshow]','')" class="xob_icon_cont"><img title="Multiple Diashow mit Bildbeschreibung - Für IMG-Bilder!" class="xob_icon" src="https://img.homepagemodules.de/ds/static/feedicons/pic_album.png"></div>
 

[slideshow=500px]
[image_slid=250px][[File:Bild1.jpg|none|fullsize]][/image_slid]
[image_slid=250px][[File:Bild2.jpg|none|fullsize]][/image_slid]
[image_slid=250px][[File:Bild3.jpg|none|fullsize]][/image_slid]
[/slideshow]
 

[slideshow=500px]
[image_slides=250px=Bildbeschreibung 1][[File:Bild1.jpg|none|fullsize]][/image_slides]
[image_slides=250px=Bildbeschreibung 2][[File:Bild2.jpg|none|fullsize]][/image_slides]
[image_slides=250px=Bildbeschreibung 3][[File:Bild3.jpg|none|fullsize]][/image_slides]
[/slideshow]
 

[slideshow=500px]
[img_slid=250px]https://www.Bild1.jpg[/img_slid]
[image_slid=250px][[File:Bild2.jpg|none|fullsize]][/image_slid]
[image_slid=250px][[File:Bild3.jpg|none|fullsize]][/image_slid]
[/slideshow]
 

[slideshow=500px]
[img_slides=250px=Bildbeschreibung 1]https://www.Bild1.jpg[/img_slides]
[image_slides=250px=Bildbeschreibung 2][[File:Bild2.jpg|none|fullsize]][/image_slides]
[image_slides=250px=Bildbeschreibung 3][[File:Bild3.jpg|none|fullsize]][/image_slides]
[/slideshow]
 

<!-- Multiple Diashow mit Modal-Ansicht -->
<style>
  .slideshow-container {display:inline-block; margin-right:5px; max-width:900px; min-width:200px; position:relative; border-radius:5px !important; border:1px solid #777777;}
  .slideshow-container img {object-fit: contain; height: 100%;}
  .slideshow-container a {padding:0 !important; background:none;}
  .slideshow-container .prev img, .slideshow-container .next img {display:none; position: absolute; height:30%; max-height:100px; background-color: #111111; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);}
  .slideshow-container .prev img:hover, .slideshow-container .next img:hover {display:block !important;}
  .slideshow-container .next img {right:0px; border-radius:3px 0 0 3px;}
  .slideshow-container .prev img {left:0px; border-radius:0 3px 3px 0;}
  .slideshow-container .prev, .slideshow-container .next {position: absolute; top: 0; width: 25%; height:100%; cursor: pointer; margin:0px; padding:0px;}
  .slideshow-container .next {right:0px;}
  
  .mySlides {display:none; }
  .active-slide {display:block;}
 
  .myImgModal {object-fit: cover; width: 100%; min-height: 80px; height:auto; cursor: pointer; border-radius:5px !important; margin:0px; padding:0px;}
  .myImgModal:hover {opacity: 0.7;}
  
  #closeImg {position: absolute; top: 0px; right: 15px; color: #f1f1f1; font-size: 40px; font-weight: bold; padding:20px;}
  #closeImg:hover, .close:focus {color: #ff8000; text-decoration: none; cursor: pointer;}
 
  .myModal  {display: none; background-color: rgba(0,0,0,0.9); position: fixed; left: 0; top:0; width: 100%; height: 100%; overflow: auto; z-index: 999999; padding: 80px 0 50px 0; }
  .imgAll {display: block; margin: auto !important; height:auto !important; max-height:85%; max-width: 90% !important; border-radius:10px; z-index: 9999999; cursor:pointer; border:3px solid #777777;}
 
  .caption {font-size:110%; margin: auto; color: #cccccc; padding-top:5px; }
  
  @media only screen and (max-width: 767px){
    .slideshow-container {width:auto !important;  }
    .mySlides.mySlidesText dl dd {color: #ffffaa !important; } 
    .mySlides dl dd  {left:0 !important; right:0 !important; outline: none; color: #ffffff !important; background-color: #111111; border-radius:0 0 5px 5px;}
    .modal-content {width: 100%;}
    .slideshow-container .prev img, .slideshow-container .next img {display: block !important;}
  }
 
  .slideshow-container:hover dd, .slideshow-container:focus {left:0; right:-2px; outline: none; background-color: #111111; border-radius:0 0 5px 5px;}
 
  .mySlides dl {margin:0; padding:0;} 
  .mySlides dl dd {font-family:arial; font-size: 14px; padding:5px 10px; position:absolute; left:-99999px; bottom:0; color:#ffffff; text-align:center; text-decoration:none;  margin:0; cursor:pointer; max-height:30px; overflow: hidden; text-overflow:ellipsis;white-space:nowrap;} 
  .mySlides.mySlidesText dl dd {max-height:100%; color: #ffffaa; white-space:normal; overflow: auto;  } 
  .mySlides dl dd:hover {color: #ffffaa; } 
  .mySlides dl:hover:after {content: "mehr!"; position:absolute; bottom:-40px; right:0; left:0; text-align:center; margin:auto; width:50px; border:1px solid #aaaaaa; border-radius:5px; padding: 2px 10px; background: #ffffff;} 
 
  .myModal dl {text-align:center; margin:0px; padding:0px; width:100%;}
  .myModal dd {text-align:center; font-size:85%; display: inline-block; margin:0px; padding:5px 10px; background-color: #000000; max-width:600px; border:1px solid #aaaaaa;} 
</style>
 
<div class="myModal" onclick="">
  <div id="closeImg" title="Ansicht schließen!">&times;</div>
  <img class="imgAll" title="Ein Klick schließt die Ansicht!" >
  <div class="caption"></div>
</div>
 
<script>
document.addEventListener('DOMContentLoaded', function() {
  $('.slideshow-container .img-responsive.img-fluid').attr('title','Hier geht es zur Modal-Ansicht!').addClass('myImgModal');
  $('.slideshow-container a').removeAttr("href").removeClass('xembedded').find('span').remove();
  
  $('.slideshow-container').delay(500).show(300);
  
  $('.mySlides dl dd').on('click',function(){  
    $(this).closest('.mySlides').toggleClass('mySlidesText')
  });
  
  $('.myImgModal').on('click',function(){
    $('.myModal').on('click',function(){
      location.reload(); 
      return false;
    }).fadeIn(500).find('img').attr('src', $(this).attr('src'));
    
    $('.caption').show().html($(this).closest('.mySlides').attr('data'));
    $('.caption').show().html($(this).attr('data'));
  });
 
  $('.slideshow-container .prev,.slideshow-container .next').hover(function(){
    $('img',this).show();
  },function(){
    $('img',this).hide(200);
  });
 
  $('.slideshow-container > br:nth-child(1)').remove();
  $('.mySlides').next().remove();
 
  init();
  function init() {
    parents = document.getElementsByClassName('slideshow-container');
 
    for (j = 0; j < parents.length; j++) {
      var slides = parents[j].getElementsByClassName('mySlides');
      slides[0].classList.add('active-slide');
    }
  }
 
  links = document.querySelectorAll('.slideshow-container p');
  for (i = 0; i < links.length; i++) {
    links[i].onclick = function() {
      current = this.parentNode;
      var slides = current.getElementsByClassName('mySlides');
 
      curr_slide = current.getElementsByClassName('active-slide')[0];
      curr_slide.classList.remove('active-slide');
	
      if (this.className == 'next') {
        if (curr_slide.nextElementSibling.classList.contains('mySlides')) {
          curr_slide.nextElementSibling.classList.add('active-slide');
        } else {
          slides[0].classList.add('active-slide');
        }
      }
 
      if (this.className == 'prev') {
        if (curr_slide.previousElementSibling) {
          curr_slide.previousElementSibling.classList.add('active-slide');
        } else {
          slides[slides.length - 1].classList.add('active-slide');
        }
      }
 
    }
  }
 
});
</script>