Fancybox ohne Hintergrund

[hardyy]

Hallo,

ich möchte gerne nur die Diashow der Fancybox in einem deffinierten div ohne den abgedunkelten Hintergrund ablaufen lassen. Auch ein transparenter Hintergrund reicht nicht, da er die Seite abdeckt. Die Elemente der Seite (z.B. Links) sollten schon zugänglich sein.

Das ganze sollte genau so sein wie hier Wechselbilder jQuery, allerdings in der oberen rechten Ecke plaziert. Das angebotene Skript blicke ich wegen mangelder JS-Kenntnisse nicht durch. Ich möchte es rein mit Fancybox realisieren, die ich auf einer anderen Seite bereits benütze.

Ist das mit Fancybox möglich? Kann mir vielleicht jemand helfen? Wäre ich sehr dankbar.

Gruß Hardy

 

[rico2009]

Du kannst bei der Fancybox die Option "overlayShow" auf false stellen. Dann hast du kein Overlay.

=> Fancybox - Fancy jQuery lightbox alternative| API & Options

 

[hardyy]

Vielen Dank für die schnelle Antwort.

Mein Skript sieht so aus:

<script type="text/javascript">
        jQuery(document).ready(function() {

         $(".fancybox-button").fancybox({
              maxWidth      : '400px',
              maxHeight     : '200px',
              overlayShow   :  false, 
    		  prevEffect	: 'fade',
    		  nextEffect	: 'fade',
    		  modal    	    : true,
    		  autoPlay      : true,
    		  padding       : 0,
    		  helpers		: {           		         
    		                   title:      { type     :'outside', position : 'top'}                                                                                                                                                              
              }	          
          }) 
          .trigger('click');                                                                                 
}); 
</script>

Die Diashow läuft in der Mitte der Seite ab mit abgedunkelten Hintergrund.

overlayShow : false zeigt leider keine Wirkung.

An falscher Stelle eingefügt? Wo wäre es richtig?

 

[Sempervivum]

allerdings in der oberen rechten Ecke plaziert.

Wenn Du das mit der Fancybox machen willst, wirst Du intensive Javascript-Kenntnisse benötigen, weil Position und Größe dynamisch durch Javascript/jQuery berechnet werden. Es ist mit Sicherheit einfacher, ein Slider-Skript zu verwenden, was für diesen Zweck gemacht wurde, wie das, was Du gepostet hast oder das jQuery-Cycle-Plugin. Letzteres ist u. U. einfacher einzubinden als das von Dynamic Drive und wenn Du die Fancybox einbinden konntest, müsste dir das auch gelingen.

 

[hardyy]

Auf das jQuery-Cycle-Plugin bin ich bisher noch nicht gestoßen.
Habe mir jetzt die Demos und Tutorials angesehen und finde es für den meinen speziellen Fall
am einfachsten zu handhaben.
Werde es übers Wochenende ausprobieren.
Vielen Dank für den Tip.

Gruß Hardy

 

[rico2009]

Stell mal dein "modal" noch auf "false", dann sollte es klappen.

 

[hardyy]

Stell mal dein "modal" noch auf "false", dann sollte es klappen.

Das bringt leider nichts, nur die Scroll-Pfeile und Schließ-Button werden sichtbar, Hintergrund bleibt abgedunkelt.

Ich versuche es jetzt gemäß dem Vorschlag von Sempervivum mit dem jQuery Cycle Plugin,
erscheint mir aussichtsreicher und für mich besser nachvollziehbar.

- - - Aktualisiert - - -

Wenn Du das mit der Fancybox machen willst, wirst Du intensive Javascript-Kenntnisse benötigen, weil Position und Größe dynamisch durch Javascript/jQuery berechnet werden. Es ist mit Sicherheit einfacher, ein Slider-Skript zu verwenden, was für diesen Zweck gemacht wurde, wie das, was Du gepostet hast oder das jQuery-Cycle-Plugin. Letzteres ist u. U. einfacher einzubinden als das von Dynamic Drive und wenn Du die Fancybox einbinden konntest, müsste dir das auch gelingen.

Jetzt habe ich es mit dem jQuery-Cycle-Plugin versucht. Auf den ersten Blick alles sehr einfach - aber leider keine Slideshow.

Mein Skript:

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jQuery Cycle Plugin.js"></script>
<script type="text/javascript">
            $(document).ready(function() {
            
            $(".cycle-slideshow").cycle({
                    fx: 'fade'             
            });
});
</script> 

</head>
<body>

echo "<div class='cycle-slideshow'>".
      "<img class='scale' src='$fotos[$x]'>".
      "</div>\n";

Die Bilder werden alle untereinander angezeigt aber die Slideshow startet nicht.
Bin das Skript -zig mal durchgegangen aber keinen Fehler erkennen können.
Woran kann es liegen?

 

[Sempervivum]

1. Hast Du auch die Javascript-Dateien hochgeladen?
2. Dies hier:

echo "<div class='cycle-slideshow'>".
      "<img class='scale' src='$fotos[$x]'>".
      "</div>\n";

ist PHP. Lass das echo und die Anführungszeichen weg und notiere das HTML direkt.

 

[hardyy]

Lass das echo und die Anführungszeichen weg und notiere das HTML direkt.

Die Fotos werden mit einem PHP-Skript aus einer MySql ausgelesen, deshalb das echo.
Leider habe ich die Ausgabe-Schleife nicht mit gepostet und da war der Fehler versteckt.
Die Slideshow muß vor der Schleife aufgerufen werden!

So sieht es richtig aus:

//Ausgabe der Arrays mit for-Schleife

   echo "<div class='cycle-slideshow'>"; 
        for ($x=0;       
        $x < count($fotos);
        //$x < count($beschreibung);
        $x++)
        {
        
   echo "<img src='$fotos[$x]'>";        
        }
   echo "</div>";

Jetzt funktioniert die Slideshow und an der richtigen Stelle.
Danke für die Unterstützung.

 

[Sempervivum]

Schön, dass es funktioniert. Wundert mich nur, wenn Du so etwas in PHP programmieren kannst, dass Du dir dann nicht zugetraut hast, eine Slideshow in Javascript zu integrieren.

 

[hardyy]

Die Fancybox war in diesem Fall eine Sackgasse und jQuery-Cycle-Plugin mir bis jetzt unbekannt. Die Einbindung ging eigentlich bis auf den Schleifen-Fehler ganz gut.
Nur die JS-Skripte sind mir noch etwas suspekt. Muß mich damit etwas mehr beschäftigen.