Stylemotion.de Forum » apexx » Konzepte & Codeschnipsel
Tutorial: Lightbox mit Fancybox
Seiten (3): 1 2 3 »  
Autor Beitrag
 
bigfraggle
Kunde (Support beendet)
Tutorial: Lightbox mit Fancybox
Hallo,

da ich persönlich Fancybox etwas besser als Lightbox 2 (Tutorial) finde, stelle ich an dieser Stelle mal eine entsprechende Anleitung online.

Auch hier wird mindestens apexx 1.5.2 benötigt, der Rest setzt die derzeit aktuelle Fancybox Version 1.3.4 voraus.

1. Skript herunterladen: http://www.fancybox.net

2. Die Dateien auf den Server laden, am besten im apexx-Hauptverzeichnis in einen Ordner "fancybox".

3. In den head-Bereich der design_default.html kommt dann als erstes folgendes:

HTML-Code:
1
2
3
4
5
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="fancybox/jquery.easing-1.4.pack.js"></script>
<script type="text/javascript" src="fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.4.css" media="screen" />


sowie:

HTML-Code:
1
2
3
4
5
<script type="text/javascript">
$(document).ready(function() {
  $("a[rel=gallery]").fancybox();
});
</script>


Möchte man nicht die Standarddarstellung, stehen diverse Funktionen zur Verfügung, mit denen man Fancybox variieren kann (weiterführende Infos: http://www.fancybox.net/api). Bei mir nutze ich z.B. anstelle des vorangegangenen Codes diesen:

HTML-Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript">
$(document).ready(function() {
  $("a[rel=gallery]").fancybox({
    'transitionIn' : 'elastic',
    'transitionOut' : 'elastic',
    'titlePosition' : 'inside',
    'overlayColor' : '#000',
    'overlayOpacity' : 0.8,
    'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
      return '<span>Bild ' + (currentIndex + 1) + ' von ' + currentArray.length + ':<b>' + (title.length ? '&nbsp;' + title : '') + '</b>. Weitere Bilder gibt es in der <a href="gallery.html">Galerie</a>.</span>';
    }
  });
});
</script>


4. Nun müssen in den jeweiligen Galerie-Templates, in denen die Bilder dargestellt bzw. verlinkt sind, die Grafiken mit Fancybox verknüpft werden:

HTML-Code:
1
2
3
4
5
{list PICTURE}
...
<a rel="gallery" href="{PICTURE.FULLSIZE}" title="{PICTURE.GALLERY_TITLE|notags}"><img src="{PICTURE.IMAGE}" alt="{PICTURE.GALLERY_TITLE|notags}" title="{PICTURE.GALLERY_TITLE|notags}" /></a>
...
{/list}


Anstelle des Galerietitels kann man natürlich mit {PICTURE.CAPTION} auch die Bildunterschrift ausgeben.

5. Fertig, viel Spaß damit!
bigfraggle ist offline  
 
Christian Scheb
Stylemotion.de (Entwickler)
Schönes Tutorial, danke :)
Christian Scheb ist offline  
 
Sketch
Kunde (Support beendet)
Jo,
Mir gefällts auch. Versteh sogar ich ;)
Sketch ist offline  
 
lastboyscout
Kunde (Support beendet)
Gehe ich nach dieser Anleitung erhalte ich folgenden Fehler:
Tooltip Script Error Message:

wz_tooltip.js must be included INSIDE the body section, immediately after the opening <body> tag.
lastboyscout ist offline  
 
lastboyscout
Kunde (Support beendet)
hat sich erledigt. Funzt nun, da offensichtlich vergessen wurde, das <script> mit </script> auch wieder zu schließen.
lastboyscout ist offline  
 
bigfraggle
Kunde (Support beendet)
Ja, am Ende der zweiten und dritten Codebox müsste noch ein "</script>" gesetzt werden.
Ich kann den Beitrag aber leider nicht mehr editieren...
bigfraggle ist offline  
 
Christian Scheb
Stylemotion.de (Entwickler)
Zitat von bigfraggle:
Ja, am Ende der zweiten und dritten Codebox müsste noch ein "</script>" gesetzt werden.
Ich kann den Beitrag aber leider nicht mehr editieren...

Erledigt.
Christian Scheb ist offline  
 
bigfraggle
Kunde (Support beendet)
So, jetzt habe ich mal ne Frage zu meinem eigenen Tutorial... ^^

Also, ich möchte meine Bildunterschrift etwas optimieren. In der dritten Box habe ich innerhalb der Scriptanweisung ja folgendes stehen:

Zitat:
Weitere Bilder gibt es in der <a href="gallery.html">Galerie</a>


Nun möchte ich diesen Galerielink dynamisch erstellen. Z.B. werden bei den Zufallsbildern in meinen News nicht alle Bilder einer Galerie gezeigt. Daher dachte ich, man könnte mittels {PICTURE.GALLERY_LINK} den Link zur jeweiligen Galerie setzen. Allerdings wird das im Script anscheinend nicht berücksichtigt, weshalb mein Link dann immer ins Leere führt.

Kann ich das irgendwie umgehen?
bigfraggle ist offline  
 
Christian Scheb
Stylemotion.de (Entwickler)
Versteh ich nicht, bitte mal den ganzen Template-Code.
Christian Scheb ist offline  
 
bigfraggle
Kunde (Support beendet)
Der Galerie-Link funktioniert so nicht, die Variable {PICTURE.GALLERY_LINK} wird nicht berücksichtigt:

Code:
1
2
3
4
5
<script type="text/javascript">
...
return '<span>Bild ' + (currentIndex + 1) + ' von ' + currentArray.length + ':<b>' + (title.length ? '&nbsp;' + title : '') + '</b>. Weitere Bilder gibt es in der <a href="{PICTURE.GALLERY_LINK}">Galerie</a>.</span>';
...
</script>
bigfraggle ist offline  
Seiten (3): 1 2 3 »  
 
Suche Optionen
» Erweiterte Suche
Druckansicht Druckansicht