Fancybox 2 - Mehrere Titel?

[mitstreiter]

Hallo zusammen,

ich baue gerade die Fancybox 2 in meine Website ein. Ich möchte jetzt zu dem Thumbnail einen Titel und eine Beschreibung haben.

Aufbau der Box

Titel der Referenz
Bild
Beschreibung

Jetzt habe ich folgendes Script eingesetzt

$(document).ready(function() {
		$(".fancybox").fancybox({
                    helpers : {
                        title: {
                            type: 'outside'
                        }
                    },
                    padding: 1,
                    margin: 46
                       
                });
	});

Der Helper sorgt für meine Beschreibung, welche ich im a-tag als title="" schreibe.

Nun möchte ich einen 2. Titel einfügen(Titel der Referenz). Hab schon google durchstöbert, finde aber nichts. Kann mir da jemand Hilfestellung geben?

Gruß

 

[Duddle]

AW: Fancybox 2 - Mehrere Titel?

Ja, du kannst bei den Optionen eine Callback-Funktion definieren, die alles mögliche erledigen kann.
Hier mal ein kleines Beispiel. Je nachdem wie sehr du dich mit jQuery auskennst kannst du das ja beliebig erweitern:

<a class="fancybox" rel="gallery1" href="http://farm6.staticflickr.com/5471/9036958611_fa1bb7f827_b.jpg" title="Westfield Waterfalls - Middletown CT Lower (Graham_CS)">
    <img src="http://farm6.staticflickr.com/5471/9036958611_fa1bb7f827_m.jpg" alt="" />
    <p>Hello, World!</p>
</a>

<script type="text/javascript">
    $(document).ready(function() {
	$(".fancybox").fancybox({
	    openEffect	: 'none',
	    closeEffect	: 'none',
	    beforeLoad: function() {
		var foo = $(this.element).children("p").html();
		this.title=foo;
	    },
	});
    });
</script>

Duddle

 

[mitstreiter]

AW: Fancybox 2 - Mehrere Titel?

Hi!

Nein, ich meinte eigentlich, dass ich in der geöffneten Lightbox 2 "titel" habe. Einmal die Überschrift und einmal die Beschreibung.

Den tilte="" möchte ich als Beschreibung unter dem Bild nutzen und über dem Bild möchte ich den eigentlichen Titles des Werkes nutzen.

Hier mal ein Beispiel wie das ganze am Ende aussehen soll.



Oben der eigentliche Titel und unten Die Beschreibung(title-tag) des Bildes.

Gruß

 

[Duddle]

AW: Fancybox 2 - Mehrere Titel?

Dann müsstest du es wohl mit AJAX, verstecktem HTML oder einem iframe machen, so wie im Beispiel zu "Various types" auf der Fancybox-Seite.

Du willst ja mehr Elemente füllen als das PlugIn vorgibt. Du könntest also auch den Quellcode erweitern oder in einem Callback die benötigten Elemente extra erzeugen. Einfacher ist wohl aber die vorher genannte Variante.


Duddle

 

[mitstreiter]

AW: Fancybox 2 - Mehrere Titel?

Habs jetzt alleine gelöst. Ich habe die eigenschaft "caption" in der fancybox.js hinzugefügt. War eigentlich ganz einfach, dachte aber nicht das es geht ^^.

Jetzt habe ich 2 Elemente

<div class="fancybox-title fancybox-title-outside-wrap">this is the title</div>
<div class="fancybox-caption fancybox-caption-outside-wrap">this is the caption</div>

die ich ansprechen kann. Über CSS kann ich jetzt die Elemente so hinschieben wie ich sie brauche .

Gruß