Archivlink: javarea.de Forum > JavaScript > Bild größer anzeigen lassen
Vollständigen Link anzeigen: javarea.de Forum > JavaScript > Bild größer anzeigen lassen

Pages: [1]
geschrieben von AlexD am 17.02.2010 - 19:13
Hallo zusammen,

ich hab wieder ein kleines Problem.
Und zwar soll ich eine kleine Galerie erstellen, soweit passt das auch schon. Nun soll es aber so sein, das wenn man auf ein kleines Bild klickt es rechts groß angezeigt wird.

hier die Galerie:
http://privatwebarea.dyndns.org/pro....mp;seite=1

Ein traum wäre es, wenn es noch sanft einblenden würde.

Das ganze muss allerdings mit meinem PHP-Code harmonieren. Die Bilder kommen aus einer DB und die Tabelle wird auch entsprechend generiert.

ach ja, die js-funktion die da aufgerufen wird ist wohl eher lächerlich, aber ich möchte sie Euch nicht vorenthalten.

function show_pic(pic){
var pic;
document.gross.src="pic";
}


Hoffe Ihr könnt mir hier helfen.

LG
Alex

geschrieben von Danny am 18.02.2010 - 12:08
Hallo AlexD,

erstmal empfehle ich die Bilder nicht einfach mittels width="" und height="" zu verkleinern. Da der Browser trotzdem das gesamte Bild lädt und erst im Anschluss kleiner darstellt. Das dauert lange und das Herunterrechnen vom Browser sieht meist auch weniger gut aus ... Besser ist es vorher Thumbnails zu erzeugen und hochzuladen, oder mittels PHP und z.B. der gdlib die Bilder zu verkleinern.

Nun zum JS. Ich konnte nicht finden, dass der JS Code eingebunden wurde, die Funktion gibt es also gar nicht .. ? Weiteres Problem: Der Aufruf: Der Parameter muss als String in Anführungszeichen gesetzt werden

HTML-Quelltext
1: 

<img onclick="show_pic('./galerie/galeries/scaletti/1082-108.jpg')"  />


Wegen dem Faden würde ich mich fertiger Bibliotheken bedienen ... scriptaculous, jQuery, usw. sollten ein guter Anhaltspunkt sein.. einen FadeIn/FadeOut haben die alle..

Gruß Danny

geschrieben von AlexD am 19.02.2010 - 00:57
Hmm.. klar, wenn ich die Funktion nicht einbinde kann es auch nicht funktionieren, da hast Du natürlich vollkommen recht!!

Also hab die functions.js eingebunden, aber irgendwo ist da noch der Wurm drin, denn wenn ich auf ein Foto klicke verschwindet nun das Große ohne, dass das kleine auf das ich geklickt hab groß angezeigt wird.

Jep das mit den Thumb-Bildchen geb ich Dir vollkommen recht, da werd ich mich wohl nochmal mit beschäftigen müssen. Das werd ich nach Möglichkeit über PHP lösen.

Mit dem sanften "Einblenden" der Bilder... wär nur ein i-Tüpfelchen gewesen. Da werd ich bei Bedarf auf die von Dir angegebenen Bibliotheken zurückgreifen. Erstrangig ist, dass das mit den Bilder soweit funktioniert.

[Edit]
Das mit den Thumbnails ist jetzt umgesetzt und die Bilder sollten wesentlich schneller geladen werden.
[/Edit]

Besten Gruß
Alex

geschrieben von Danny am 19.02.2010 - 20:50
Änder al die JS Funktion wiefolgt ab

HTML-Quelltext
1: 
2: 
3: 

function show_pic(pic){
    document.gross.src=pic;
}


du hast src immer den String "pic" gegeben.


Gruß Danny

geschrieben von AlexD am 20.02.2010 - 16:59
hey Danny,

vielen Dank für die Hilfe bisher.
Soweit funktioniert das ganz gut, sogar das Einblenden mit Hilfe scriptaculous!!

Musste hier noch in meiner Funktion das div auf display:none setzten damit wieder neu gefadet wird.
Hab auch die Höhe und Breite mit angegeben, da diese immer vom ersten geladenen Bild verwendet wurden.

Ein Problemch hab ich aber noch.
Die Großen Bilder werden zwar noch verkleinert, aber wie kann ich diese Bilder "vorladen"?
Das Problem ist, ich komme nicht so ohne weiteres an den <body>-Tag ran, bzw. wenn die onLoad-Funktion aufgerufen wird stehen die Bildinfos noch nicht zur verfügung.

ach ja die aktuelle Funktion
HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 

function show_pic(pic,width,height){
    var pic;
    var width;
    var height;
    document.gross.src=pic;
    document.gross.width=width;
    document.gross.height=height;
    document.getElementById('fade_in').style.display='none';
}

// Aufruf der Funktion
$pic[$galerie['pic_pos']] = "<a href=\"#\" onClick=\"show_pic('".$setting['galerie_dir'].''.$galerie['name']."/".$galerie['image']."','".$bigsize[1]."','".$bigsize[0]."'),Effect.toggle('fade_in','appear',{duration:0.5});\"><img class=\"thumb\" src=\"".$setting['galerie_dir'].''.$galerie['name']."/thumbs/".$thumb."\" width=\"".$size[1]."\" height=\"".$size[0]."\"></a>";

// anzeigen lassen
<div id="fade_in" style="display: none;"><?php echo $pic_big[$first_pic];?></div>


[/CODE]


Gruß
Alex

geschrieben von Micha am 20.02.2010 - 20:11
Hi,

HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 

window.onload = function(e) {

// alle anderen Aufrufe vorher machen!
  var img = new Image();
  img.src = "http://exemple.org/bild.ext"
}


Micha

geschrieben von AlexD am 22.02.2010 - 17:48

geschrieben von Micha am 22.02.2010 - 20:01
Hi,

was spricht gegen:
HTML-Quelltext
1: 
2: 

var bild = new Image();
bild.src = "bild.jpg";


Das geht auch mit mehreren:

HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 

preload_image_object = new Image();
      // set image url
      image_url = new Array();
      image_url[0] = "image0.gif";
      image_url[1] = "image1.gif";

      for(var i=0; i<image_url.length; i++) 
         preload_image_object.src = image_url[i];


Micha

geschrieben von AlexD am 22.02.2010 - 21:21
Hi Micha,

das Prinzip ist mir schon klar nur peil ich grad überhaupt nicht wie ich das in meinen Code einbinden muss.

Muss das direkt in den HTML-Code oder ist das eine Funktion (wohl eher nicht).
Hab grad voll das Brett vorm Kopf.
Was kommt in die functions.js und wie ruf ich die auf und bekomm meine ganzen Bilder da rein.

Die Bilddaten kommen bei mir aus der Datenbank <?php echo $pre_load;?>, und sind nicht immer gleich viele.

Weiß echt grad nicht, wo ich die Bilddaten übergeben soll.

die form "image_url[0] = "bild.jpg"; " wäre etwas umständlich da ich die Bilddaten wie folgt in die Variable gepackt hab => 'bild1.jpg','bild2.jpg','bild3.jpg',......

Nochmal vielen Dank für die Mühen!

geschrieben von Micha am 23.02.2010 - 06:46
Hi,

nein, das ist keine Funktion. Schreib das Script in den Head-Teil Deiner Seite und passe die URLs zu den Bildern an - fertig.

Sowie JS auf ein new Image-Objekt trifft, sollte es das Bild laden.

Micha

geschrieben von AlexD am 27.02.2010 - 14:55
Hallo zusammen,

also es funktioniert soweit alles!!

Im o.g. Link könnt Ihr Euch das Ergebnis ansehen.

Jetzt ist es so, dass die Bilder \"vorgeladen\" werden. Während die Bilder geladen werden wird eine Box eingeblendet, in der \"Bilder werden geladen, bitte warten...\" steht. Zudem wird der Ladestatus mit angezeigt!!
Muss sagen, ich bin mit dem Ergebnis nun schon sehr zufrieden.

Wenn es Gründe gibt meine Lösung nicht so zu verwenden bin ich natürlich über verbesserungen jederzeit dankbar!!

In diesem Sinne vielne lieben Dank für die Hilfen hier!!

Gruß
Alex


Powered by: JBB v.2.0.4 Copyright ©2000-2006, www.javarea.de.