Fancy Image anzeigen

[Birgit Weninger]

Hallo,

ich möchte auf meiner Homepage Images von meiner Reise anzeigen. Je nachdem welche Reise man klickt, sollten die Bilder dieser Reise als Thumpnail angezeigt werden. Wenn man dann auf ein Bild klickt, sollte dieser größer angezeigt werden.
Ich habs mit fancybox schon probiert:

  
<a rel="example_group" title="" href="http://farm3.static.flickr.com/2591/4135665747_3091966c91.jpg">  
                                <img alt="" src="http://farm3.static.flickr.com/2591/4135665747_3091966c91_m.jpg" />  
                        </a>  

Ich weiß aber jetzt nicht, wie ich das mit den verschiedenen Reisen realisieren soll, sodass eben, wenn ich z.B.: Kanada klicke nur die Tumpnails von Kanada dargestellt werden, und wenn ich USA klicke, dass dann nur die Tumpnails von den USA angezeigt werden.

Ich habe mir gedacht, am einfachsten wäre es, wenn ich die Bilder in meiner Datenbank speichere, aber wie ich das dann mit der Fancybox realisieren kann ist mir nicht klar, da ich ja kein href in die Datenbank setzen kann.

Wie kann ich das am einfachsten realisieren mit jQuery? Habt ihr da eine Idee?
Vielen Dank.
lg

[Felix Riesterer]

Liebe Birgit,

ich weiß ja nicht, was "tump" ist, aber mit tumb kenne ich mich aus.

Dein Anliegen lässt sich mit reinen HTML/XHTML-Mitteln nicht lösen. Daher habe ich den Themenbereich auf "Javascript" gestellt.

Wie kann ich das am einfachsten realisieren mit jQuery? Habt ihr da eine Idee?

Du könntest mit jQuery sicherlich Teile Deiner Seite zusammenfalten, um sie auf einen Klick oder eine Auswahlbox hin entsprechend wieder auseinander zu falten. Damit kannst Du dann Deine Reisen voneinander trennen.

Als Dokumentstruktur bräuchtest Du in etwa sowas:

  
<p>Bilder zu folgender Reise anzeigen: <select id="auswahl">  
    <option value="amerika-reise">Amerika-Reise</option>  
    <option value="kanada-reise">Kanada-Reise</option>  
    <option value="...-reise">...-Reise</option>  
</select></p>  
<div id="amerika-reise">  
    <h2>Amerika-Reise</h2>  
    <p>Bilder lassen sich durch Anklicken vergrößern.</p>  
    <ul>  
        <li> ... <a href ...</li>  
        <li> ... </li>  
        ...  
    </ul>  
</div>  
<div id="kanada-reise">  
    <h2>Kanada-Reise</h2>  
    <p>Bilder lassen sich durch Anklicken vergrößern.</p>  
    <ul>  
        <li> ... <a href ...</li>  
        <li> ... </li>  
        ...  
    </ul>  
</div>  
<div id="...-reise">  
</div>

Ich habe die Fancybox nie benutzt, deshalb weiß ich nicht, ob die in den jeweiligen Listen abgelegten Thumbnails dann auch als abgegrenzte Galerie "durchklickbar" sind, oder ob im obigen Beispiel der letzte Link der Amerika-Reise nicht als Nachfolgebild das erste von der Kanada-Reise ansteuert.

Da ich mit jQuery noch nie gearbeitet habe, kann ich Dir auch nicht aus dem Hut zaubern, wie Du das Umschalten und Verstecken der Bereiche machen kannst.

Liebe Grüße,

Felix Riesterer.

[Birgit Weninger]

Am liebsten wäre mir eine Lösung mit jQuery bzw. jquery.fancy.js, da ich mit dem schon herumprobiert habe.
Was ich brachen würde wäre nur statt

  
<a rel="example_group" title="" href="http://farm3.static.flickr.com/2591/4135665747_3091966c91.jpg">  
                                <img alt="" src="http://farm3.static.flickr.com/2591/4135665747_3091966c91_m.jpg" />  
                        </a>  

sowas:

  
$.ajax({  
        url: 'ladeTumbnails.htm',  
        data: ({ziel: reisename}),  
        success: function(xml) {  
            /* setze die Tumbnails in die HTML- Seite */  
            }  
       });  
  
wenn ein Tmbnail angeklickt wurde:  
  
$.ajax({  
        url: 'ladeGeklicktesTumbnails.htm',  
        data: ({ziel: reisename}),  
        success: function(xml) {  
            /* zeige das Bild größer an */  
            }  
       });  

[ChrisB]

Hi,

wenn ein Tmbnail angeklickt wurde:

$.ajax({
        url: 'ladeGeklicktesTumbnails.htm',
        data: ({ziel: reisename}),
        success: function(xml) {
            /* zeige das Bild größer an */
            }
       });
[/code]

Warum willst du ein HTML-Dokument laden, wenn der Nutzer eigentlich nur eine größere Version eines Bildes sehen will?

Lass einfach nur die größere Version des Bildes laden und innerhalb der Seite darstellen - dazu ist die Fancybox doch gedacht, also versuche nicht ihr Funktionsprinzip auf irgendwelchen Umwegen zu unterlaufen; sondern beschäftige dich stattdessen damit, wie du die Fancybox nach deinen Wünschen konfigurieren kannst.

MfG ChrisB

[Birgit Weninger]

Also ich weiß jetzt nicht wie das gemeint ist?
Soll ich meine Bilder jetzt auch auf Flickr laden und in meiner WebAppl auf diese Bilder verweisen oder wie würdet Ihr das machen ?

[ChrisB]

Hi,

Also ich weiß jetzt nicht wie das gemeint ist?
Soll ich meine Bilder jetzt auch auf Flickr laden und in meiner WebAppl auf diese Bilder verweisen oder wie würdet Ihr das machen ?

Nein, die kannst du ruhig auf deinen eigenen Webspace laden, wenn du genug Platz dafür hast.

MfG ChrisB

[Birgit Weninger]

Naja, ich hab noch keinen Webspace, geht das dann auch mit Flickr.
Wenn ich die Verweise zu den Bildern hardcoded im HTML Code habe dann muss ich jedes mal bei einer Änderung das neue *.html auf den WebServer hochladen, oder!?

[O'Brien]

Hi.

Naja, ich hab noch keinen Webspace, geht das dann auch mit Flickr.
Wenn ich die Verweise zu den Bildern hardcoded im HTML Code habe dann muss ich jedes mal bei einer Änderung das neue *.html auf den WebServer hochladen, oder!?

Wohin willst du denn die HTML-Dateien hochladen, wenn du keinen Webspace hast?

Geht das nur mir so, oder gibt es hier noch andere, die sich an James Deans vorletzten Film erinnert fühlen?

Schönen Sonntag noch!
O'Brien

[Der Martin]

Hallo,

Naja, ich hab noch keinen Webspace, geht das dann auch mit Flickr.

wenn man die dort gehosteten Bilder auch direkt referenzieren kann und darf, sicher. Für das eigentliche Dokument bzw. das Galerie-Script braucht man natürlich immer noch eigenen Webspace, so dass sich die Frage stellt: Wozu die Bilder noch einem fremden Dienst anvertrauen? Dann kann man ja auch gleich die Galerien komplett bei flickr anlegen und mit deren Möglichkeiten glücklich werden.

Wenn ich die Verweise zu den Bildern hardcoded im HTML Code habe dann muss ich jedes mal bei einer Änderung das neue *.html auf den WebServer hochladen, oder!?

Ja.

Wohin willst du denn die HTML-Dateien hochladen, wenn du keinen Webspace hast?

Birgit schrieb: _noch_ nicht.

Geht das nur mir so, oder gibt es hier noch andere, die sich an James Deans vorletzten Film erinnert fühlen?

Geht mir nicht so, ich kenne keinen seiner Filme. Aber meinst du vielleicht Rebel Without A Cause mit dem deutschen Titel "Denn sie wissen nicht was sie tun"? Dann kann ich deinen Gedankengang in etwa nachvollziehen ...

Ciao,
 Martin

[O'Brien]

Hi.

Wohin willst du denn die HTML-Dateien hochladen, wenn du keinen Webspace hast?

Birgit schrieb: _noch_ nicht.

Sie fragt aber auch, ob sie die Bilder bei Flickr einstellen und darauf verweisen kann. Also muss sie ja irgendwo ihre Webseite unterbringen, von der aus ihre zu erstellende Galerie auf die Bilder bei Flickr verweist. AFAIK kann man bei Flickr jedenfalls keine eigenen Webseiten hochladen.

Geht das nur mir so, oder gibt es hier noch andere, die sich an James Deans vorletzten Film erinnert fühlen?

Aber meinst du vielleicht Rebel Without A Cause mit dem deutschen Titel "Denn sie wissen nicht was sie tun"? Dann kann ich deinen Gedankengang in etwa nachvollziehen ...

Yep.

Ähnliches Problem habe ich ja kürzlich erst bei nemokiddy gesehen und frage deshalb ganz ernst: Wie geht man mit Fragenden um (d. h. wie kann man ihnen am besten helfen), bei denen man nicht mal ansatzweise erahnen kann, auf welchem Kenntnisstand sie sich befinden, weil sie so viele Dinge durcheinanderwerfen und anscheinend nicht im Geringsten verstehen, was man ihnen sagt?
(Achtung Gunnar: neue Zeile ohne Absatz:) Hilft es ggf., alle für die Lösung des Problems erforderlichen Kenntnisse erst einmal Stück für Stück auf ihr Vorhandensein abzufragen, um dann - ebenfalls Stück für Stück nach dem Eichhörnchenprinzip - die noch fehlenden Kenntnisse beizubringen?

Schönen Sonntag noch!
O'Brien

[Felix Riesterer]

Lieber O'Brien,

Hilft es ggf., alle für die Lösung des Problems erforderlichen Kenntnisse erst einmal Stück für Stück auf ihr Vorhandensein abzufragen, um dann - ebenfalls Stück für Stück nach dem Eichhörnchenprinzip - die noch fehlenden Kenntnisse beizubringen?

Gegenfrage: Ist uns als Poster ein solches Vorgehen zumutbar, oder darf man von Fragenden hier mehr Entgegenkommen erwarten? Immerhin ist das hier ein Fachforum für Fachfragen. Um die gegebenen Fach-Antworten auch zu verstehen, muss man als Fragender gewisse Voraussetzungen mitbringen. Wenn man die nicht hat, ist man hier vielleicht doch an der falschen Adresse...

Ich finde es gleichwertig gut oder schlecht, wenn man anstatt einen solchen Thread zu ignorieren den Poster auf seine fehlenden Kenntnisse hinweist. Immerhin wurde ja eine Gratisantwort erwartet - und bei zuvielen fehlenden Voraussetzungen ist gratis eben nicht mehr machbar.

Meine Meinung. Man darf dazu eine andere haben.

Liebe Grüße,

Felix Riesterer.

[O'Brien]

Hi.

Hilft es ggf., alle für die Lösung des Problems erforderlichen Kenntnisse erst einmal Stück für Stück auf ihr Vorhandensein abzufragen, um dann - ebenfalls Stück für Stück nach dem Eichhörnchenprinzip - die noch fehlenden Kenntnisse beizubringen?

Gegenfrage: Ist uns als Poster ein solches Vorgehen zumutbar, oder darf man von Fragenden hier mehr Entgegenkommen erwarten?

Diese Frage muss wohl jeder für sich selbst beantworten, und zwar von Fall zu Fall erneut. Ich denke schon, dass man ein gewisses Mitdenken und Entgegenkommen erwarten darf. Allerdings zähle ich mich nicht zu den Koniferen hier im Forum, die wirklich fachlich fundierte Auskunft zu den SELFHTML-Fachthemen geben können. Insofern stellt sich mir die Frage nur sehr selten.

Ich finde es gleichwertig gut oder schlecht,

Das heißt, du hast keine Meinung dazu, oder wie verstehe ich diese Formulierung?

wenn man anstatt einen solchen Thread zu ignorieren den Poster auf seine fehlenden Kenntnisse hinweist. Immerhin wurde ja eine Gratisantwort erwartet - und bei zuvielen fehlenden Voraussetzungen ist gratis eben nicht mehr machbar.

Ob das gratis noch machbar ist, hängt von deiner Antwort auf die obige Frage ab. Und die hängt wiederum von deiner Geduld und deiner verfügbaren Zeit ab.

Meine Meinung. Man darf dazu eine andere haben.

Du bist ja heute echt großzügig, so kennen wir dich ja gar nicht. ;)

Schönen Sonntag noch!
O'Brien

[Felix Riesterer]

Liebe Birgit,

Am liebsten wäre mir [...]

was hast Du an meiner Antwort überhaupt verstanden?

Liebe Grüße,

Felix Riesterer.

[O'Brien]

Hi.

ich weiß ja nicht, was "tump" ist, aber mit tumb kenne ich mich aus.

Sind deine Schüler sooo schlimm? ;)

SCNR

Schönen Sonntag noch!
O'Brien

[Felix Riesterer]

Lieber O'Brien,

Sind deine Schüler sooo schlimm? ;)

ja, sie waren es. Jetzt ist Sommerpause.

Liebe Grüße,

Felix Riesterer.

[ChrisB]

Hi,

Ich weiß aber jetzt nicht, wie ich das mit den verschiedenen Reisen realisieren soll, sodass eben, wenn ich z.B.: Kanada klicke nur die Tumpnails von Kanada dargestellt werden, und wenn ich USA klicke, dass dann nur die Tumpnails von den USA angezeigt werden.

Beispielweise, in dem du diese Bilder auf zwei Unterseiten aufteilst - eine, die sich um deine Reise nach Kanada, und eine, die sich um deine Reise in die USA dreht.

Ich habe mir gedacht, am einfachsten wäre es, wenn ich die Bilder in meiner Datenbank speichere

Nein, in einer Datenbank sind Bilder selten sinnvoll untergebracht. Höchstens die Pfade zu den Bildern sind dort sinnvoll abgelegt. Aber wenn du noch Anfängerin bist, vergiss die Datenbank bitte erst mal wieder - mach dir nicht noch mehr Baustellen auf einmal auf, wenn du schon mit jQuery deine Probleme hast.

MfG ChrisB

[pete]

[off topic]

Hi Chris

Nein, in einer Datenbank sind Bilder selten sinnvoll untergebracht. Höchstens die Pfade zu den Bildern sind dort sinnvoll abgelegt.

Gibt es eigentlich einen Weg, Bilder in einem Ordner vor dem direkten Zugriff zu schützen, aber diese dann auf der Seite einzubauen? Beispielsweise in einem Bereich, der per session passwortgeschützt ist.

Ich konnte auch schon auf bezahlten Inhalt zugreifen, als mir aufgefallen ist, dass die Links zum unbezahlten doch sehr einfach gestrickt waren - die direkten Links zum eigentlich nur für angemeldete User zugänglichen Teil waren direkt daraus abzuleiten.

Gruss

[ChrisB]

Hi,

Gibt es eigentlich einen Weg, Bilder in einem Ordner vor dem direkten Zugriff zu schützen, aber diese dann auf der Seite einzubauen?

Ja, wenn bspw. man die Auslieferung nicht dem Webserver überlässt, sondern diese Aufgabe einem Script überträgt.

MfG ChrisB

[molily]

Hallo,

Ich weiß aber jetzt nicht, wie ich das mit den verschiedenen Reisen realisieren soll, sodass eben, wenn ich z.B.: Kanada klicke nur die Tumpnails von Kanada dargestellt werden, und wenn ich USA klicke, dass dann nur die Tumpnails von den USA angezeigt werden.

Aus der Dokumentation:

http://fancybox.net/howto

»Note - Galleries are created from elements who have the same "rel" tag«

Das heißt, du kannst in einem Dokument zwei Galerien einbinden, indem die jeweiligen a-Elemente gleiche rel-Attributwerte haben. Beispielsweise:

<ul class="galerie">  
 <li><a rel="amerika" href="amerika1-gross.jpg"><img src="amerika1-klein.jpg" alt="..."></a></li>  
 <li><a rel="amerika" href="amerika2-gross.jpg"><img src="amerika2-klein.jpg" alt="..."></a></li>  
 <!-- usw. -->  
</ul>  
  
<ul class="galerie">  
 <li><a rel="kanada" href="kanada1-gross.jpg"><img src="kanada1-klein.jpg" alt="..."></a></li>  
 <li><a rel="kanada" href="kanada2-gross.jpg"><img src="kanada2-klein.jpg" alt="..."></a></li>  
 <!-- usw. -->  
</ul>

Der JavaScript-Aufruf dazu:

$(".galerie a").fancybox();

Mathias

[Birgit Weninger]

$(".galerie a").fancybox();

Hallo Mathias,

mit der Zeile oben kann ich jetzt weniger anfangen (bzw. mit fancybox()).
Ich könnte ja auch einfach mit show() und hide() arbeiten und einfach einmal USA und einmal Kanada anzeigen, oder?

[molily]

Hallo,

$(".galerie a").fancybox();

mit der Zeile oben kann ich jetzt weniger anfangen (bzw. mit fancybox()).

Du sagtest doch, du verwendest jQuery Fancybox und möchtest auch eine Lösung damit. Daraus schloss ich, dass es sich um das Script http://fancybox.net/ handelt. Obiger Aufruf wendet dieses Script auf die Links in einer Galerie an. Benutzt du etwa nicht dieses Script und einen solchen Aufruf?

Ich könnte ja auch einfach mit show() und hide() arbeiten und einfach einmal USA und einmal Kanada anzeigen, oder?

Ja. Aber das löst nicht das Problem, dass in dem Overlay von Fancybox sämtliche Bilder anstatt nur die aus einer Reise durchgeschaltet werden können. Für diese Aufgabe habe ich eine Lösung genannt, da ich dachte, du fragst danach. ;)

Mathias