• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

FancyBox - Konfiguration

hardyy

New member
Vorgeschichte:http://forum.jswelt.de/javascript/57427-php-array-js-einbinden.html

Hallo,

in meinem Projekt bin ich jetzt bei der FancyBox angelangt: (wie ich in der Suchfunktion gesehen habe, ist das Programm im Forum nicht unbekannt)
  1. Datenbank in eine Bildergalerie auslesen
  2. Thumbnails der Bildergalerie mit einem Slider anzeigen
  3. Großbilder mit FancyBox präsentieren
Alles funktioniert in etwa so, wie ich es mir vorgestellt habe (teilweise mit euerer Hilfe).
Aber bei manchen Details steckt der Teufel bzw. mangeldes Wissen drin und so hoffe ich weiterhin auf euere Unterstützung.

Erst einmal meine vorläufige Lösung, dann kommen die Fragen:
PHP:
<!-- Albenübersicht -->
<?php
error_reporting(E_ALL);
$error = '';
// Prüfen ob ID übergeben wurde und numerisch ist
if(!isset($_GET['id']) OR !is_numeric($_GET['id'])){
    $error = "Sie haben kein Album ausgewählt.<br />\n";
   }
else{
    // $_GET_Wert sichern
    $_GET['id'] = (int)mysql_real_escape_string($_GET['id']);
    // Prüfen ob ein Album zur ID existiert
    $sql = "SELECT
                  Name,
                  Beschreibung,
                  DATE_FORMAT(Datum, '%d.%m.%Y') as Datum
           FROM
                  alben
           WHERE
                  ID = '".$_GET['id']."'
          ";
    $result = mysql_query($sql) OR die("<pre>".$sql."</pre>".mysql_error());
    $anzahl = mysql_num_rows($result);
    if(!$anzahl)
    $error = "Dieses Album existiert nicht.<br />\n";
    }
if($error != '')
    echo $error;
else{
    // Albeninfos und Bilder anzeigen

    // Daten des Albums in $row speichern
     $row = mysql_fetch_assoc($result);
     $sql = "SELECT
                    ID,
                    Name,
                    Beschreibung
            FROM
                    fotos
            WHERE
                    Alben_ID = '".$_GET['id']."'
            ORDER BY
                    Datum ASC
            ";
    $result = mysql_query($sql) OR die("<pre>".$sql."</pre>".mysql_error());
    $anzahl_fotos = mysql_num_rows($result);
    }

$thumbs = array();
$fotos = array();


if(!$anzahl_fotos){
    echo "<p>\n".
         "Es befinden sich keine Fotos in diesem Album.\n".
         "</p>\n";
    }

else{
    $i=0;
    while($row = mysql_fetch_assoc($result)){

        $fotos[]=(PIC_FOLDER.$row['Name']);
        $thumbs[]=(TN_FOLDER."TN".substr($row['Name'],3));
        }
    $error = "Sie haben kein Album ausgewählt.<br />\n";
    }
//Ausgabe der Thumbs mit foreach-Schleife
    /*  echo '<ul id= "scroller">';
     foreach($thumbs as $list);
     foreach($fotos as $bild){ } */

//Ausgabe der Thumbs mit for-Schleife
   echo '<ul id= "scroller">';
   for ($x=0;
        $x<count($thumbs) AND
        $x<count($fotos);
        $x++)
        {
?>
    <a class="fancybox-button" rel="fancybox-button" <?php echo 'href= "'.$fotos[$x].'"'?> title="Bare Trees - Winter (hammermad)">
	<img <?php echo 'src="'.$thumbs[$x].'"' ?> alt="" />
<?php
   }
      echo'</ul>';
?>
Die Schnittstelle zu der FancyBox ist die vorletzte Zeile:
PHP:
    <a class="fancybox-button" rel="fancybox-button" <?php echo 'href= "'.$fotos[$x].'"'?> title="Bare Trees - Winter (hammermad)">
	<img <?php echo 'src="'.$thumbs[$x].'"' ?> alt="" />
Die Arrays $thumbs und $fotos beinhalten lediglich die Pfade zu den Thumbnails bzw. zu den Fotos.
Ausgelesen habe ich sie mit einer for-Schleife, wobei ich ich die beiden Arrays mit AND verbunden habe.
Mit der foreach-Schleife ist es mir nicht gelungen beide Arrays in der Schleife auszulesen.

Fragen:
  1. Wie gesagt, alles funktioniert gut, aber leider nur in FF und IE9 - nicht in Chrome. Hier wird lediglich das erste Thumbnail angezeigt.Gibt es dafür eine Erlärung? Mein Googeln brachte leider nichts.
  2. In FF und IE fehlt jedesmal das letzte Thumbnail, in der FancyBox wird das Foto aber angezeigt.
  3. In der FancyBox kann man alle Bilder durchklicken, nur nach dem letzten Bild klickt man 2x leer bevor wieder das 1. Bild kommt. Könnte man nicht generell nach dem letzten Bild stoppen?
  4. Wie man die Farbe des Bildrahmens ändert, habe ich gefunden aber wie ändert man die Farbe bzw. Opacity des Hintergrunds?
  5. Ich verwende die fancybox-button-Variante. Klicke ich auf die Diashow, wechselt nur 1 Bild und nichts weiter. Wo kann man die Bildwechsel-Geschwindikeit einstellen? In der CSS nichts gefunden.

Darf ich auf euere Hilfe hoffen?
 
Das hier
Code:
   for ($x=0;
        $x<count($thumbs) AND
        $x<count($fotos);
        $x++)
        {
?>
    <a class="fancybox-button" rel="fancybox-button" <?php echo 'href= "'.$fotos[$x].'"'?> title="Bare Trees - Winter (hammermad)">
    <img <?php echo 'src="'.$thumbs[$x].'"' ?> alt="" />
<?php
   }
      echo'</ul>';
?>
finde ich sehr unübersichtlich. Unterbrich lieber den PHP-Teil nicht und schreibe alles mit echo weg.
Ich glaube, es wäre am besten, wenn Du die URL deiner Seite postest, damit man sich den generierten Quelltext ansehen kann.
 
...finde ich sehr unübersichtlich. Unterbrich lieber den PHP-Teil nicht und schreibe alles mit echo weg.
Habe ich versucht aber nicht hinbekommen. An der Funktion würde sich damit nichts ändern.
Den Fehler unter Punkt 2 habe ich gefunden - die fehlenden <li></li> habe ich nachgetragen und es werden alle Thumbs angezeigt, in Chrom dafür jetzt überhaupt kein Thumb mehr.(Punkt 1)
Und in der FankyBox kann ich die Fotos nicht mehr flüssig durchklicken, der Bildwechsel erfolgt jetzt generell nur jeweils nach dem 3.Klick (Punkt 3).

PHP:
<li><a class="fancybox-button" rel="fancybox-button" <?php echo 'href= "'.$fotos[$x].'"'?> title="Bare Trees - Winter (hammermad)">
	<img <?php echo 'src="'.$thumbs[$x].'"' ?> alt="" /></li>
An dem title= bitte keinen Anstoß nehmen, wird später durch das Array mit den Beschreibungen der Fotos ersetzt.

Die Seite ist leider noch nicht online.

Trotzdem danke für deine Antwort.
 
Zuletzt bearbeitet:
Wichtig is der Code, welcher im Browser ankommt und nicht das php.
Habe jetzt nirgends gesehen, wie die Fancybobx eingebunden/konfiguriert wird.

Eigentlich sollte die Handhabung einfach sein, sofern man sich an die Dokumentation hält.
 
Habe nochmals mein Code und Seitenquelltexte aller 3 Browser angesehen und meine Fehler entdeckt.
In dem Verweis fehlt der Abschluß für den Anker </a> :icon8: und mit den Listenbegrenzern <li></li> habe ich jetzt nur den img-Teil und nicht den ganzen Verweis eingeschlossen.
Das Code sieht jetzt richtig so aus:
PHP:
<a class="fancybox-button" rel="fancybox-button" <?php echo 'href= "'.$fotos[$x].'"';?> title="Bare Trees - Winter (hammermad)">
<li><img <?php echo 'src="'.$thumbs[$x].'"';?> alt="" /></li>
</a>
Somit läuft alles bestens in allen 3 Browsern (FF, IE9, Chrome) und auch die Weiterschaltung der FancyBox-Bilder klappt ohne Probleme.

Habe jetzt nirgends gesehen, wie die Fancybobx eingebunden/konfiguriert wird.
Eigentlich sollte die Handhabung einfach sein, sofern man sich an die Dokumentation hält.
Die Installation und die Hanhabung der Fancybox ist einfach und gelang auf Anhieb. Nur die Konfiguration ist furchtbar mühsam.
Die deafaults-Aufstellung in der jquery.fancybox.js ist OK aber die Änderung der Werte zeigt keine Reaktion!
PHP:
	$.extend(F, {
		// The current version of fancyBox
		version: '2.1.4',

		defaults: {
			padding : 15,
			margin  : 20,

			width     : 800,
			height    : 600,
			minWidth  : 100,
			minHeight : 100,
			maxWidth  : 9999,
			maxHeight : 9999,

			autoSize   : true,
			autoHeight : false,
			autoWidth  : false,

			autoResize  : true,
			autoCenter  : !isTouch,
			fitToView   : true,
			aspectRatio : false,
			topRatio    : 0.5,
			leftRatio   : 0.5,

			scrolling : 'auto', // 'auto', 'yes' or 'no'
			wrapCSS   : '',

			arrows     : true,
			closeBtn   : true,
			closeClick : false,
			nextClick  : false,
			mouseWheel : true,
			autoPlay   : true,
			playSpeed  : 3000,
			preload    : 3,
			modal      : false,
			loop       : true,
Die Diashow-Funktion in der fancybox-button-Variante zeigt keine Wirkung - autoPlay:true und die Änderung von playSpeed: wirkungslos. Die Diashow wäre schon sehr wichtig für mich.
Auch die Einstellung für die Hintergrundfarbe bzw. Durchsichtigkeit habe ich nicht gefunden.
Was auch sehr störend ist, ist der Hover-Effekt, bei dem das halbe Bild eingefärbt wird.

Wer kann hier Lösungen anbieten?
 
Wenn Du diese Dokumentation :
fancyBox - Fancy jQuery Lightbox Alternative
und die Tips&Tricks meinst, dann ja.
Hat mir leider aber nicht weitergeholfen. Nach Google-Recherche habe ich zumindest etwas für den Hintergrund gefunden und implementiert:
PHP:
<script type="text/javascript">
$(document).ready(function() {
	$(".fancybox-button").fancybox({
		prevEffect		: 'none',
		nextEffect		: 'none',
		closeBtn		: false,
		helpers		: {
		    title	: { type : 'inside' },
			buttons	: {},
            overlay : {
            speedIn : 500,
            opacity : 0.5,
            css : { 'background-color' : 'gray' }
            }
		}
	});
});

</script>
Also der Hintergrund ist abgehakt.
Zu der Diashow und dem störenden Hover-Effekt habei ich noch nichts gefunden.
 
Hallo,
kann keiner mehr etwas zu der Fancybox-Slideshow sagen?

Im Skript jquery.fancybox.js sind die Funktionen für die Slideshow ja enthalten.
Gestartet wird sie über das entsprechende Play-Button in der fancybox-button-Version.
PHP:
	// Manage slideshow:
		//   $.fancybox.play(); - toggle slideshow
		//   $.fancybox.play( true ); - start
		//   $.fancybox.play( false ); - stop
		play: function ( action ) {
			var clear = function () {
					clearTimeout(F.player.timer);
				},
				set = function () {
					clear();

					if (F.current && F.player.isActive) {
						F.player.timer = setTimeout(F.next, F.current.playSpeed);
					}
				},
				stop = function () {
					clear();

					$('body').unbind('.player');

					F.player.isActive = false;

					F.trigger('onPlayEnd');
				},
				start = function () {
					if (F.current && (F.current.loop || F.current.index < F.group.length - 1)) {
						F.player.isActive = true;

						$('body').bind({
							'afterShow.player onUpdate.player'   : set,
							'onCancel.player beforeClose.player' : stop,
							'beforeLoad.player' : clear
						});

						set();

						F.trigger('onPlayStart');
					}
				};

			if (action === true || (!F.player.isActive && action !== false)) {
				start();
			} else {
				stop();
			}
		},
Hierzu gehören die defaults im selben Skript:
PHP:
	// The current version of fancyBox
		version: '2.1.4',

		defaults: {
			padding : 15,
			margin  : 20,

			width     : 800,
			height    : 600,
			minWidth  : 100,
			minHeight : 100,
			maxWidth  : 9999,
			maxHeight : 9999,

			autoSize   : true,
			autoHeight : false,
			autoWidth  : false,

			autoResize  : true,
			autoCenter  : !isTouch,
			fitToView   : true,
			aspectRatio : false,
			topRatio    : 0.5,
			leftRatio   : 0.5,

			scrolling : 'auto', // 'auto', 'yes' or 'no'
			wrapCSS   : '',

			arrows     : true,
			closeBtn   : true,
			closeClick : false,
			nextClick  : false,
			mouseWheel : true,
			autoPlay   : true,
			playSpeed  : 3000,
			preload    : 3,
			modal      : false,
			loop       : true,

Und ich nehme an, hier sind die Werte: autoPlay : true und playSpeed ; 3000

Warum kommt beim Kilick auf den Play-Button nur 1 Bildwechsel und dann nichts mehr?

Muß noch an einer anderen Stelle die Slideshow aktiviert werden? Kann jemand helfen?
 
Benutzt Du auch die Fancybox 2? Unter den älteren Versionen scheint es noch kein Autoplay zu geben. Sonst scheint das mit autoPlay und speed richtig zu sein.
 
Wie es aus dem Skript ersichtlich ist, benutze ich die Version 2.1.4.

Die folgenden Tipps aus anderen Foren habe ich ohne Erfolg ausprobiert:

PHP:
$(document).ready(function() {

    	$(".fancybox-button").fancybox({
    		prevEffect		: 'none',
    		nextEffect		: 'none',
    		closeBtn		: false,

    		helpers		: {
//   		    autoPlay: true,
//    		  playSpeed : 1000,
    		    title	: { type : 'inside' },
    			buttons	: {},
                overlay : { speedIn : 500, opacity : 0.5,
                            css : { 'background-color' : 'gray' }
                }
	         }
        });

//      $(".fancybox").fancybox({autoPlay: true, playSpeed : 1000})
//                        .trigger('click');

//      $(".fancybox.play").fancybox({autoPlay: true, playSpeed: 1000});

})(jQuery);

Die Tasten vorwärts/rückwärts funktionieren ja, also müßte fancybox entsprechend das Next-Bild in der Slideshow finden. Aber hier scheint es zu haken. Irgend eine Idee?
 
Ich habe jetzt meine Hompage hochgeladen: Index.

Es ist noch eine wüste Baustelle, die div's sind noch unterschiedlich eingefärbt um an dem Layout die Übersicht nicht zu verlieren.
Funktionsfähig ist vorläufig unter Menü-Punkt Sehenswürdigkeiten nur der Button Brücken.
Dann am besten den ersten Link mit 23 Fotos anklicken. Die Beschreibungen bitte nicht beachten, hier ist noch viel Arbeit nötig.

Ausser dem Nichtfunktionieren der Slideshow ist mir jetzt beim Online-Betrieb aufgefallen:
In FF wird die Thumbnails-Zeile im Footer nur zur Hälfte angezeigt - erst nach dem Aktualisieren der Seite ist die Zeile vollständig und der Slider funktioniert. Ursache ??? Lokal ist alles i.O.
in IE9 wird die Thumbnails-Zeile sofort richtig angezeigt und der Slider funktoniert.
In Chrome wird die Thumbnails-Zeile überhaupt nicht angezeigt, auch lokal nicht.

Und beachtet den häßlichen Hover-Effekt beim Bildwechsel, wenn man nicht den Button oberhalb des Bildes ancklickt, sondern in das Bild hinein klickt.
Ein Stopp nach dem letzten Bild wäre auch nicht schlecht.

Ich bitte um gute Ratschläge, wie ich den Slider und die Slideshow richtig in den Griff bekomme.
 
Zuletzt bearbeitet:
PS: Im Moment sehe ich gar keine Thumbnails mehr im Slider.
Ich bin jetzt nicht so der HTML-Experte, aber ich würde dir empfehlen, die a-Tags innerhalb der li-Tags zu notieren:
HTML:
<ul id= "scroller">       
<li>
  <a class="fancybox-button" rel="fancybox-button" href= "fotos/PIC_a08e32d2180129.JPG" title="Bare Trees - Winter (hammermad)">
  <img src="fotos/thumbnails/TN_a08e32d2180129.JPG" alt="" />
  </a>
</li>

Ist doch schon ein viel versprechender Anfang mit deiner Homepage. Was für eine Beziehung hast Du denn zu Prag? Ist es dein bevorzugtes Reiseziel?
 
OK - du hast aber noch einen weiten Weg. Als aller erstes solltest du dein Codierungsproblem lösen...

Dann hast du jQuery zwei mal eingebunden, was unnötig ist und Probleme bereiten kann.

Außerdem steht etwas in der Fehlerkonsole...

PS: Das mit den Bildern im FF klingt nach einem Timeingproblem.
PPS: Die Funktionen FensterWeite, FensterHoehe und neuAufbau definierst du gleich drei mal... warum?
 
Bekannter Fehler bei der Slideshow von Fancybox:
https://github.com/fancyapps/fancyBox/issues/493
Hier werden auch Tipps zu Behebung angegeben.

Danke für deinen Tip, den kannte ich aber schon. Die angesprochenen 2 Zeilen sind in meiner Version schon richtig, aber trotzdem geht nichts. Werde versuchen dort im Forum mit meinem katastrofalen Englisch weiter zu kommen.

PS: Im Moment sehe ich gar keine Thumbnails mehr im Slider.
Ich bin jetzt nicht so der HTML-Experte, aber ich würde dir empfehlen, die a-Tags innerhalb der li-Tags zu notieren:
HTML:
<ul id= "scroller">       
[/QUOTE]

Habe jetzt die ganze Zeile in die <li> Tags eingeschlossen und im Augenblick ist der Slider in FF und IE9 zu sehen und funktioniert auch. Allerdings ist es in [I]Chrome[/I] seltsam. Hier ist im [I]footer[/I] nichts zu sehen. Erst wenn ich mit der rechten Maustaste im [I]footer[/I] klicke und "Element untersuchen" wähle, springt der Slider an!??

Meine Beziehung zu Prag ?  Es ist meine Geburtsstadt und ich bin auch häufig dort. Habe Tausende von Bildern geschossen und die will ich jetzt in einem Online-Reiseführer mit Beschreibungen und Positionen im Stadtplan veröffentlichen.
Arbeite schon recht lange an der Seite, ältere Versionen veworfen und jetzt soll es die finale Version werden.

[QUOTE="kkapsner, post: 366008, member: 22369"]OK - du hast aber noch einen weiten Weg. Als aller erstes solltest du dein Codierungsproblem lösen...[/QUOTE]

Du hast recht, es ist noch ein weiter Weg und den kann ich nur konsequent in kleinen Schritten gehen. Sobald es mit dem Slider und der Fancybox klappt, kommen die Bildbeschriftungen dran und das Codierungsproblem (da hoffe ich zu wissen, was zu tun ist).

[QUOTE="kkapsner, post: 366008, member: 22369"]Dann hast du jQuery zwei mal eingebunden, was unnötig ist und Probleme bereiten kann.[/QUOTE]

Wenn du diese 2 Zeilen meinst:

[CODE]<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
und
<script language="javascript" type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js"></script>[/CODE]

weiß ich leider nicht wie ich das lösen könnte. Binde ich nur eine ein, dann geht entweder die [I]Fancybox[/I]  bzw. der [I]Slider[/I] nicht. 

[QUOTE="kkapsner, post: 366008, member: 22369"]Außerdem steht etwas in der Fehlerkonsole...
PS: Das mit den Bildern im FF klingt nach einem Timeingproblem.[/QUOTE]
Die Fehlerkonsole zeigt im Augenblick keine Fehler an, nur in Chrome sind es zig Warnungen, die ich mir später genauer anschaue.
Wie gesagt, bis auf die Slideshow, funktioniert der [I]Slider[/I] und die [I]Fancybox[/I] in FF und IE9. Hast du zu [I]Chrome[/I] irgendeine Ahnung?


[QUOTE="kkapsner, post: 366008, member: 22369"]PPS: Die Funktionen FensterWeite, FensterHoehe und neuAufbau definierst du gleich drei mal... warum?[/QUOTE]
Dachte ich schon, daß es überflüssig ist. Habe schon mal versucht die Funktion nur einmal im <head> unterzubringen aber dann haben nicht alle 3 Funktionen [I]box=document.getElementById[/I] funktioniert.
Kümmere ich mich später drum.
 
kkapsner schrieb:
Dann hast du jQuery zwei mal eingebunden, was unnötig ist und Probleme bereiten kann.
Nein, er meint diese beiden Zeilen:
Code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
und
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

hardyy schrieb:
Die angesprochenen 2 Zeilen sind in meiner Version schon richtig
Kann ich mir nicht vorstellen. Du hast die gepackte Version von fancybox.js eingebunden:
Code:
<script language="javascript" type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js"></script>
und ich kann mir nicht vorstellen, dass Du die editiert hast. Da steht setTimeout drin:
Code:
setTimeout(b.next,b.current.playSpeed)
 
Ein Codierungsproblem schiebt man besser nicht nach hinten, da das viele andere Probleme verursachen kann.

Der Fehler kommt jetzt bei mir auch nicht mehr...
 
Nein, er meint diese beiden Zeilen:
Code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
und
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

OK, aber auch hier ist es so, wenn ich eine lösche dann funktioniert entweder der Slider oder die Fancybox nicht. Auch nicht, wenn ich darauf achte, daß jquery eingebunden ist bevor ich die Funktionen aufrufe. ???

Kann ich mir nicht vorstellen. Du hast die gepackte Version von fancybox.js eingebunden:
Code:
<script language="javascript" type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js"></script>
und ich kann mir nicht vorstellen, dass Du die editiert hast. Da steht setTimeout drin:
Code:
setTimeout(b.next,b.current.playSpeed)

Ich habe total übersehen, daß die jquery.fancybox.js nicht eingebunden ist. Ist die gepackte Version mit der ungepackten identisch? Die Stellen der angesprochenen Zeilen 435 und 429 habe ich in der gepackten Version gefunden und entsprechend geändert.
Die Slideshow läuft und die Start/Pausetaste funktioniert. !!! Bezüglich der Zeile 400 habe ich nichts getan - erstens habe ich sie in der gepackten Version nicht finden können (den Befehl an dieser Stelle) und zweitens läuft ja alles wie gewünscht.

Ein Codierungsproblem schiebt man besser nicht nach hinten, da das viele andere Probleme verursachen kann.
Kommt sofort jetzt nach der Slideshow dran. Wobei neben dem Codierproblem noch ein Problem mit der Formatierung der Texte (Überschrift, Absätze, evtl. farbige bzw. fette Wörter usw.) besteht, die in der Datenbank gespeichert werden.
Aber da eröffne ich ein neues Thema, wenn ich Fragen habe.

Jetzt wäre mir nur noch wichtig, warum es mit dem Slider in Chrome nicht klappt. Hast du evtl. eine Ahnung?
 
Zurück
Oben