"Overlay"-Bildanzeige?

[tbillert]

Hallo alle,

gibt es denn irgendein Modul, was eine Bildanzeige in einer Art "Overlay" bewerkstelligt? Also Bild anklicken, und dieses geht bei abgedunkelter Website ueber dieser in grossem Format auf. In der Art wie auf

http://www.trias-verein.de/fossilien/ob ... iliden.php

dort mal auf die Fossilien-Bilder klicken. Ich habe in den Modul-Downloads gesucht, aber nichts passendes gefunden.

Danke + viele Gruesse,

Thomas.

[uniqu3]

Hi tbillert,

schau dir das Gallery Modul an http://dev.cmsmadesimple.org/projects/gallery (kann auch in TinyMCE eingebunden werden)
oder das hier http://www.i-do-this.com/blog/24/Easily ... into-pages ist zwar englisch aber mit Google Übersetzer dürfte es auch funktionieren.

[tbillert]

Hallo Goran,

danke! Und Google Translate benoetige ich nicht Sieht erstmal so aus wie das, was ich brauche - schaue ich mir im Detain an und versuche es einzubauen. Sieht nach dem ersten Ueberfliegen fuer meinen Stand recht komplex aus.

Viele Gruesse,

Thomas.

[uniqu3]

Einfach kopieren und anwenden 
Aber ich würde dir empfehlen erst das Gallery Modul zu probieren, es sind auch einige Templates in oben genannten Projekt-Link zu finden.

[tbillert]

jaja... Wenn ich mal rausgefunden habe, was so ein UDT ist, mache ich das sogar

[tbillert]

so, eingebunden. Goran, die Copy-Funktion fuer Code auf Deiner Website macht aus Einrueckungen " "s - muss man durch search + replace erst rauswerfen.

Test folgt...

Gruss,

Thomas.

[uniqu3]

Danke, ist mir aufgefallen (bin noch auf der suche nach vernünftigen syntaxhiglighter), nächstes mal "view sourccode" Funktion verwenden, funktioniert besser.

[tbillert]

hm...

Habe Deinen Tag jetzt mal eingebunden. Tut aber noch nicht... Siehe:

http://geojena.billert.de/index.php?pag ... neralfunde

Aber ich habe wohl auch noch ein generelles Problem mit dem Einfuegen von Bildern (kann aber auch meiner noch nicht richtig ausgepraegten Freundschaft zu tinyMCE liegen) - siehe:

http://geojena.billert.de/index.php?page=mineralien

Ich habe mal fuer die beiden Seiten einen Screenshot von tinyMCE drangehangen. Hast Du ne Idee, was hier noch falsch laeuft?

[Wiedmann]

gibt es denn irgendein Modul, was eine Bildanzeige in einer Art "Overlay" bewerkstelligt?

schau dir das Gallery Modul

Für einzelne Bilder könnte man auch das Lytebox Modul nehmen.

[uniqu3]

Deine Bilder sollten in uploads/images rein, sonst muss der Pfad $path = 'uploads/images';
in der UDT angepasst werden.

Einfach gesagt das Karneolperle.jpg Bild in das /uploads/images Verzeichnis speichern und im tinyMCE einfach mit {clickable_image file="Karneolperle.jpg" side="left"} aufrufen.

Oder eben

Für einzelne Bilder könnte man auch das Lytebox Modul nehmen.

Es gebe eigentlich noch einen weg.
Vom www.fancybox.net das Fancybox jQuery plugin herunterladen und alles unter /uploads/fancybox per FTP laden.
Danach im bereich in deinem Template folgendes einbinden.

Code: Select all

<__script__ type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></__script> 
<link rel="stylesheet" href="uploads/fancybox/jquery.fancybox-1.3.1.css" type="text/css" media="screen" /> 
<__script__ type="text/javascript" src="uploads/fancybox/jquery.fancybox-1.3.1.pack.js"></__script> 
<__script__ type="text/javascript" src="uploads/fancybox/jquery.easing-1.3.pack.js"></__script> 
<__script__ type="text/javascript" src="uploads/fancybox/jquery.mousewheel-3.0.2.pack.js"></__script>
<__script__ type="text/javascript"> 
$(document).ready(function() { 
$('a[href] img').each(function() {
    var linkTarget = $(this).parent().attr("href");
    var imgSrc = $(this).attr("src");
    if(linkTarget.match(/\uploads\/images\/*.*/) && imgSrc.match(/\uploads\/images\/*.*/))
    {
        $(this).parent().fancybox({
            "overlayShow": true,
            "zoomSpeedIn": 300,
            "zoomSpeedOut": 300
        });
    }
});
}); 
</__script>  
 

Danach kannst Du im TinyMCE einfach die kleinen Vorschaubilder, die Automatisch beim Upload erzeugt werden einfügen und mit großen verlinken.
Im Frontend werden diese Automatisch mit fancybox plugin verlinkt (Voraussetzung ist wieder /uploads/images Verzeichnis).
Danach sieht das ganze so aus http://demo.i-arts.eu/fancybox-autolink

Das Layout problem mit Bild links, liegt daran das float verwendet wird, also bild schwebt links.
Um es einfach zu lösen könntest Du in deinem Template Stylesheet clearfix einfügen.

Code: Select all

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
 
.clearfix {
	display: inline-block;
}
 
html[xmlns] .clearfix {
	display: block;
}
 
* html .clearfix {
	height: 1%;
}

Danach in deinem Seiten-Template auf ändern.

[tbillert]

Hallo Goran + Wiedmann,

vielen Dank fuer Eure Muehe und die umfangreichen Antworten! Ich bin das heute Abend mal nach und nach durchgegangen, mit mittelmaessigem Erfolg.

Ich nehme mal beide Problematiken auseinander:

1. Bilder links bzw. rechts anordnen und vom Text umfliessen lassen

Link dazu: http://geojena.billert.de/index.php?page=mineralien

Goran, ich habe Deine Zeilen bezueglich clearfix dem CSS hinzugefuegt. Da standen schon aehnliche Geschichten, die habe ich auskommentiert. Erfolg: leider keiner. Da ich nicht verstehe, was hier passiert, stecke ich bei diesem Problem fest. Das betrifft auch nur float: left bzw. right, alle anderen Anordnungen des Bildes funktionieren.


2. Overlay-Anzeige von Bildern

Link dazu: http://geojena.billert.de/index.php?pag ... neralfunde

2.1. Goran's Methode
(siehe http://www.i-do-this.com/blog/24/Easily ... into-pages)

Das gibt mir weitehin die angezeigte Fehlermeldung (siehe Link). Bilder liegen in upload/images, dieser Pfad ist auch im UDT gesetzt.
Diese Methode hat den Nachteil, dass ich Bilder nicht in Unterverzeichnissen von upload/images organisieren kann. Bei den Massen, die da kommen, wenn die Seite gefuellt wird, ist das eher von Nachteil.

2.2. Lytebox

Habe ich zum Funktionieren bekommen, klappt sehr gut. Offenbar erzeugt das Modul auch gleich beim Upload der Bilder einen Thumbnail (thumb_imagename.jpg), dieser wird im Bilderbrowser nicht angezeigt. Bilder koennen problemlos in Unterverzeichnissen liegen.
Einziges Manko noch: ich weiss noch nicht, wie ich auf diese Art eingebundene Bilder vom Text umfliessen lassen kann. Eine align-Option kennt das Modul nicht. Hat jemand dazu ne Idee?

2.3. Fancybox

Habe ich nach Goran's Anleitung installiert und eingebunden (die Namen der Scripte im Templateeinschub musste ich noch anpassen, jetzt ist eine andere Version aktuell). Doch wie benutzen? Ich habe also mal einen Thumbnail (erzeugt von Lytebox, Fancybox erzeugt hier offenbar keine eigenen Thumbnails) in TinyMCE eingebunden - was nur manuell geht, da die Thumbnails nicht im Bilderbrowser angezeigt werden - und ueber den Link-Button mit dem "grossen" Bild verknuepft. Mit dem Resultat, dass das grosse Bild halt einfach angezeigt wird, leider nicht in einem schicken Overlay.
Was habe ich hier falsch gemacht?
Da Fancybox offenbar aber auch nur mit Bildern aus upload/images arbeitet, sollte ich mich wohl auf Lytebox konzentrieren. Bleiben also die Fragen zur Formtierung aus 2.2.

Viele Gruesse und schoene Weihnachten,

Thomas.

[tbillert]

2.2. Lytebox

Habe ich zum Funktionieren bekommen, klappt sehr gut. Offenbar erzeugt das Modul auch gleich beim Upload der Bilder einen Thumbnail (thumb_imagename.jpg), dieser wird im Bilderbrowser nicht angezeigt. Bilder koennen problemlos in Unterverzeichnissen liegen.

aaaah... Ich habe mal in die Konfiguration von TinyMCE geschaut - der macht das. Dort kann man setzen, dass a) beim Hochladen von Bildern davon Thumbs erzeugt werden, und man kann die Anzeige dieser im Dateibrowser auch einschalten.

Gruss,

Thomas.

[uniqu3]

Hi tbillert,

erstmal Frohe Weihnachten an alle leser  :)
Die Fancybox methode dürfte nicht funktionieren da ich keine Funktion in deinem Template sehe.

Code: Select all

{literal}
<__script__ type="text/javascript"> 
$(document).ready(function() { 
$('a[href] img').each(function() {
    var linkTarget = $(this).parent().attr("href");
    var imgSrc = $(this).attr("src");
    if(linkTarget.match(/\uploads\/images\/*.*/) && imgSrc.match(/\uploads\/images\/*.*/))
    {
        $(this).parent().fancybox({
            "overlayShow": true,
            "zoomSpeedIn": 300,
            "zoomSpeedOut": 300
        });
    }
});
}); 
</__script>
{/literal} 

Aber da Lytebox Modul für dich zufriedenstellend ist konzentrieren wir uns darauf  :)
Ich habe das Modul leider noch nie ausprobiert daher blöde frage, gibt es eine Option mit klassen für Bilder?
Du könntest so etwas in deinem Stylsheet einfügen:

Code: Select all

img.alignright {
  margin: 4px 0 4px 4px;
  display: inline;
}
img.alignleft {
  margin: 4px 4px 4px 0;
  display: inline;
}
.alignright {
  float: right;
}
.alignleft {
  float: left;
}

Das sorgt dafür das Bilder links oder rechts schweben, je nach dem wie Du die klassen zuweist.
Natürlich müssen die Bilder class="alignleft" oder class="alignright" haben.
Das clearfix Problem kannst Du zum beispiel auch so lösen, im tinyMCE  Editor und HTML modus mit nach jeden abschnitt einfügen.

[tbillert]

Hallo Goran,

vielen Dank fuer Deine Hilfe und sorry fuer die Verzoegerung meiner Antwort - genau, es war Weihnachten, und meine Familie wollte mich nicht nur vorm Rechner sitzen sehen

- bezueglich Fancybox: doch doch, dieser Code stand/steht in meinem Template. Ich hatte den ganzen Block aus Deinem Posting weiter oben hineinkopiert.

- bezueglich Lytebox: danke. Ich sehe aber keine Moeglichkeit, den Bildern eine Klasse zuzuweisen. Zumindest steht dazu nix in der Hilfe zum Modul. Ich werde dazu aber nochmal ein separates Posting absetzen.

- bezueglich Clearfix: danke, damit geht es. Jetzt wird mir das Problem auch klarer. Ein simples tut es aber uebrigens auch.

Viele Gruesse,

Thomas.

[Wiedmann]

- bezueglich Lytebox: danke. Ich sehe aber keine Moeglichkeit, den Bildern eine Klasse zuzuweisen.

(optional) thumbextra="" - any extra attribute(s) you want give the IMG element