Java Script o.ä. für Fotos gesucht
- Ersteller frankob
- Erstellt am
QuHno
Außer Betrieb
Highslide ist eine Möglichkeit, muss aber nicht immer sein, da sie nur dann sauber funktioniert, wenn JS akiviert wurde. Die andere Möglichkeit ist mittels CSS und nennt sich :hover 
Eine Art, wie man das mit CSS pur lösen kann, steht hier:
Create Resizing Thumbnails Using Overflow Property | Css Globe
oder
http://sonspring.com/journal/hoverbox-image-gallery
Gibt aber noch mehr Möglichkeiten, mit "image resize on hover" sollten die problemlos mit einer der üblichen Suchmaschinen zu finden sein.
Eine Art, wie man das mit CSS pur lösen kann, steht hier:
Create Resizing Thumbnails Using Overflow Property | Css Globe
oder
http://sonspring.com/journal/hoverbox-image-gallery
Gibt aber noch mehr Möglichkeiten, mit "image resize on hover" sollten die problemlos mit einer der üblichen Suchmaschinen zu finden sein.
Zuletzt bearbeitet:
Ich beschreibs genauer:
Ich habe nachfolgendes CSS und möchte da, daß die Fotos (bevor sie mit der Maus angewählt werden und vergrössert werden im Kleinformat komplett anzeigen (ohne daß ich die Fotos 2 x in das Verzeichnis, 1 x groß und 1 x klein, kopieren muss. Bisher zeigt es mir von den kleinen Voransicht-Fotos nur den Rand (Wand, Himmel...) an und nicht den kompletten Inhalt der Vorschau.
<style>
ul#thumbs a{
display:block;
float:left;
width:100px;
height:100px;
line-height:100px;
overflow:hidden;
position:relative;
z-index:1;
}
ul#thumbs a img{
float:left;
position:absolute;
top:-20px;
left:-50px;
}
ul#thumbs a:hover{
overflow:visible;
z-index:1000;
border:none;
}
</style>
</head>
<body>
<h1>Fotos von....</h1>
<h2>2009</h2>
<ul id="thumbs">
<li><a href="fotos/1.jpg"><img src="fotos/1.jpg"></a></li>
<li><a href="fotos/2.jpg"><img src="fotos/2.jpg"></a></li
(nur Auszug).
Weiß wer eine Lösung? Wenn ich z.b. bei overflow das hidden ändere zeigt funktioniert das Darüberfahren mit der Maus nicht mehr.
Ich habe nachfolgendes CSS und möchte da, daß die Fotos (bevor sie mit der Maus angewählt werden und vergrössert werden im Kleinformat komplett anzeigen (ohne daß ich die Fotos 2 x in das Verzeichnis, 1 x groß und 1 x klein, kopieren muss. Bisher zeigt es mir von den kleinen Voransicht-Fotos nur den Rand (Wand, Himmel...) an und nicht den kompletten Inhalt der Vorschau.
<style>
ul#thumbs a{
display:block;
float:left;
width:100px;
height:100px;
line-height:100px;
overflow:hidden;
position:relative;
z-index:1;
}
ul#thumbs a img{
float:left;
position:absolute;
top:-20px;
left:-50px;
}
ul#thumbs a:hover{
overflow:visible;
z-index:1000;
border:none;
}
</style>
</head>
<body>
<h1>Fotos von....</h1>
<h2>2009</h2>
<ul id="thumbs">
<li><a href="fotos/1.jpg"><img src="fotos/1.jpg"></a></li>
<li><a href="fotos/2.jpg"><img src="fotos/2.jpg"></a></li
(nur Auszug).
Weiß wer eine Lösung? Wenn ich z.b. bei overflow das hidden ändere zeigt funktioniert das Darüberfahren mit der Maus nicht mehr.
QuHno
Außer Betrieb
Du machst im Moment das A um das IMG kleiner, dadurch wird aber das Bild nicht skaliert...
Was z.B. geht, ist
oder, zumindest bei den meisten Browsern:
Ansonsten: Hast Du mal in den 2. Link hineingesehen, den ich oben geposted habe? Da wird genau das gemacht, was Du vor hast, klick dort mal auf Example
edit: Naja, er macht nicht ganz. Leider braucht der 2 Bilder und das wolltest Du ja nicht - ich hätte vorher genauer lesen sollen...
Was z.B. geht, ist
Code:
a img{width: 100px;}
a:hover img{width: 100%;}
Code:
img {width: 100px;}
img:hover{width: 100%;}Ansonsten: Hast Du mal in den 2. Link hineingesehen, den ich oben geposted habe? Da wird genau das gemacht, was Du vor hast, klick dort mal auf Example
edit: Naja, er macht nicht ganz. Leider braucht der 2 Bilder und das wolltest Du ja nicht - ich hätte vorher genauer lesen sollen...
Öhm... wenn er Photoshop hat und es die passeende Version ist, evtl. - obwohl das dann auch ziemlich übel verjavascriptett oder verflasht ist. Falls er Photoshop nicht hat, müsste er für einen einfachen Effekt mal "gerade eben" ca. 1000€uronen übrig haben...
Zuletzt bearbeitet:
jetzt muss ich nochmal fragen. ich hatte nicht die ganz richtige seite geschickt, weil da zuviel drin ist.
in einem anderen beispiel habe ich nur das stehen:
Den 2. code habe ich nicht eingefügt. hätte der dazu gehört?
die andere bilder-Datei hat zuviel drin stehen. da blick ich gar nicht mehr durch. hab da einen fertigen genommen und nur an den bildern abgehängt. sieht gut aus aber leider wie vorhin gesagt sehe ich nur den Rand der Vorschaubilder.
Der script sieht so aus:
in einem anderen beispiel habe ich nur das stehen:
Hier habe ich das 1. von dir genannte beispiel genommen. ein teilerfolg war da. die Vorschau waren ganze Bilder. Aber sie haben sich nicht vergrößert als ich mit der Maus drüber fuhr.
Den 2. code habe ich nicht eingefügt. hätte der dazu gehört?
die andere bilder-Datei hat zuviel drin stehen. da blick ich gar nicht mehr durch. hab da einen fertigen genommen und nur an den bildern abgehängt. sieht gut aus aber leider wie vorhin gesagt sehe ich nur den Rand der Vorschaubilder.
Der script sieht so aus:
QuHno
Außer Betrieb
Mag mich grad nicht duch den Code durchwühlen, hatte es bei mir so gelöst:
In den Style:
und die Bilder:
Funktioniert AFAIK in allen aktuellen Browsern und der IE<8 bekommt einen Link zum draufklicken.
In den Style:
Code:
div img {
float : left;
clear : left;
width : 188px;
height : 230px;
margin : 1em 1em 0.1em 0.5em;
}
div img:hover {
width : 393px;
height : 483px;
border : 2px solid #cc0000;
margin : 0;
padding : 0;
position:absolute;
z-index:2;
}
.IElink {
display: none;
}
<!--[if lt IE 8]>
<style type="text/css">
.IElink {
display: inline;
}
div img:hover {
position : relative;
top : 0px;
left : 0px;
float:left;
clear : left;
width : 188px;
height : 230px;
margin : 1em 1em 0.1em 0.5em;
border: 0px;
}
</style>
<![endif]-->und die Bilder:
Code:
<div>
<img src="bild.jpg" alt="Was sinvolles" title="weitere sinvolle Sachenl" /><a class="IElink" href="bild.jpg">Bildlink</a>
</div>Funktioniert AFAIK in allen aktuellen Browsern und der IE<8 bekommt einen Link zum draufklicken.
Zuletzt bearbeitet:
Danke für die bisherigen Antworten. Beim letzten habe ich beide Teile des scripts auf die Seite kopiert aber ich sehe nur einen weißen Bildschirm. Fehlt da noch was?
Trotzdem möchte ich wenns geht diesen Teil benützen (siehe nachstehend). Nur sollte das Bild noch größer angezeigt werden als es angezeigt wird beim drüberfahren mit der Maus. Die Lösung dazu fand ich noch nicht.
Es sollte auch nur mit 1 Bild gehen, so daß ich nicht von jedem Bild ein kleines und großes machen muss und unnötig Platz verbrauche.
das wäre die ganze Datei:
Ich kann jetzt nicht besonders gut englisch. Heisst nachstehendes von dem Erfinder daß man da auch die Codes ändern darf? Unter den Bildern möchte ich nicht unbedingt was von hover usw. stehen haben sondern andere Texte oder nichts.
Trotzdem möchte ich wenns geht diesen Teil benützen (siehe nachstehend). Nur sollte das Bild noch größer angezeigt werden als es angezeigt wird beim drüberfahren mit der Maus. Die Lösung dazu fand ich noch nicht.
Es sollte auch nur mit 1 Bild gehen, so daß ich nicht von jedem Bild ein kleines und großes machen muss und unnötig Platz verbrauche.
das wäre die ganze Datei:
Ich kann jetzt nicht besonders gut englisch. Heisst nachstehendes von dem Erfinder daß man da auch die Codes ändern darf? Unter den Bildern möchte ich nicht unbedingt was von hover usw. stehen haben sondern andere Texte oder nichts.