Huhu zusammen,
moni hatte mir mal eine seite mit einer zoom funktion gezeigt. Diese funktion würde
ich gerne mal verstehen können. Also wie kann man diese Funktion erstellen?
Interesse hätte ich an der demo 3
Es ist nicht eilig! Würde nur gerne mal diese funktion haben wollen. Wer ist in der
Lage, eine solche funktion zu bauen?
Und hier mal die seite dazu
http://www.dynamicdrive.com/dynamicinde ... zoomer.htm
Jetzt bin ich mal gespannt:-)
lg
Bild zoom effekt
Moderator: HTML-Laie
-
Patrick
- Grosser Webmaster
- Beiträge: 732
- Registriert: Mi 21. Jul 2010, 15:55
- Mein Vorname: Patrick
- Wohnort: Bei Münster
- Kontaktdaten:
-
moni
- Held des Forums
- Beiträge: 8356
- Registriert: Mo 16. Nov 2009, 20:56
- Mein Vorname: Monika
- Wohnort: Borken
Re: Bild zoom effekt
Hallo Patrick...
habe auch was anderes gefunden und ausprobiert ...http://blicke1.npage.de/spiegel_zoom_96300634.html
man muss da bisschen basteln wegen den grauen Hintergrund und auch die Bilder größe...man braucht quasi vom einen Bild immer zwei haben wein großer und ein kleiner...weiß auch nicht wie am besten so was an deiner Tabelle zubringe auch ist...
hier kann man sich das runter laden...
http://css-tricks.com/examples/Anything ... double.php
habe auch was anderes gefunden und ausprobiert ...http://blicke1.npage.de/spiegel_zoom_96300634.html
man muss da bisschen basteln wegen den grauen Hintergrund und auch die Bilder größe...man braucht quasi vom einen Bild immer zwei haben wein großer und ein kleiner...weiß auch nicht wie am besten so was an deiner Tabelle zubringe auch ist...
hier kann man sich das runter laden...
http://css-tricks.com/examples/Anything ... double.php
Viele Grüße ...Monika
-
bubby
- Forengänger
- Beiträge: 30
- Registriert: Mi 18. Apr 2012, 10:41
- Mein Vorname: Siegfried
Re: Bild zoom effekt
Wenn es um die vergrößerung der Bilder geht würde ich auf jeden fall die Lightbox oder ähnliches verwenden.
Ist für Homepagebesucher auch ein vertrauter effekt, da er viel verwendet wird.
Ich selbst benutze die "Brainbox", mehr dazu findet ihr hier --> http://www.the-netbrain.de/brainbox.htm
Funktioniert soweit in allen Browsern und ist ein schmales Script was gut für die Performance ist.
Bei Fragen zum Einbau stehe ich gern zur Seite.
Ist aber recht einfach zu händeln.
Ist für Homepagebesucher auch ein vertrauter effekt, da er viel verwendet wird.
Ich selbst benutze die "Brainbox", mehr dazu findet ihr hier --> http://www.the-netbrain.de/brainbox.htm
Funktioniert soweit in allen Browsern und ist ein schmales Script was gut für die Performance ist.
Bei Fragen zum Einbau stehe ich gern zur Seite.
Ist aber recht einfach zu händeln.
--------------------------------------------
LG Siegfried
LG Siegfried
-
Patrick
- Grosser Webmaster
- Beiträge: 732
- Registriert: Mi 21. Jul 2010, 15:55
- Mein Vorname: Patrick
- Wohnort: Bei Münster
- Kontaktdaten:
Re: Bild zoom effekt
huhu zusammen,
die Funktion, die Moni hat, die ist es
.
Moni, du bist gefragt.
Wie hast du es hinbekommen? Ich habs gerade mal gedownloaded.
dieses java kann ich nicht öffnen. Kannst du mir dabei helfen?
Wo muss ich denn den css-teil einfügen? Einfach ans ende des vorhandenen hinten dran?
Oder muss es irgendwo zwichen gesetzt werden?
LG
Patrick
die Funktion, die Moni hat, die ist es
.Moni, du bist gefragt
.Wie hast du es hinbekommen? Ich habs gerade mal gedownloaded.
dieses java kann ich nicht öffnen. Kannst du mir dabei helfen?
Wo muss ich denn den css-teil einfügen? Einfach ans ende des vorhandenen hinten dran?
Oder muss es irgendwo zwichen gesetzt werden?
LG
Patrick
-
moni
- Held des Forums
- Beiträge: 8356
- Registriert: Mo 16. Nov 2009, 20:56
- Mein Vorname: Monika
- Wohnort: Borken
Re: Bild zoom effekt
Code: Alles auswählen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Anything Zoomer | Image</title>
<style type="text/css">
<!--
/*
GENERAL
*/
* { margin: 0; padding: 0; }
html
{ overflow-y: scroll; }
body
{ font: 14px Georgia, Serif; background: #444; }
#main-content
{ width: 600px; margin: 20px auto; padding: 20px; background: white; -moz-border-radius: 20px; -moz-box-shadow: #222 5px 5px 5px; -webkit-border-radius: 20px; -webkit-box-shadow: #222 5px 5px 5px; position: relative; }
pre { width: 580px; overflow: auto; margin: 0 0 12px 0; padding: 10px; background: #eee; border: 1px solid #ccc; }
code { font: 11px Monaco, Courier, MonoSpace; }
ul { margin: 0 0 12px 30px; }
/*
NAV
*/
#nav { list-style: none; overflow: hidden; margin: 0 0 22px 0; }
#nav li { display: inline; }
#nav li a { display: block; float: left; padding: 8px; text-decoration: none; }
#nav li a:hover,
#calendar #nav li.cal a,
#image #nav li.img a,
#text #nav li.txt a,
#use #nav li.use a,
#double #nav li.dbl a { background: #444; color: white; }
h1 { font: bold 40px Helvetica, Sans-Serif; letter-spacing: -1px; margin: 0 0 12px 0; }
h2 { font: bold 30px Helvetica, Sans-Serif; letter-spacing: -1px; margin: 0 0 6px 0; }
p { margin: 0 0 12px 0; }
#dl { position: absolute; top: 15px; right: 15px; text-decoration: none; background: #222; color: white; -moz-border-radius: 4px; -webkit-border-radius: 4px; padding: 3px 8px; }
#dl:hover { background: #999; }
/*
FOR THE MOVER
*/
#wrap, #wrap2 { width: 600px; position: relative; }
#small, #small2 { position: relative; width: 100%; }
#large, #large2 { background: white; position: relative; width: 600px; }
#mover, #mover2 { position: absolute; top: 0; left: 0; width: 104px; height: 104px; overflow: hidden; z-index: 100; background: white; display: none; }
#overlay, #overlay2 { border: 1px solid blue; width: 102px; height: 102px; position: absolute; top: 0; left: 0; z-index: 200; }
/*
FOR TEXT DEMO
*/
#small p { font-size: 8px; }
/*
CALENDAR SPECIFIC
*/
caption { background: #1634D8; padding: 3px; color: white; font: 13px Helvetica, Sans-Serif; text-transform: uppercase; letter-spacing: 1px; }
.calendar { font-size: 13px; }
.calendar td, .calendar th { padding: 1px; border: 2px solid white; }
.calendar td a { display: block; padding: 3px; background: #900; color: white; }
#months-tables .calendar td a:hover,
#months-tables .calendar td a[style]:hover { background: black !important; text-decoration: none; }
.day { text-align: center }
.past-day { background-color: #eee; }
#months-tables { width: 100%; }
#months-tables td { vertical-align: top; }
td { vertical-align: top; }
.single-month { padding-right: 10px; }
#small .calendar { font-size: 8px; }
#small .calendar td, #small .calendar th { width: 12px; height: 12px; border: 1px solid white; padding: 0; }
#small .calendar td a { padding: 0; display: block; width: 12px; height: 12px; }
#small .calendar td.day { background: #eee; }
#small .calendar td.past-day { background: #999; }
#small a { border: 0; }
#small .months-tables { width: auto; }
#small caption { font-size: 8px; white-space: nowrap; }
=-->
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://file1.npage.de/002234/84/html/zoomer.jquery.js"></script>
<script type="text/javascript">
$(function() {
$("#wrap").anythingZoomer({
expansionSize: 30,
speedMultiplier: 2.2
});
});
</script>
</head>
<div id="wrap">
<div id="small">
<img src="http://file1.npage.de/002234/84/bilder/clutch1_gross.gif" alt="small rushmore" />
</div>
<div id="mover">
<div id="overlay"></div>
<div id="large">
<img src="http://file1.npage.de/009238/11/bilder/clutch1_gross.gif" alt="big rushmore" />
</div>
</div>
</div>
</div>
</body>
</html>so sah das bei mir aus...man muss das JS auf die HP hoch laden und dann das Link Dokument anbinden..weiß momentan nicht wie man den Hintergrund los werden kann und wie in die Tabelle am besten einzufügen ist...kannst ja mal schon aber üben ...
die Version vom Siegfried ist auch super gut und,man sieht die Bilder sauber und deutlich aus ...
Viele Grüße ...Monika
Wer ist online?
Mitglieder in diesem Forum: Ahrefs [Bot] und 5 Gäste