Lightbox per Javascript nach bestimmten Event öffnen

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Lightbox per Javascript nach bestimmten Event öffnen

    Ich versuche mich gerade ein wenig in Javascript einzuarbeiten um das Effektframework mootools besser nutzen zu können. Meine Kenntnisse sind noch sehr rudimentär, mittlerweile kenne ich jedoch die Event Handler, diese führen eine Funktion meist nur nach händischer Aktion aus (Bsplw. oncklick, onmouseover etc.). Ich würde nun gerne folgenden Lightbox Clone aufrufen wenn ein Kontaktformular erfolgreich gesendet wurde:

    Quellcode

    1. window.addEvent('domready',function(){
    3. $$('a').each(function(x){
    4. y = x.getAttribute('rev');
    6. if(navigator.appVersion.indexOf('MSIE') != -1){
    7. if(y != ""){
    8. $(y).setStyle('visibility','hidden');
    9. }
    10. }else{
    11. if(y != null){
    12. $(y).setStyle('visibility','hidden');
    13. }
    14. }
    15. })
    16. })
    18. var xxx = new Array();
    20. $$('a').each(function(el){
    21. if(el.getAttribute('rel') == "designSlide"){
    23. // preload images
    24. a = new Image();
    25. lnk = el.getAttribute('href');
    26. a.src = lnk;
    27. xxx.push(a);
    29. el.addEvent('click',function(x){
    30. // old container still existing? remove it
    31. if($('container') != false){
    32. $('container').remove();
    33. }
    35. //go
    36. bd = document.body;
    37. windowHeight = 0;
    38. windowWidth = 0;
    39. title = el.getAttribute('title');
    40. titleSplitPos = title.indexOf("::");
    41. titleHead = title.substring(0,titleSplitPos);
    42. lengthContent = title.length + titleSplitPos
    43. titleContent = title.substring(titleSplitPos+2,lengthContent);
    44. addContent = el.getAttribute('rev');
    46. if($(addContent) != false){
    47. addContentCont = $(addContent).innerHTML;
    48. $(addContent).setStyle('visibility','hidden');
    49. }
    51. nav = navigator.appName;
    52. windowHeight = window.getHeight() -10;
    53. var x = new Event(x).stop();
    54. var hrefSrc = el.getAttribute('href');
    55. var preloadPrev = new Image();
    56. preloadPrev.src = hrefSrc;
    57. var imgWidth = preloadPrev.width;
    58. var imgHeight = preloadPrev.height;
    59. var space = imgHeight + 40;
    60. var top = windowHeight - space;
    62. // create a new div with the width of the screen
    63. container = new Element('div', {
    64. 'styles':
    65. {
    66. 'display': 'block',
    67. 'visibility':'hidden',
    68. 'width': '99%',
    69. 'height': space,
    70. 'background':'#000',
    71. 'border': '1px solid #AAA',
    72. 'padding':'0px',
    73. 'left':'3px',
    74. 'margin':'0px',
    75. 'position': 'absolute',
    76. 'top': top
    77. }
    78. })
    80. container.setAttribute('id','container');
    82. image = new Element('img', {
    83. 'styles':
    84. {
    85. 'border': '3px solid #FFF',
    86. 'display':'block',
    87. 'visibility': 'hidden',
    88. 'float':'left',
    89. 'background': '#000 url(images/loading.gif) center center no-repeat',
    90. 'margin-top':'20px',
    91. 'margin-left':'20px',
    92. 'height':imgHeight,
    93. 'width': imgWidth,
    94. 'src': hrefSrc,
    95. 'z-index':'1000'
    96. }
    97. })
    99. div = new Element('div', {
    100. 'styles':
    101. {
    102. 'float':'left',
    103. 'width':'300px',
    104. 'height':'auto',
    105. 'display':'block',
    106. 'margin-top':'20px',
    107. 'margin-left':'20px',
    110. }
    111. })
    113. off = new Element('img', {
    114. 'styles':
    115. {
    116. 'float':'left',
    117. 'width':'64px',
    118. 'height':'20px'
    120. }
    122. })
    123. off.src="images/close.jpg";
    124. off.addEvent('click',function(){
    125. container.effect('opacity',{duration: 700, transition: Fx.Transitions.linear, wait:true}).start(0.9,0).chain(function(){
    126. container.remove();
    127. })
    128. })
    130. div.setAttribute('id','info');
    132. if($(addContent) != false){
    133. div.innerHTML = "<h1>" + titleHead + "</h1><p>" + titleContent + "</p>" + "<p>" + addContentCont + "</p>";
    134. }else{
    135. div.innerHTML = "<h1>" + titleHead + "</h1><p>" + titleContent + "</p>";
    136. }
    138. image.src = preloadPrev.src;
    139. container.injectInside(bd);
    140. image.injectInside(container);
    141. image.effect('opacity',{duration: 200, transition: Fx.Transitions.linear, wait:false}).start(0,1);
    142. container.effect('opacity',{duration: 700, transition: Fx.Transitions.linear, wait:false}).start(0,0.9);
    143. container.effect('top',{duration: 700, transition: Fx.Transitions.linear, wait:false}).start(windowHeight-40,top);
    144. div.injectAfter(image);
    145. off.injectInside(div);
    146. container.makeDraggable();
    147. return false;
    148. })
    149. }
    150. })
    Alles anzeigen


    Kann man solch eine Aktion denn wirklich nur nach "cklick" ausführen? [/url]

  • Hi,
    es sind alle Events verfügbar: http://de.selfhtml.org/javascript/sprache/eventhandler.htm
    Einfach ohne das "on" nutzen.

    Ohne Lib würdest du es so machen:

    Quellcode

    1. <form method="post" onsubmit="return func();">


    Mit MooTools machst du es so

    Quellcode

    1. $('formelement').addEvent('submit',function(){
    2. container.effect('opacity',{duration: 700, transition: Fx.Transitions.linear, wait:true}).start(0.9,0).chain(function(){
    3. container.remove();
    4. })
    5. })


    Mfg

  • Aber wenn man doch nun das komplette "mooslide.js" Javascript von oben ausführen will, nachdem zum Beispiel ein anderes Javascript bzw. in meinem Fall ein php Kontaktformular script etwas ausgibt, dann brauche ich doch keinen Event Handler oder? Ich stelle mir das wie folgt vor, hier der Code von meinem Kontaktformular, markiert an den Stellen wo das mooslide Script erscheinen soll:

    Quellcode

    1. <?php
    2. error_reporting(E_NOTICE);
    4. function valid_email($str)
    5. {
    6. return ( ! preg_match("/^([a-z0-9\+_\-]+)(\.[a-z0-9\+_\-]+)*@([a-z0-9\-]+\.)+[a-z]{2,6}$/ix", $str)) ? FALSE : TRUE;
    7. }
    9. if($_POST['name']!='' && $_POST['e_mail']!='' && valid_email($_POST['e_mail'])==TRUE && strlen($_POST['message'])>30)
    10. {
    11. $to = 'email@janwildefeld.de';
    12. $headers = 'From: '.$_POST['e_mail'].''. "\r\n" .
    13. 'Reply-To: '.$_POST['e_mail'].'' . "\r\n" .
    14. 'X-Mailer: PHP/' . phpversion();
    15. $subject = "Hello from your Website :-)";
    16. $message = htmlspecialchars($_POST['message']);
    18. if(mail($to, $subject, $message, $headers))
    19. {//Hier soll der Lightbox Clone öffnen und ein div mit der id"log res" erzuegen indem folgende Zeile ausgegeben wird
    20. echo 'Thank you '.$_POST['name'].'. Your message was sent';
    21. }
    22. else {
    23. //Hier soll wieder die Lightbox aufgehen und unten stehende Mitteilung ziegen
    24. echo "<span class=\"red\">Message not sent. Please make sure you're not
    25. running this on localhost and also that you
    26. are allowed to run mail() function from your webserver</span>";
    27. }
    28. }
    29. else {
    30. // wiederum soll die Lightbox öffnen
    31. echo "<span class=\"red\">Please make sure you filled all the required fields,
    32. that you entered a valid email and also that your message
    33. contains more then 30 characters.</span>";
    34. }
    35. ?>
    Alles anzeigen


    Der Javascript Code des Kontaktformulars sieht wie folgt aus:

    Quellcode

    1. window.addEvent('domready', function(){
    2. $('myForm').addEvent('submit', function(e) {
    4. new Event(e).stop();
    5. var log = $('log_res').empty().addClass('ajax-loading');
    6. this.send({
    7. update: log,
    8. onComplete: function() {
    9. log.removeClass('ajax-loading');
    10. document.forms['myForm'].reset();
    11. }
    12. });
    13. });
    14. });
    Alles anzeigen


    Das verstehe ich auch beides soweit. Nach Senden des Kontaktformulars wird entweder eine Erfolgsmeldung ausgegeben oder eine Meldung das etwas schief gelaufen ist. Was ich jetzt nicht begreife ist wie ich die Lightbox öffnen kann und den Div Container log und log_res in Ihr anzeigen lassen kann.

    Ferner habe ich Probleme das mooslide Script zu verstehen. Den Tutorials die ich gelesen habe konnte ich bisher immer gut folgen, aber hier kommen viele, für mich , neue Sachen dazu.

    Was bedeutet z.B. in der 3. Zeile die beiden $$ Zeichen vor der runden Klammer? (ich weiß das er dort alle Links nach dem rev Tag durchsucht, aber was bedeuten die beiden $$?

    Was beudetet in Zeile 20 das el bei $$('a').each(function(el){.
    Wieso steht das dort, was bedeutet es, das habe ich in nochc keinem Tutorial so gesehen? Ein x als Varibel ist mir schonmal untergekommen, aber el?

  • Was beudetet in Zeile 20 das el bei $$('a').each(function(el){.

    Bei der Syntax handelt es sich ja um eine anonyme Funktion.. Das el ist also dein Parameter als ob du folendes schreiben würdest

    Quellcode

    1. function blaa(el) {
    2. alert(el);
    3. }

    Die Benennung ist also vollkommen egal.

    Was bedeutet z.B. in der 3. Zeile die beiden $$ Zeichen vor der runden Klammer?

    Also vorweg: Es ist eine ganz normale Funktion - wie z.B.

    Quellcode

    1. function $$(el) {
    2. alert('el');
    3. }


    Details liest du am Besten hier: http://docs.mootools.net/Native/Element.js#$$
    Im Gegensatz zu $() kann es einfach mehrere Objekte selektieren und wendet eine Funktion auf all diese Elemente an.

    Quellcode

    1. <div id="b">easy</div>
    2. <div id="c">coding</div>


    $$('div').setStyle('color', 'red'); würde hier alle Elemente rot färben. Mit nur einem $('div') ginge das ja nicht.

    Was ich jetzt nicht begreife ist wie ich die Lightbox öffnen kann und den Div Container log und log_res in Ihr anzeigen lassen kann.

    Also dein Code oben ist ja riesig. Dieser DesignSlide wird allen Elementen mit dem rel Attribut "designSlide" zugeordnet...

    Quellcode

    1. $$('a').each(function(el){
    2. if(el.getAttribute('rel') == "designSlide"){


    Du willst ein ganz neues Element erstellen und nen Slide machen...
    also so in der Art..

    Quellcode

    1. function macheslide() {
    2. el = document.createElement('div');
    3. //code von 23 bis 148
    4. }