Fenster mit verschiebbaren Inhalt

mikemike · 20.02.2012

Hallo,

wie kann ich eine feste Fenstergröße vorgeben, aber das Bild darin verschieben. Ich möchte nur ein Teilbild im Fenster zeigen, aber man sollte es mit der Maus verschieben können. Ist das irgendwie zu lösen?
Hier der Test: (leider nicht verschiebbar)

Gruß
Olaf

Robbyn- · 20.02.2012

AW: Fenster mit verschiebbaren Inhalt

Auf die ganz einfachste Tour, würde ich dies mit jQuery lösen.

Einfach von jQuery das aktuelle Script runterladen, auf der Seite einbinden und dann mit folgenden Code das img ansprechen.

PHP:

<script>
$(document).ready(function(e)){
 $('#bild').draggable();
}
</script>

Wobei in dem Code das Wort bild, die ID des img sein muss.

mikemike · 20.02.2012

AW: Fenster mit verschiebbaren Inhalt

Sorry wenn ich ein wenig unbedaft nachfrage, aber meintest Du es so?

PHP:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PAUL</title>
<script>
$(document).ready(function(e)){
 $('#paul.jpg').draggable();
}
</script>  
</head>

<body>



<img src="http://www.bernhardtcc.de/images/paul.jpg" width="640" height="480" alt="danger"/>

</body>
</html>

Myhar · 20.02.2012

AW: Fenster mit verschiebbaren Inhalt

Wo ist hier jQuery an Sich eingebunden?

Robbyn- · 20.02.2012

AW: Fenster mit verschiebbaren Inhalt

Jo schon soweit richtig, du musst nur noch im header folgenden code einbinden, damit jQuery mit enthalten ist, ohne dies geht es nicht:

PHP:

<script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript">
</script>
<script>
$(document).ready(function(e)){
 $('#paul').draggable();
}
</script>

Und dein Bild muss so aussehen:

PHP:

<img src="http://www.bernhardtcc.de/images/paul.jpg" width="640" height="480" alt="danger" id="paul"/>

mikemike · 20.02.2012

AW: Fenster mit verschiebbaren Inhalt

Irgendwie will es nicht.
Auf der Seite test.html habe ich das script mit dem Befehl, die Seite Bild.html in der größe "x" zu öffnen. Das neue Fenster öffnet sich auch in der richtigen Größe. In der Seite bild.html ist nun der code von Dir. Aber das Bild verschiebt sich nicht.
Wobei in meinem Editor steht es wäre ein Fehler in Zeile 9, Sytaxfehler.

PHP:

$(document).ready(function(e)){

Robbyn- · 20.02.2012

AW: Fenster mit verschiebbaren Inhalt

Schreibe mal den kompletten code von der html Seite hier rein.

mikemike · 20.02.2012

AW: Fenster mit verschiebbaren Inhalt

Dies ist der Code von der Seite bild.html

PHP:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PAUL</title>
<script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript">
</script>
<script>
$(document).ready(function(e)){
 $('#paul').draggable();
}
</script>
</head>
<body>
<img src="http://www.bernhardtcc.de/images/paul.jpg" width="640" height="480" alt="danger" id="paul"/>
</body>
</html>

Robbyn- · 20.02.2012

AW: Fenster mit verschiebbaren Inhalt

Uppps Fehler von mir. ersetze mal folgenden Code:

PHP:

<script>
$(document).ready(function(e)){
 $('#paul').draggable();
}
</script>

durch diesen:

PHP:

<script>
$(document).ready(function(e) {
    $('#paul').draggable();
});
</script>

Dann sollte es gehen.

mikemike · 20.02.2012

AW: Fenster mit verschiebbaren Inhalt

Die Fehlermeldung ist jetzt weg, aber leider geht es immer noch nicht. Wenn ich auf diese Seite geh , macht er das neue Fernster auf (). Die Größe ist wie in Test .html voergegeben (width=426,height=320) aber das Bild verschiebt sich leider nicht.

Robbyn- · 20.02.2012

AW: Fenster mit verschiebbaren Inhalt

Entschuldige bitte, ich habe vergessen dir zu sagen das man noch die jQuey UI einbinden muss. Im Header muss also folgendes stehen:

PHP:

<script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
<script>
$(document).ready(function(e) {
    $('#paul').draggable();
});
</script>

Ersetze dies bitte durch deinen jetzigen Header, bei mir hat es nun funktioniert gehabt.

mikemike · 20.02.2012

AW: Fenster mit verschiebbaren Inhalt

Robbyn, danke vielmals, jetzt klappt es.
Eine Frage hätte ich noch. Wenn ich nun einen bestimmten Bildausschnitt, im zu öffnenden Fenster haben möchte, geht dies auch mit einem Befehl?
Z.B. Ausschnitt von unten die Schnauze oder Ausschnitt oben linke Kopfpartie als Ausgansbild zum verschieben.

Robbyn- · 20.02.2012

AW: Fenster mit verschiebbaren Inhalt

Jo das geht natürlich auch.

Du musst natürlich ersteinmal wissen wie groß dein Bild ist, nach den Maßangaben zu schließen weißt du dies also bereits.

So dann sagen wir mal du möchtest den unteren Rechten ausschnit zu sehen haben, dann müsste das wie folgt aussehen.

Code:

<style>
#paul{
 position:absolute;
 top: -460px;
 left: -620px;
}
</style>

Dies fügst du mit in den header ein. Das ist CSS und zumindestens müsstest du jetzt 20px von Rechts und 20px von unten zu sehen sein. Wenn du mehr sehen willst die Werte einfach größer machen. Aufpassen hier wird mit Minus Werten gearbeitet.

mikemike · 20.02.2012

AW: Fenster mit verschiebbaren Inhalt

Super, da hätte ich aber auch selber drauf kommen können. Naja den Wald vor lauter Bäumen nicht gesehen.
Tolle Hilfe von Dir, nochmals danke