javascript Zoom/Lupe für Bilder

Begonnen von Franky, 27 Mai 2009, 08:44:02

⏪ vorheriges - nächstes ⏩

0 Mitglieder und 1 Gast betrachten dieses Thema.

Franky

Da sich einige hier dafür interessieren, poste ich mal den direkten Link zur Homepage des Programmierers:

http://walter.bislins.ch/projekte/index.asp?page=JavaScript%3A+Lupe

Etwas ähnliches gibt es bei Dynamicdrive. Nennt sich Expando-Script. Im Prinzip die gleiche Funktion.


ciao

Frank :-)
"Ich möchte schlafend sterben, wie mein Opa, nicht schreiend, wie sein Beifahrer."

goodssale

hallo franky,

habe das script versucht zu installieren komme aber irgendwie nicht klar.

habe die 3 dateien ins root:
x.js
ic.js
lupe.js

diesen code in die my_header kopiert
?>
<meta http-equiv="imagetoolbar" content="no">
<script language="JavaScript" src="x.js" type="text/javascript"></script>
<script language="JavaScript" src="ic.js" type="text/javascript"></script>
<script language="JavaScript" src="lupe.js" type="text/javascript"></script>
<?php

hmm... und jetzt weiß ich nicht mehr weiter.

kannst du mir sagen, was ich noch machen muss?

grüße heinz
Grüße Heinz

Franky

#2
Hi Heinz,

steht doch auf der Seite genau beschrieben.

http://walter.bislins.ch/projekte/index.asp?page=Lupe%3A+Anwendung

jetzt fügste halt die Bilder ein. Und die Initialisierung.
<script language="JavaScript" type="text/javascript"><!--
CLupeObj.BorderColor = 'black';
CLupeObj.BorderWidth = 1;
CLupeObj.TimeSpan = 500;
CLupeObj.TimerInterval = 40; // 40 ms = 25 fps (frames per second)
CLupeObj.HideSmall = false; // to hide small image during zoom
CLupeObj.HAlign = 'ToCenter'; // 'Left', 'Center', 'Right'
CLupeObj.VAlign = 'ToMiddle'; // 'Top', 'Middle', 'Bottom'
CLupeObj.HMargin = 0;
CLupeObj.VMargin = 0;

CLupeInit('DSCN3057.png' , 'kreis1.png');
//-->
</script>


Der Aufruf lautet ggf. so:

<td> <p><a href="javascript:CLupeZoom('pic1','DSCN3057.png')"><img width="200" height="149" border="0" alt="click to enlarge" id="pic1" src="DSCN3057.jpg" /></a> </p>
                </td>


Lies dir genau die Anleitung durch, dann kann eigentlich nichts schief gehen.
"Ich möchte schlafend sterben, wie mein Opa, nicht schreiend, wie sein Beifahrer."

goodssale

#3
hallo franky,
habe es hinbekommen.

für die, die es auch brauchen,

ich habe die 3 dateien ins root meines verzeichnisses kopiert
Zitatx.js
ic.js
lupe.js

diesen code in die my_header.php kopiert, so ab zeile 16
Zitat?>
<meta http-equiv="imagetoolbar" content="no">
<script language="JavaScript" src="x.js" type="text/javascript"></script>
<script language="JavaScript" src="ic.js" type="text/javascript"></script>
<script language="JavaScript" src="lupe.js" type="text/javascript"></script>
<?php
?>
<script language="JavaScript" type="text/javascript"><!--
CLupeObj.BorderColor = 'black';
CLupeObj.BorderWidth = 1;
CLupeObj.TimeSpan = 500;
CLupeObj.TimerInterval = 40; // 40 ms = 25 fps (frames per second)
CLupeObj.HideSmall = false; // to hide small image during zoom
CLupeObj.HAlign = 'ToCenter'; // 'Left', 'Center', 'Right'
CLupeObj.VAlign = 'ToMiddle'; // 'Top', 'Middle', 'Bottom'
CLupeObj.HMargin = 0;
CLupeObj.VMargin = 0;

CLupeInit('DSCN3057.png' , 'kreis1.png');
//-->
</script>
<?php

und diesen code habe ich in die theme.html nach dem head eingefügt
Zitat<script language="JavaScript" type="text/javascript"><!--
CLupeObj.BorderColor = 'black';
CLupeObj.BorderWidth = 1;
CLupeObj.TimeSpan = 500;
CLupeObj.TimerInterval = 40; // 40 ms = 25 fps (frames per second)
CLupeObj.HideSmall = false; // to hide small image during zoom
CLupeObj.HAlign = 'ToCenter'; // 'Left', 'Center', 'Right'
CLupeObj.VAlign = 'ToMiddle'; // 'Top', 'Middle', 'Bottom'
CLupeObj.HMargin = 0;
CLupeObj.VMargin = 0;

//-->
</script>

und diesen code nimmt mann da, wo das bild erscheinen soll.
Zitat<p align="center"><a href="javascript:CLupeZoom('pic1','bild_gross')">
<img border="0" alt="click to enlarge" id="pic1" style="width: 80px; height: 95px;" src="bild_klein" /></a> <br /></p>

hoffe es ist alles richtig.

grüße heinz
Grüße Heinz

Franky

prima Heinz.

Allerdings solltest du im Code meine Dateinamen löschen und durch deine Dateinamen ersetzen :-)

Ich meine hier:

"CLupeInit('DSCN3057.png' , 'kreis1.png');"

Das ist die Preloadfunktion, damit die Bilder schneller geladen werden.

Außerdem brauchst und solltest du das hier nicht 2 mal eintragen:

<script language="JavaScript" type="text/javascript"><!--
CLupeObj.BorderColor = 'black';
CLupeObj.BorderWidth = 1;
CLupeObj.TimeSpan = 500;
CLupeObj.TimerInterval = 40; // 40 ms = 25 fps (frames per second)
CLupeObj.HideSmall = false; // to hide small image during zoom
CLupeObj.HAlign = 'ToCenter'; // 'Left', 'Center', 'Right'
CLupeObj.VAlign = 'ToMiddle'; // 'Top', 'Middle', 'Bottom'
CLupeObj.HMargin = 0;
CLupeObj.VMargin = 0;

//-->
</script>


Sonst haste hinterher Probleme, wenn du etwas änderst.....

ciao

Frank :-)
"Ich möchte schlafend sterben, wie mein Opa, nicht schreiend, wie sein Beifahrer."