Re: [de-discuss] [web] Bilder-Popup für Screenshots (colorbox)

Hi Thomas, *,

2010/11/20 Thomas Hackert <hackertenator@googlemail.com>:
> On Sat, Nov 20, 2010 at 02:48:12AM +0100, Christian Lohmaier wrote:
> > 2010/11/19 Thomas Hackert <thackert@nexgo.de>:
> > > On Fri, Nov 19, 2010 at 05:54:22AM +0100, Christian Lohmaier wrote:
> >
> > http://pumbaa.ooodev.org:7780/colorbox/
> >
> > Was colorbox prinzipiell kann steht hier: http://colorpowered.com/colorbox/
>
> [Seite zu technisch]
> :( Das einzige, was ich aus der Seite beim flüchtigen Überfliegen
> rausgelesen habe ist, dass es JS-Code ist,

Ja, genau.

> MySQL, einen Webserver
> und PHP benötigt.

Und das stimmt schon nicht :-)

jQuery (ebenfalls Javascript) wird benötigt, sonst nix.

> > Reicht es aus, wenn man einen Ordner auswählen kann und ggf eine
> > checkbox "rekursiv" anhakt und dann eine Seite mit
> >
> > <frei bestimmbarer Text>
> > <Bilderthumbnails>
> >
> > bekommt?
>
> MMn ja. Was meinen die anderen hier dazu?

Das ist die Preisfrage :-)

> > > [...]
> Du hast dort ja zu jedem Modul beschreibenden Text und dann ein oder
> mehrere Bildschirmfotos. Die sind ja – wie auf
> http://de.openoffice.org/product/index.html – per <img src=...>
> eingebettet. Jetzt würde mich mal interessieren, ob du beabsichtigst
> dafür dann ColorBox benutzen willst (auf deren HP wäre das dann in
> etwa
>
> <quote>
> $("#inline").colorbox({inline:true, href:"#myForm"});
> </quote>

Nee, nicht ganz. Das erste $("#inline") ist der von jQuery
bereitgestellte Element-Selektor - in dem Fall würdest Du das Element
mit der ID "#inline" auswählen.
Was Du meinst ist wohl eher "$("img.colorbox"), das würde dann auf
alle <a class="colorbox" ....> passen

Mal das Beispiel von der OOo-Seite http://de.openoffice.org/product/calc.html

<a href="images/Calc_big.png" title="Klicken f&uuml;r
gr&ouml;&szlig;ere Version">
        <img src="images/Calc_thb.png" width="300" height="181" alt="Calc"
style="float:right; margin:5px" />
</a>

Im img-Tag selber steckt die Info zum Originalbild nicht mit drin,
also gibt es drumherum einen Link zum großen Bild., sprich man kann
colorbox an den Link binden.

Zum Rest des Kommandos:
colorbox({inline:true, href:"#myForm"});

paßt auch nicht ganz. inline:true bedeutet: "Der Inhalt, der von
Colorbox angezeigt werden soll befindet sich schon im Quelltext der
aktuellen Seite" - stimmt also nicht (wäre in dem Fall die Anweisung:
Zeige den Inhalt des Elements mit der id "#myForm" in einem
Colorbox-Fenster.
<div style="display:none;"> //verseckt den Inhalt
<div id="myForm">//der inhalt hier würde von Colorbox angezeigt werden</div>
</div>

Gebraucht wird bei <a href="ziel"> tages nix weiter: colorbox() reicht
aus, dann wird "ziel" im Colorboxfenster geladen, mit den sonstigen
Standardeinstellungen.

wäre as <img src="thumbnail"> die Basis, dann müßte man
colorbox({href=<funktion, die irgendwie den Link zur nicht-thumbnail
Version herausbekommt>}) verwenden.

Und das ist die Schwierigkeit dabei: Der Seitenbastler müßte für jedes
Bild einen entsprechenden Link zum Originalbild einfügen.

Silverstripe erstellt ja, wenn man ein Bild verkleinert entsprechende
Thumbnails und verlinkt diese. in einem <img>-Tag landet immer nur ein
Bild mit der Anzeigegröße, der Browser muß nie was skalieren.

Mal einen Exkurs zur colorbox-Testseite auf Pumbaa:
<a href="/assets/slides/scaled/hypocycloid-small.png"
rel="colorbox"><img
src="/assets/slides/scaled/_resampled/SetRatioSize8080-hypocycloid-small.png"
alt="hypocycloid-small.png" /></a>

_resampled/SetRatioSize8080-<name>

Das Bild wurde im Code mit der Funktion SetRatioSize auf die
Entsprechende Größe gestaucht (max 80x80, aber Seitenverhältnis
beibehalten) und Silverstripe macht dafür den entsprechenden
Thumbnail.
Bei einem manuell im Editor vergrößert/verkleinerten Bild wäre der
Name sowas wie
 _resampled/resizedimage100133-<name>
Es wäre also möglich, ein _resampled/.... zu entfernen (sprich
_resampled/<alles bis einschließlich des ersten -> rausschmeißen) und
so den originalen Link zu erhalten.

Dann ginge es auch ohne zusätzlichen <a>-Tag drumherum. Aber auch nur,
wenn der Thumbnail ein automatisch generierter ist, wenn er extra
generiert wurde (Qualitätsgründe oder weil er einfach schon da war),
dann braucht man doch wieder von irgendwoher die Zusatzinformation.

> , wenn ich das richtig interpretiere ... ;) Und wenn ich deren Seite
> richtig verstanden habe, können dann ja auch Bilder in einer
> HTML-Seite integriert werden, oder nicht?

Nee, das macht sich nicht gut - Binärdaten im HTML - das funktioniert nicht :-)

> Damit hast du mir schon die Frage beantwortet ... ;) Sorry, wenn das
> eine schwere Geburt war ... :( Ich wusste einfach nicht, wie ich das
> am Besten mit der richtigen Terminologie in Worte packen soll ... :(

"Geht das auch für einzelne Bilder" oder sowas in die Richtung :-))

ciao
Christian

--
E-Mail to discuss+help@de.libreoffice.org for instructions on how to unsubscribe
List archive: http://de.libreoffice.org/lists/discuss/
*** All posts to this list are publicly archived for eternity ***