Bild Fokussieren ( Lupe) 
Autor: Matthias S.Hallo,
Ich habe auf der Seite Bild-Lupe
genau die Funktion gefunden, die ich suche.
ich möchte auf meiner Website ein Bild Auschnitte dtailiert mit der Lupe betrachten können.
Nun mein Problem, ich habe kaum Erfahrung in CSS + Java Codes.
Also, so wie ich das verstehe: Den Quelltext (Widget) kopiere ich bei HTML-Code-Objekt einfügen in HTML-Code, natürlich mit dem Link von meinem Bild.
Die Datei OKONOM ZIP entpaken und in meinen Webspace.
den CSS Code packe ich wieder unter HTML-Code-Objekt unter Erweitert in Website X5.
Da steht dann noch auf der Seite "Diese müsst ihr anschließend im CSS-Code verlinken."
wie vrlinken, das verstehe ich nicht, kann mir das Bitte jemand erklären. Sorry, wenn ich mich etwas Doof anstelle.
Ich bedabke mich schon mal
Lg - Matze -
Du benötigst eigentlich nur die 2. Zeile mit dem JS Code "okzoom.js"!
Dazu den einzeiligen Code unter den Eigenschaften der Seite (wo du den Zoom einbinden willst) in den Head kopieren!
Dann auf der Seite in einem HTML-OBjekt den anderen Quelltext Code kopieren! Allerdings besserst du den LINK zum Bild aus und zwar so, dass das Bild z.B: Bild1.jpg und im Ordner "bilder" liegt!
<img id="example" src="bilder/bild1.jpg" width="860">
Dann wechselst du auf den Reiter "Erweitert" und unten bei Hinzufügen bindest du das Bild in den Ordner "bilder" mit dem NAmen "bild1.jpg" ein. Den Bildnamen kannst du natürlich selbst wählen musst aber diesen dann im Code abändern.
In der vorschau geht es nicht, nur Online! Sieh hier... LINK
Anleitung:
1) Die ZIP-Datei herunterladen und auf der Festplatte extrahieren, dann die Datei okzoom.js per FTP-Fenster in WebSite X5 auf den eigenen Webspace hochladen, siehe Screenshot unten
2) Bei diesem Code die 2. Zeile an die eigene Webadresse mit der Datei okzoom.js anpassen ...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script src='https://www.zella.de/code/js/okzoom.js'></script>
... so dass es nachher so ähnlich (wie bei meiner Testseite) aussieht ...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script src='http://finde-links.de/test123-beautyblog/okzoom.js'></script>
... dann die beide Zeilen bei WebSite X5 unter ...
3 Sitemap
... die Seite mit dem Bild-Lupe-Funktion markieren, oben auf "Eigenschaften" klicken, dann Reiter "Erweitert" anklicken und die beiden Zeilen einfügen bei ...
---- WebSite x5 - Reiter "Erweitert" -----
Benutzerdefinierter Code:
Vor dem </HEAD>-Tag
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script src='http://finde-links.de/test123-beautyblog/okzoom.js'></script>
-----
3) Auf der Seite wo das Bild mit der Lupefunktion erscheinen soll, wird ein HTML-Objekt ins Raster gezogen und dieser Code eingefügt ...
----- WebSite X5 - HTML-Objekt -----
<center>
<img id="example" src="http://finde-links.de/test123-beautyblog/images/large-1822474.jpg" width="860">
</center>
<script>
$(function(){
$("#logo").okzoom({
});
$('#example').okzoom({
width: 200,
height: 200,
border: "3px solid #666",
shadow: "0 0 5px #666"
});
});
</script>
-----
... allerdings muss die Bildadresse an die eigenen Bilder angepasst werden.
Tipp zur Ermittlung der Bildadresse:
Wird zuerst ein Bild-Objekt ins Raster gezogen und die Seite ins Internet exportiert wird, dann ist das Bild auf dem Webspace und es kann im Browser über Rechtsklick und "Grafikadresse kopieren" die benötigte Bildadresse in die Zwischenablage kopiert werden.
Danach geht man wieder zu WebSite X5 und dem HTML-Objekt, hier kann dann im Code die eigene Bildadresse eingefügt werden.
Meine Testseite >>http://finde-links.de/test123-beautyblog/lupe-zoom.html
----- Screenshots -----
-----
-----
Autor
coole Sache ich werde es mal ausprobieren.
vielen Dank für die Info !!!
Musste feststellen, dass nicht alle Bilder mit der Lupe vergrößert werden, große Bilder wurden mit der Lupe sogar verkleinert und wenn mehrere Bilder auf einer Seite sein soll, dann muss hier ...
----- Ausschnitt aus dem Code im HTML-Objekt -----
<img id="example3" ...
...
$('#example3').okzoom({
...
-----
... die id unterschiedlich sein, z.B. eine Zahl anhängen, sonst gibt es Fehler bei der Anzeige.
Meine Testseite >> http://finde-links.de/test123-beautyblog/lupe-zoom.html (mit 3 Bildern)
Autor
Ich habe das Bild, was vergrößert werden soll im Webspache im image ordner gespeichert, Js auch.
Ich komm aber mit der Pfadangabe nicht zurecht. Muß ich als erster meine Domain angeben und dann denn Pfad zum Webspace, so ungefähr meine Domain mathew69er.de/X5_23/images/front_ok_24.jpg
wenn ich die daten von der Bild Lupe Seite (zum ausprobieren) verwende geht das, auch mit Vorschau.
Irgendwas mache ich glaub mit der Pfadangabe falsch ?? Danke
Autor
Hab´s hinbekommen ( huuraa) /X5_23 war zu viel im Pfad, mß man nicht angeben ( Anfängerfehler von mir)
Vielen Dank nochmals !!!
2 Möglichkeiten die Bildadressen zu ermitteln:
A) Oben im Post habe ich diesen ...
-----
Tipp zur Ermittlung der Bildadresse:
Wird zuerst ein Bild-Objekt ins Raster gezogen und die Seite ins Internet exportiert wird, dann ist das Bild auf dem Webspace und es kann im Browser über Rechtsklick und "Grafikadresse kopieren" die benötigte Bildadresse in die Zwischenablage kopiert werden.
Danach geht man wieder zu WebSite X5 und dem HTML-Objekt, hier kann dann im Code die eigene Bildadresse eingefügt werden.
-----
... gegeben, weil ich schon geahnt habe, dass es Probleme geben könnte.
B) Man kann aber auch bei Firefox über das Menü ...
>> Extras > Seiteninformationen / Medien
... die Bilder sehen und die Bilderadressen ermitteln.
----- Screenshot -----
Autor
Danke für die Tipps, beim nächsten mal weiß ich bescheid . . .