Neuigkeiten:

moziloCMS verwendet Cookies. Wenn Sie auf unserer Seite weitersurfen, stimmen Sie der Cookie-Nutzung zu Datenschutzerklärung
moziloCMS Layouts
moziloCMS Plugins

Hauptmenü

bildlinks/bildrechts per JavaScript "aufpoppen" lassen

Begonnen von azett, 03. Juni 2009, 19:04:32

« vorheriges - nächstes »

azett

Ziel:
Links- und rechtsausgerichtete Bilder ("bildlinks"/"bildrechts") sollen per JavaScript effektvoll in voller Größe dargestellt werden. Zum Einsatz kommt das für nichtkommerzielle Zwecke kostenlose Script HighSlide.

Screenshot 1
Screenshot 2
Beispiel auf privat.azett.com


Vorgehen:
HighSlide in seiner aktuellen Version herunterladen und entpacken. Aus dem entpackten Archiv das Verzeichnis highslide ins moziloCMS-Wurzelverzeichnis laden.

template.html des verwendeten CMS-Layouts anpassen, folgendes innerhalb des <head>-Bereichs einfügen:        <!-- HIGHSLIDE -->
        <script type="text/javascript" src="highslide/highslide.js"></script>
        <script type="text/javascript" src="highslide/highslide-with-gallery.js"></script>
        <link rel="stylesheet" type="text/css" href="highslide/highslide.css" />
        <script type="text/javascript">
        hs.graphicsDir = 'highslide/graphics/';
        hs.align = 'center';
        hs.transitions = ['expand', 'crossfade'];
        hs.wrapperClassName = 'dark borderless floating-caption';
        hs.fadeInOut = true;
        hs.dimmingOpacity = .75;
       
        // Add the controlbar
        if (hs.addSlideshow) hs.addSlideshow({
        //slideshowGroup: 'group1',
        interval: 5000,
        repeat: false,
        useControls: true,
        fixedControls: 'fit',
        overlayOptions: {
        opacity: .6,
        position: 'bottom center',
        hideOnMouseOut: true
        }
        });
        </script>
        <!-- /HIGHSLIDE -->
Jetzt steht uns die gesamte HighSlide-JavaScript-Funktionalität im CMS zur Verfügung. Nun erstellen wir benutzerdefinierte Syntaxelemente, die "bildlinks" und "bildrechts" mit HighSlide zusammenbringen: highslide_bildlinks = [html|<a href="download.php?cat={CATEGORY}&amp;file=fullsize_{VALUE}" class="highslide" onclick="return hs.expand(this,{wrapperClassName: 'borderless floating-caption', dimmingOpacity: 0.7, align: 'center'})">][bildlinks={DESCRIPTION}|{VALUE}][html|</a>]
highslide_bildrechts = [html|<a href="download.php?cat={CATEGORY}&amp;file=fullsize_{VALUE}" class="highslide" onclick="return hs.expand(this,{wrapperClassName: 'borderless floating-caption', dimmingOpacity: 0.7, align: 'center'})">][bildrechts={DESCRIPTION}|{VALUE}][html|</a>]
Das sieht erstmal nach viel Zauber aus, ist aber an sich sehr einfach. Mittendrin ist das eigentliche Bild:
  • [bildlinks={DESCRIPTION}|{VALUE}]
Rundherum liegt der HighSlide-Link (das Fullsize-Bild wird über die download.php ausgeliefert, damit der Downloadzähler von moziloCMS mitzählt):
  • [html|<a href="download.php?cat={CATEGORY}&amp;file=fullsize_{VALUE}" class="highslide" onclick="return hs.expand(this,{wrapperClassName: 'borderless floating-caption', dimmingOpacity: 0.7, align: 'center'})">]

Nun wollen wir die neuen Syntaxelemente aber auch ausprobieren! Dafür laden wir ein Bild "test.jpg" hoch, das wird dann in der Inhaltsseite angezeigt (und sollte nicht zu groß sein - am besten genau so breit, wie img.left/rightcontentimage im CSS des Layouts definiert wurde). Dann brauchen wir noch die große Version des Bildes, die HighSlide beim Klick auf das kleine Bild nach vorn bringen soll.
Wichtig: Das große Bild muß genau wie das kleine heißen, aber mit vorangestelltem "fullsize_", also in unserem Fall "fullsize_test.jpg".
Auch wichtig: Beide Bilder müssen in der selben Kategorie liegen wie die Inhaltsseite, in der sie eingebunden werden sollen - sonst klappts nicht ;)

Die Bilder sind hochgeladen, jetzt bauen wir sie endlich in die Inhaltsseite ein! [highslide_bildrechts=Der Untertitel zum Bild.|test.jpg]Ganz viel Text, der das Bild umfließt. Ganz viel Text, der das Bild umfließt. Ganz viel Text, der das Bild umfließt. ...

Fertig :)
Die HighSlide-Parameter im Link sowie in der template.html lassen sich nach allen Regeln der Kunst anpassen - so lassen sich z.B. verschiedene Rahmenformen für die Bilder definieren. Wie das geht und was man mit HighSlide noch so anstellen kann, steht auf der HighSlide-Website.

maiemi

#1
wäre es nicht möglich den Code als *.js - Datei zu speichern und mit
<script type="text/javascript" src="http://www.....blabla.js"></script>

im HEAD Bereich zu laden ?

Das würde den Quelltext der einzelnen Site kleiner machen und hätte den Vorteil, dass man ein zentrales js-script zum Pflegen hätte....

rolinux

#2
Hallo azett,

das Script funktioniert wunderbar! Hab's auf www.badischer-dachshund.de in Zucht/Deckrüdenliste eingebaut. Super!
Und wenn JavaScript ausgeschaltet ist, wird das größere Bild auf herkömmliche HTML-Art angezeigt. So muss das sein.

Gruß
rolinux
"Vergiss nie, dass die Musik viel zu wichtig ist,
um sie ganz den Profis zu überlassen."
(Robert Fulghum, amerikanischer Philosoph)

"Die Deutsche Rechtschreibung ist Freeware, du darfst sie kostenlos nutzen.
Allerdings ist sie nicht Open Source, d.h. du sollst sie nicht verändern oder in veränderter Form veröffentlichen."
(Verfasser unbekannt)

azett

#3
Zitat von: "maiemi"wäre es nicht möglich den Code als *.js - Datei zu speichern und mit
<script type="text/javascript" src="http://www.....blabla.js"></script>

im HEAD Bereich zu laden ?
Gute Idee, muß ich nur mal zu kommen ;) Wenn das jemand anderes schon gemacht hat oder gern machen möchte, nur zu; ich würde das Eröffnungsposting dann entsprechend anpassen. Danke!

azett

#4
Update: Ich habe das Eröffnungsposting so modifiziert, daß der Downloadzähler von moziloCMS jedes "Aufpoppen" der Bilder mitzählt.

Wer das Script schon im Einsatz hat und diese Anpassung auch gern machen möchte, ändert einfach die Definition der beiden Syntaxelemente von highslide_bildlinks = [html|<a href="kategorien/{CATEGORY}/dateien/fullsize_{VALUE}" class="highslide" onclick="return hs.expand(this,{wrapperClassName: 'borderless floating-caption', dimmingOpacity: 0.7, align: 'center'})">][bildlinks={DESCRIPTION}|{VALUE}][html|</a>]
highslide_bildrechts = [html|<a href="kategorien/{CATEGORY}/dateien/" class="highslide" onclick="return hs.expand(this,{wrapperClassName: 'borderless floating-caption', dimmingOpacity: 0.7, align: 'center'})">][bildrechts={DESCRIPTION}|{VALUE}][html|</a>]
zu highslide_bildlinks = [html|<a href="download.php?cat={CATEGORY}&amp;file=fullsize_{VALUE}" class="highslide" onclick="return hs.expand(this,{wrapperClassName: 'borderless floating-caption', dimmingOpacity: 0.7, align: 'center'})">][bildlinks={DESCRIPTION}|{VALUE}][html|</a>]
highslide_bildrechts = [html|<a href="download.php?cat={CATEGORY}&amp;file=fullsize_{VALUE}" class="highslide" onclick="return hs.expand(this,{wrapperClassName: 'borderless floating-caption', dimmingOpacity: 0.7, align: 'center'})">][bildrechts={DESCRIPTION}|{VALUE}][html|</a>]
(Es wird einfach jeweils das Linkziel von kategorien/{CATEGORY}/dateien/fullsize_{VALUE} auf download.php?cat={CATEGORY}&amp;file=fullsize_{VALUE} geändert; damit wird das Bild über die download.php ausgeliefert, die den Downloadzähler für die Bilddatei bei jedem Aufruf um eins erhöht.)

DominikF

#5
So dann hab ich mich auch mal angemeldet hier im Forum, mozilo ist echt eine feine sache.

Jetzt aber zu meinem Problem ich habe das mal versucht einzubinden auf meiner Site kann jetzt auch das Bild anklicken ist kein problem aber jetzt öffnet er eine neue Seite wo das Bild dann Groß angezeigt wird, wodran könnte das liegen? einer eine Idee ?

Gruß
Dominik

stefanbe

#6
Wilkommen hier im Forum DominikF

Such mal auf dieser Seite nach targetblank_download und Ändere es nach "false"

gruss stefanbe

DominikF

#7
hat leider nichts gebracht... ist immer noch das gleich Problem

stefanbe

#8
Sory wahr wohl etwas zu schnell  :oops:

Probier mal das [html|<a href="download.php........ nach [html|<a target="_self" href="download.php........ in der Benutzer Syntax zu ändern

Ansonsten hast du im Browser sowas wie Links immer in Neuen Fenster öffnen Eingestellt?

gruss stefanbe

azett

#9
Zitat von: "DominikF"So dann hab ich mich auch mal angemeldet hier im Forum, mozilo ist echt eine feine sache.

Jetzt aber zu meinem Problem ich habe das mal versucht einzubinden auf meiner Site kann jetzt auch das Bild anklicken ist kein problem aber jetzt öffnet er eine neue Seite wo das Bild dann Groß angezeigt wird, wodran könnte das liegen? einer eine Idee ?

Gruß
Dominik
Hi und willkommen bei mozilo :)

Das klingt für mich eher danach, als wäre das JavaScript nicht richtig eingebunden - hast den nen Link zur Seite, daß man mal draufschauen kann?

DominikF

#10
hm leider nicht weil ich das über xampp laufen hab und ich es erst mal "offline" ausprobieren wollte bevor ich es online stelle!
An welcher Stelle denkst du denn ist das java nicht richtig eingebunden, meinst du im Head des templates?

DominikF

#11
ok fehler behoben ..... ist mir schon ein bisschen peinlich ;)
ich hatte den Highslide Ordner in mein Layout kopiert und nicht ins urverzeichnis von mozilo!

Aber danke für eure Vorschläge :)

azett

#12
Passiert den Besten :) Hauptsache, jetzt funktionierts! :)

Michael_neu

#13
Ich sehe bei den Beispielen dieses Scriptes oben links immer den Link zum Hersteller.

Wenn ich dieses Script kaufe, kann ich den Link dann abstellen?

stefanbe

#14
Nim moziloCMS 1.12 und das SlimBox Plugin

gruss stefanbe