Bildausschnitt vergrößern

Wenn man Bilder in eine Webseite einfügt, müssen sie manchmal so verkleinert werden, dass man Details nicht mehr sehen kann. Hier ist eine Lösung von Trevor Davis, in der ein Miniaturbild über das Bild gezogen werden kann, um verschiedene Teile eines größeren Bildes zu sehen. 

Hier als Beispiel eine Luftaufnahme der Stadt Pilsen in Tschechien:

Markup

Wir haben einen Container (.foto-ziehen) mit fester Breite und Höhe, ein Foto, das größer als der Container (.feature-image),und einen Container (.preview) für die Miniatur von dem Bild:

<!--
jquery und das Plugin von Trevor Davis (kann auf seiner Homepage 
heruntergeladen werden)
-->
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript"
 src="scripts/jquery.imageScroller.min.js"></script>
<div class="foto-ziehen">
  <img src="fileadmin/news/web/javascript/pilsen.JPG" 
       alt="Pilsen" class="feature-image" width="1600" />
  <div class="preview">
    <img src="fileadmin/news/web/javascript/pilsen_klein.gif" 
        alt="pilsen klein" width="113" />
  </div>
</div>
<!--Nun noch das Plugin aufrufen:-->
<script type="text/javascript">

$(document).ready(function() {
  $('div.foto-ziehen').imageScroller();
});
</script>

Das notwendige CSS:

.foto-ziehen {
  height: 640px;
  -moz-user-select: none;
  overflow: hidden;
  position: relative;
  -webkit-user-select: none;
  width: 450px;
}
.foto-ziehen img {
  display: block;
  left: 0;
  position: absolute;
  top: 0;
}
.foto-ziehen .preview {
  border: 5px solid #fff;
  bottom: 20px;
  left: 20px;
  position: absolute;
  width: 100px;
}
/*Wenn das Plugin eingefügt ist, wird ein span mit einer 
indicator  Klasse über die kleine Vorschau Area gelegt, das stellt die 
Ebene dar, die verschoben werden kann:*/
.foto-ziehen .preview .indicator {
  background: #000;
  cursor: move;
  display: block;
  left: 0;
  position: absolute;
  width: 40px;
}