Forum - Drucker-Button in der Bildergalerie!

{{gallery_dl_link==true.start}}
 
<script>
/* CSS für Drucker-Button Vorschau */
$('head').prepend(`    
<style>
.druckbutton, .zurueckbutton  {
  display:flex; 
  align-items: center;
  float:left;
  position:relative;
  margin:30px 5px 20px 20px;
  color:#383838;
  font-size:14px !important;
  font-family: "arial" !important;
  font-weight:bold;
  background: #dddddd;
  padding:4px 10px 4px 10px;
  z-index:999999;
  border:1px solid #383838;
  border-radius: 9px;
  cursor:pointer;
}
.druckbutton {
  margin:30px 20px 20px 0;
}
.druckbutton img, .zurueckbutton img {
  background-color:#dddd;
  margin-right:10px;
  border-radius:5px;
  padding:1px;
  z-index:999999;
}
 
.druckbutton:hover, .zurueckbutton:hover {
  background-color:#383838 !important;
  color:#eeeeee !important;
  border:1px solid #aaaaaa;
  z-index:999999;
}
</style>
`);
 
{{template==144.start}}
/* Business-Template (v4) */
$('.foptions_list a:last-child').after(`
   <a href="javascript:void();"><img src="//files.homepagemodules.de/b2001010/a_772_5ed5d3de.png"><small id="druckvor">Druckvorschau</small></a> 
   <a href="javascript:void();"><img src="//files.homepagemodules.de/b2001010/a_772_5ed5d3de.png"><small id="druckimg">Bild drucken</small></a>
`);
{{template==144.end}}
 
{{template==111.start}}
/* Gaia-Template (v3) */   
$('.Photo td:nth-child(3) table').after(`
  <tr><td>
  <hr>                     
  <a href="javascript:void();" id="druckvor" style="font-size: 12px; text-decoration :none !important;"><img src="//files.homepagemodules.de/b2001010/a_228.png" style="margin-right: 3px; vertical-align: middle;"> <small><b>Druckvorschau</b></small></a>
  <br>
  <small><i>Schauen sie sich den Druck vorher an und korregieren evl. einige Drucker-Einstellungen</i></small>
  <hr>   
  </td></tr>                                       
  <tr><td>
  <a href="javascript:void();" id="druckimg" style="font-size: 12px; text-decoration :none !important;"><img src="//files.homepagemodules.de/b2001010/a_228.png" style="margin-right: 3px; vertical-align: middle;"> <small><b>Bild drucken</b></small></a>
  <br>
  <small><i>Hier drucken sie das Bild sofort aus!</i></small>
  </td></tr>
`);   
{{template==111.end}}
 
{{template==110.start}}
/* ProSilver-Template (v2) */
$('.inner small a:nth-child(3)').after(`
  •                  
  <a href="javascript:void();" id="druckvor">Druckvorschau</a>
  • 
  <a href="javascript:void();" id="druckimg">Bild drucken</a>
`);   
{{template==110.end}}
 
{{template==1.start}}
/* Standard-Template (v1) */
  $('.tbhi table:nth(2) a:nth(3)').after(`
  •                  
  <a href="javascript:void();" id="druckvor">Druckvorschau</a>
  • 
  <a href="javascript:void();" id="druckimg">Bild drucken</a>
`);   
{{template==1.end}}
 
$('#druckimg, #druckvor').click(function(){
  $('body').html('<img style="max-width:90%;max-height:90%;" src="{{gallery_dl_link}}">');
  $(window).scrollTop(0);
});
 
$('#druckimg').click(function(){
  setTimeout(function(){
    window.location.reload();
  }, 2000);
 
  setTimeout(function(){
    window.print();
  }, 200);
}); 
 
$('#druckvor').click(function(){                     
  $('body img').before(`
    <span class="zurueckbutton" onclick="window.location.reload();"><img src="//files.homepagemodules.de/b104774/a_451_0f981ddf.png">Zurück</span> 
    <span class="druckbutton"><img src="//files.homepagemodules.de/b104774/a_451_0f981ddf.png">Drucken</span>
  `);
 
  $('.druckbutton').click(function(){
    $('.druckbutton, .zurueckbutton').hide(); 
    setTimeout(function(){
    window.location.reload();
    }, 2000);
  
    setTimeout(function(){
      window.print();
    }, 200);
  });
});
 
</script>
 
{{gallery_dl_link==true.else}}  
 
<center>
  <div id="ScriptInfo" style="position:fixed; top:150px; left:0; right:0; max-width:90%; background:#eeeeee; font-weight:bold; font-size:20px; color:#383838; text-align:center !important; margin:0 auto; padding:40px 15px !important; border:5px double #900000; border-radius:10px;z-index:999999;">
  Das Druck-Skript funktioniert in den Templates (v1-4) nur in Premien-Foren! <br><br>
  Im neuen Xobor (v6) ist das Drucken in der Bildergalerie auch in kostenlosen Foren möglich!
  </div>
</center>
 
{{gallery_dl_link==true.end}}
 

{{template==177.start}}
 
<script>
window.addEventListener('load', function() {
 
/* CSS für Drucker-Button Vorschau */
$('head').prepend(`    
<style>
.druckbutton, .zurueckbutton  {
  display:flex; 
  align-items: center;
  float:left;
  position:relative;
  margin:30px 5px 20px 20px;
  color:#383838;
  font-size:14px !important;
  font-family: "arial" !important;
  font-weight:bold;
  background: #dddddd;
  padding:4px 10px 4px 10px;
  z-index:999999;
  border:1px solid #383838;
  border-radius: 9px;
  cursor:pointer;
}
.druckbutton {
  margin:30px 20px 20px 0;
}
.druckbutton img, .zurueckbutton img {
  background-color:#dddd;
  margin-right:10px;
  border-radius:5px;
  padding:1px;
  z-index:999999;
}
 
.druckbutton:hover, .zurueckbutton:hover {
  background-color:#383838 !important;
  color:#eeeeee !important;
  border:1px solid #aaaaaa;
  z-index:999999;
}
</style>
`);
 
// Bild auflisten
  var imagegallery_links = {
    {{pics.startlist}}
      "{{pics:title}}": "{{pics:linkorig}}",
    {{pics.end}}
  };
  
// Button setzen
  $(window).on('shown.bs.modal', function() {
    $('.pic_meta .table tr:last-child').after(`
      <tr><td>
        Bild drucken:
      </td><td>
        <a href="javascript:void(0)" id="druckvor">Vorschau</a>
        | 
        <a href="javascript:void(0)" id="druckimg">Drucken</a>
      </td></tr>                                               
    `);
  });
 
  $(document.body).on('click', "#druckimg, #druckvor", function(e) {
    e.preventDefault();
 
    var name = $(this).closest(".modal-content").find('.modal-title').text();
 
    var src = imagegallery_links[name];
    $(document.body).html('<img style="max-width:90%;max-height:90%;" src="' + src + '">');
 
    $(window).scrollTop(0);
  });
 
  $(document.body).on('click', "#druckimg", function(e) { 
    e.preventDefault();
 
    setTimeout(function(){
      window.location.reload();
    }, 2000);
    setTimeout(function(){
      window.print();
    }, 200);
  }); 
 
  $(document.body).on('click', "#druckvor", function(e) {
    e.preventDefault();
            
    $('body img').before(`
      <span class="zurueckbutton" onclick="window.location.reload();"><img src="//files.homepagemodules.de/b104774/a_451_0f981ddf.png">Zurück</span> 
      <span class="druckbutton"><img src="//files.homepagemodules.de/b104774/a_451_0f981ddf.png">Drucken</span>
    `);
 
    $(document.body).on('click', ".druckbutton", function(e) { 
      e.preventDefault();
 
      $('.druckbutton, .zurueckbutton').hide();
      setTimeout(function(){
        window.location.reload();
      }, 2000);
 
      setTimeout(function(){
        window.print();
      }, 200);
    });
  });
 
});
</script>
 
{{template==177.end}}