Erste Schritte Galerie mit Ajax selber schreiben

[gehdecke]

Hallo ich wollte ein bisschen üben und eine kleine einfache Galerie bauen. Hat jemand einen guten link oder Vllt sogar ein Code?

Lg baby

 

[Gast2]

Sprichst du von Java oder Javascript?
Gallerie und Ajax hört sich für mich eher Richtung Javascript an. Das wäre dann wohl das falsche Forum hier.

 

[gehdecke]

Na es sollte Richtung java gehen am besten mit einer Array list. Also Richtung java
Lg baby

 

[Helgon]

Wtf? Was erwartest du jetzt?

 

[L-ectron-X]

Also eine Fotogalerie für das Web? Mit Java.
Welche Technologie? Applets? JSP?
Wie soll das Ganze aussehen? Hast du schon 'ne Vorstellung davon?

 

[gehdecke]

Also mir reicht es schon wenn ich rechts die kleinen Vorschaubilder sehen kann und wenn ich eins anklicke oder per mouseover darübergehe dann soll dabeben gleich das große erscheine. ist das möglich und wenn ja wie. Kenne mich mit Ajax nicht so gut aus.

LG

 

[Gast2]

Ja ist per Ajax möglich, ist aber auch ohne Ajax möglich.

Beantworte doch zunächst mal die Fragen die bis hierhin aufgekommen sind.

 

[L-ectron-X]

Schau dir mal JAlbum an. Das ist eine Software, die aus deinen Fotos Bildergalerien in vielen verschiedenen Designs erzeugen kann.
Erzeugt werden dann Vorschaubilder und Anischten für das Web, samt fertigen HTML-Seiten.
Diese brauchst du dann nur noch auf deinen Webspace zu laden.
Mehr würde ich auch nicht machen...

 

[gehdecke]

Hallo Eike: also es sollte per jsf laufen nicht als Applet. Meine Vorstellung hatte ich ja bereits gesagt. einfach gesagt. Eine Tabelle mit 2 Spalten, rechts , oben oder unten ist egal, sollen die Vorschaubilder erscheinen. In der 2 Spalte soll einfach das Große erscheinen wenn ich auf das kleine klicke.

Ich wollte schon mit 2 Div´s arbeiten aber leider klappt das nicht:-(

Vielleicht hast Dujetzt eine Idee bzw. ein Vorschalg wo oder wie ich beginnen könnte.

Lieben Dank Marco

PS: Danke L-ectron-X aber ich wollte mir den Code wenigstens mal selber anschauen zum lernen und verstehen. Kann ich das dort auch sehen?

Danke Dake

 

[Tobse]

Wenn du von Div´s redest ist das eindeutig eine JavaScript/HTML Sache und hat mit Java nix zu tun.

JavaScript != Java

 

[L-ectron-X]

Kann ich das dort auch sehen?

Nein, das ist eine produktive Software. Die macht dir alles fertig.
Wenn du alles selbst machen willst, ist das eher nichts für dich. Vielleicht als Anregung, was man alles machen könnte.

 

[gehdecke]

Hallo Tobse mit den div´s war ja auch nur eine Idee es kann einfach sein ich will es nur einmal gesehen haben oder gelesen und gebaut haben. es sollte schon mit JAVA Faces erstellt sein und halt mit ajax gebaut sein.

l-ectron-x danke aber da sehe ich nur den html teil und weiss nicht was im hintergrund gemacht wird. Ich will es ja verstehen können sonst kann ich ja auch mit primefaces arbeiten.

PrimeFaces - ShowCase

so zum beispiel

also mit einer bean kann es schon sein

 

[gehdecke]

ich habe es mal probiert:

so sieht es bis jetzt aus und es werden nur die kleinen angezeigt beim klck passiert nicht kann mir jemand helfen?

LG

 <script type="text/javascript">
        <!--
        function loveIt()
        {
            document.getElementById("platz").src = fotos[zahl].src;
        }

        var fotos = new Array ()
        fotos[0] = new Image();
        fotos[0].src = "bild1tb.jpg";
        fotos[1] = new Image();
        fotos[1].src = "bild1.jpg";
        fotos[2] = new Image();
        fotos[2].src = "Bild2tb.jpg";
        fotos[3] = new Image();
        fotos[3].src = "Bild3tb.jpg";

        var zahl=0;

oder so?

        function vergroessern(nummer) {
            var neu = new Image();
            neu.src=nummer;

            var alt = document.images['platz'];
            alt.src = neu.src;

Html Part es sollen 2 Div sein wobei der 1 div die TB anzeigt und der 2 dann je nach klick die grossen.

<div id="content">
        <div id="bild">

            <div id="gross">
                <img id="platz" src="bild1.jpg" alt="Ansicht" />
            </div>

<div id="thumbnails">
                <a href="#" onclick="javascript:vergroessern('bild1.jpg')">

                    <img class="thumb" src="bild1.jpg" alt="#" />
                </a>

                <a href="#" onclick="javascript:loveIt()" id="Bild2">
                    <img class="thumb" src="Bild2.jpg" alt="#" />
                </a>

                <a href="#" onclick="javascript:loveIt()" id="Bild3">
                    <img class="thumb" src="Bild3.jpg" alt="#" />
                </a>

            </div>

        </div>

 

[Tobse]

Du hast keine onclick-handler für die anderen Bilder...

 

[gehdecke]

Du hast keine onclick-handler für die anderen Bilder...

okay und wie kann das aussehen stehe voll neben mir:-(((( sorry

 

[Tobse]

Ich will mal so freundlich sein und dirs einfach geben weil so werden wir nicht fertig....

Schreib das in deinen JavaScript-Teil:

function showImage(source)
{
	var img = document.getElementById("platz");
	img.src = source;
}

und in den div mit den Thumbnails kommt pro Bild dashier:

<img src="bild1tb.jpg" alt="#1" style="cursor:pointer;" onclick="showImage('bild1.jpg');" />

die Zahl musst du dann eben immer erhöhen:

<img src="bild1tb.jpg" alt="#1" style="cursor:pointer;" onclick="showImage('bild1.jpg');" />
<img src="bild2tb.jpg" alt="#2" style="cursor:pointer;" onclick="showImage('bild2.jpg');" />
<img src="bild3tb.jpg" alt="#3" style="cursor:pointer;" onclick="showImage('bild3.jpg');" />

P.S.:
Ist nicht sonderlich berühmt oder gut aber es erfüllt seinen Zweck...

 

[Spin]

Top 20 Ajax Jquery image galerie

5 Minuten einrichten fertig. Ein Galerie neu zu entwicklen macht doch keinen .... !
Mit Java ist da eh nichts anzufangen - außer das ausliefern der Bilder via REST Schnittstelle.

Plain old javascript und onclick ...come on try jQuery :rtfm:

 

[Tobse]

Plain old javascript und onclick ...come on try jQuery :rtfm:

Sag mir mal wozu man hier jQuery braucht? Das Teil soll weder schön aussehen noch spektakulär sein, da ist jQuery ein totaler Overkill.

 

[Helgon]

Sag mir mal wozu man hier jQuery braucht? Das Teil soll weder schön aussehen noch spektakulär sein, da ist jQuery ein totaler Overkill.

write less , do more

 

[Tobse]

Ok, das ist zwar ne doofe wer-hat-recht diskussion aber hier nur mal das ganze mit (purem) jquery:

<img src="bild1tb.jpg" alt="#1" style="cursor:pointer;" class="imgthumb" data-id="1" />
<img src="bild2tb.jpg" alt="#2" style="cursor:pointer;" class="imgthumb" data-id="2" />
<img src="bild3tb.jpg" alt="#3" style="cursor:pointer;" class="imgthumb" data-id="3" />

$(document).onload(function(){
	$("#thumbnails.imgthumb").each(function(){
		this.onclick(function(){
			$("#platz").get()[0].src = "bild" + this.dataset("id") + ".jpg";
		});
	});
});

Write less do more? "Warum einfach wenns auch kompliziert geht" eher

 

[gehdecke]

tobse ich danke dir und nun habe ich es auch verstanden wie es aufgebaut ist. Kurze Frage noch am Rande der Diskussion wie richte ich es ein wenn ich eine Ajax Ausgabe unter den Bildern haben will die mir sagt du hast um die Systemzeit das Foto geladen. ist das in diesen Zuge auch möglich?

LG und 1000 Dank.


PS: die Lösung vor Tobse ist die beste ))) normalerweise macht man dort ein Primeface Objekt rein und gut ist ich wollte es lernen und lerne nun richtig gut danke Tobse

 

[Spin]

Write less do more? "Warum einfach wenns auch kompliziert geht" eher

Wenn deine Lösung AJAX ist dann ist Java auch gleich Javascript

 

[Tobse]

wie richte ich es ein wenn ich eine Ajax Ausgabe unter den Bildern haben will die mir sagt du hast um die Systemzeit das Foto geladen. ist das in diesen Zuge auch möglich?

Die Systemzeit des Benutzers oder die, zu der das Bild gespeichert wurde? Wenn es ums Bild geht brauchst du tatsächlich AJAX (siehe jQuery.ajax) an sonsten kannst du mal nach "javascript Date" googlen. Die Asugabe bekommst du selbst hin

Wenn deine Lösung AJAX ist dann ist Java auch gleich Javascript

Da hast du Recht, AJAX ist es nicht. Man braucht es aber auch nicht für diesen Zweck. Das Bild liese sich natürlich über ein PHP-Script als Base64 herunterladen und dann im HTML darstellen aber das sprengt die Anforderungen und den Sinn des ganzen.

 

[gehdecke]

vielen dank es hat super geklappt danke Tobse