WOWSlider wie Lightbox öffnen

[dierkie]

Ich hab mal wieder eine Frage an die besten NOFer.
Kann man den WOWSlider wie eine Lightbox öffnen? Also wenn ich die Seite aufrufe auf der sich der Slider befindet, das dieser sich dann event. automatisch wie eine Lightbox öffnet (großes Bild mit verdunkeltem Hintergrund und dann losslidert). Ich hoffe ihr wisst was ich meine!? Vielleicht habt ihr ja ein Tip.
Gruß
Dierk

[Dada]

Du kannst es mal so versuchen. Durch den Slider hast du jQuery ja schon eingebunden. Brauchst also noch ein bisschen CSS und ein paar DIV's

Das ist der Style entweder direkt in die Headtags oder in eine externe CSS auslagern.

Code: HTML5

1. <style type="text/css">
2. /* Slider_Box DIV-Styles*/
3. #Slider_Box {
4.     display:none;
5.     position:fixed;  
6.     _position:absolute;
7.     height:300px;  /*Höhe des Popups*/
8.     width:600px;   /*Breite des Popups*/
9.     background:#FFFFFF;  /*Hintergrundfarbe Popup*/
10.     left: 300px; /*Position von links*/
11.     top: 150px; /*Position von oben*/
12.     z-index:100;
13.     margin-left: 15px;  
14.    
15.    
16.     border:2px solid #2E2E2E;     /*Rahmenbreite und Farbe*/
17.     padding:15px;  
18.     font-size:15px;  
19.     -moz-box-shadow: 0 0 5px #2E2E2E; /*Rahmenschatten*/
20.     -webkit-box-shadow: 0 0 5px #2E2E2E; /*Rahmenschatten*/
21.     box-shadow: 0 0 5px #ff0000;
22.    
23. }
24. #LoadMessage {
25. display:none;
26. background:#6E6E6E;
27. color:#fff;
28. filter:alpha(opacity=90);
29. -moz-opacity:.9;
30. opacity:.9;
31. position:absolute;
32. left:0px;
33. top:0px;
34. z-index:99;
35. width:100%;
36. height:100%;
37. text-align:center;
38. }
39. #container {
40.    
41.     width:100%;
42.     height:100%;
43. }
44.  
45.  
46. #popupSchliessen {
47.     font-size:20px;  
48.     line-height:15px;  
49.     right:5px;  
50.     top:5px;  
51.     position:absolute;  
52.     color:#6fa5e2;  
53.     font-weight:500;      
54. }
55.  
56. #Slider_Box a{
57. cursor: pointer;
58. text-decoration:none;
59. }
60. </style>  

In den Headtags kommt das unter jQuery

Code: Javascript

1. <script type="text/javascript">
2.    
3.     $(document).ready( function() {
4.    
5.        
6.         loadSliderBox();
7.    
8.         $('#popupSchliessen').click( function() {          
9.             unloadSliderBox();
10.         });
11.        
12.         $('#container').click( function() {
13.             unloadSliderBox();
14.         });
15.  
16.         function unloadSliderBox() {    
17.             $('#Slider_Box').fadeOut("slow");
18.             $("#container").css({        
19.                 "opacity": "1"
20.             });
21.         }  
22.        
23.         function loadSliderBox() {    
24.             $('#LoadMessage').fadeIn("slow");
25.                         $('#Slider_Box').fadeIn("slow");
26.                        
27.             $("#container").css({
28.                 "opacity": "0.3"
29.             });        
30.         }      
31.     });
32. </script>

In den Beginn des Hauptextes als erstes

Code: HTML5

1. <div id="Slider_Box">    <!-- Die WowSlider Bodysektion hier rein-->
2.    
3.     <a id="popupSchliessen">X</a>  
4. </div>
5. <div id="container">

An das Ende des Hauptextes

Code: HTML5

1. </div>

Ist wohl nicht die Ultimative-Lösung müste aber deinen Vorstellungen entsprechen.