• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Facebox automatisch öffnen PHP/AJAX/JS

K

Kecky

Neues Mitglied
Hallo liebes Forum,
ich stehe wiedermal vor eine Frage die ich mir nicht beantworten kann, welche Lösung warscheinlich aber recht simple ist.

Ich möchte eine Art 'Achtung-gleich-kommt-Werbung'-Script erstellen.
Damit die Seite und der Server nicht ständigen Meta Refreshes ausgesetzt ist, habe ich das ganze per AJAX geregelt. Die Auswertung der Zeiten ist auch Soweit ganz ok.
Nur möchte ich ein Alert öffnen, welches den Mod warnt. Aber kein gewöhnliches Alert sonder die Facebox, die auf unserer Seite auch schon relativ lang und gut angewendet wird.

Leider bekomme ich es als Absoluter JS Laie nicht hin, die Facebox automatisch auspringen zu lassen..

Hier einmal der PHP Code der jede Sekunde via. Ajax reloadet wird.

PHP: 
<?php
$timestamp = 
$werbepause_start_bef = mktime("23","49",0,"10","13","2010");
$werbepause_start_sec = mktime("23","49","01","10","13","2010");
$werbepause_start = mktime("23","50",0,"10","13","2010");
$werbepause_end_bef = mktime("23","51",0,"10","13","2010");
$werbepause_end = mktime("23","52",0,"10","13","2010");
$werbepause_end_show = mktime("23","53",0,"10","13","2010");



$zeit = time();

if($zeit > $werbepause_end && $zeit <= $werbepause_end_show){
    echo "
<script type='text/javascript'>
    $.facebox.reveal('Werbung startet vorbei', klass);
</script>";
}else{
    
if($zeit >= $werbepause_start_bef && $zeit < $werbepause_start){
    echo "
<script type='text/javascript'>
    $.facebox.reveal('Werbung startet in 1 Minute!', klass);
</script>";
}

if($zeit >= $werbepause_start && $zeit <= $werbepause_end_bef){
    echo "
<script type='text/javascript'>
    $.facebox.reveal('Werbung läuft!', klass');
</script>";
}

if($zeit >= $werbepause_end_bef && $zeit <= $werbepause_end){
    echo "
<script type='text/javascript'>
    $.facebox.reveal('Werbung läuft noch eine Minute', klass);
</script>";
    }
}
?>
Funktioniert leider nicht :-(

Hier nochmal die Facebox Datei

Code: 
(function($) {
  $.facebox = function(data, klass) {
    $.facebox.loading()

    if (data.ajax) fillFaceboxFromAjax(data.ajax)
    else if (data.image) fillFaceboxFromImage(data.image)
    else if (data.div) fillFaceboxFromHref(data.div)
    else if ($.isFunction(data)) data.call($)
    else $.facebox.reveal(data, klass)
  }

  /*
   * Public, $.facebox methods
   */

  $.extend($.facebox, {
    settings: {
      opacity      : 0.2,
      overlay      : true,
      loadingImage : '/facebox/loading.gif',
      closeImage   : '/facebox/closelabel.gif',
      imageTypes   : [ 'png', 'jpg', 'jpeg', 'gif' ],
      faceboxHtml  : '\
    <div id="facebox" style="display:none;"> \
      <div class="popup"> \
        <table> \
          <tbody> \
            <tr> \
              <td class="tl"/><td class="b"/><td class="tr"/> \
            </tr> \
            <tr> \
              <td class="b"/> \
              <td class="body"> \
                <div class="content"> \
                </div> \
                <div class="footer"> \
                  <a href="#" class="close"> \
                    <img src="/facebox/closelabel.gif" title="close" class="close_image" /> \
                  </a> \
                </div> \
              </td> \
              <td class="b"/> \
            </tr> \
            <tr> \
              <td class="bl"/><td class="b"/><td class="br"/> \
            </tr> \
          </tbody> \
        </table> \
      </div> \
    </div>'
    },

    loading: function() {
      init()
      if ($('#facebox .loading').length == 1) return true
      showOverlay()

      $('#facebox .content').empty()
      $('#facebox .body').children().hide().end().
        append('<div class="loading"><img src="'+$.facebox.settings.loadingImage+'"/></div>')

      $('#facebox').css({
        top:    getPageScroll()[1] + (getPageHeight() / 10),
        left:    385.5
      }).show()

      $(document).bind('keydown.facebox', function(e) {
        if (e.keyCode == 27) $.facebox.close()
        return true
      })
      $(document).trigger('loading.facebox')
    },

    reveal: function(data, klass) {
      $(document).trigger('beforeReveal.facebox')
      if (klass) $('#facebox .content').addClass(klass)
      $('#facebox .content').append(data)
      $('#facebox .loading').remove()
      $('#facebox .body').children().fadeIn(1000)
      $('#facebox').css('left', $(window).width() / 2 - ($('#facebox table').width() / 2))
      $(document).trigger('reveal.facebox').trigger('afterReveal.facebox')
    },

    close: function() {
      $(document).trigger('close.facebox')
      return false
    }
  })

  /*
   * Public, $.fn methods
   */

  $.fn.facebox = function(settings) {
    init(settings)

    function clickHandler() {
      $.facebox.loading(true)

      // support for rel="facebox.inline_popup" syntax, to add a class
      // also supports deprecated "facebox[.inline_popup]" syntax
      var klass = this.rel.match(/facebox\[?\.(\w+)\]?/)
      if (klass) klass = klass[1]

      fillFaceboxFromHref(this.href, klass)
      return false
    }

    return this.click(clickHandler)
  }

  /*
   * Private methods
   */

  // called one time to setup facebox on this page
  function init(settings) {
    if ($.facebox.settings.inited) return true
    else $.facebox.settings.inited = true

    $(document).trigger('init.facebox')
    makeCompatible()

    var imageTypes = $.facebox.settings.imageTypes.join('|')
    $.facebox.settings.imageTypesRegexp = new RegExp('\.' + imageTypes + '$', 'i')

    if (settings) $.extend($.facebox.settings, settings)
    $('body').append($.facebox.settings.faceboxHtml)

    var preload = [ new Image(), new Image() ]
    preload[0].src = $.facebox.settings.closeImage
    preload[1].src = $.facebox.settings.loadingImage

    $('#facebox').find('.b:first, .bl, .br, .tl, .tr').each(function() {
      preload.push(new Image())
      preload.slice(-1).src = $(this).css('background-image').replace(/url\((.+)\)/, '$1')
    })

    $('#facebox .close').click($.facebox.close)
    $('#facebox .close_image').attr('src', $.facebox.settings.closeImage)
  }
  
  // getPageScroll() by quirksmode.com
  function getPageScroll() {
    var xScroll, yScroll;
    if (self.pageYOffset) {
      yScroll = self.pageYOffset;
      xScroll = self.pageXOffset;
    } else if (document.documentElement && document.documentElement.scrollTop) {     // Explorer 6 Strict
      yScroll = document.documentElement.scrollTop;
      xScroll = document.documentElement.scrollLeft;
    } else if (document.body) {// all other Explorers
      yScroll = document.body.scrollTop;
      xScroll = document.body.scrollLeft;    
    }
    return new Array(xScroll,yScroll) 
  }

  // Adapted from getPageSize() by quirksmode.com
  function getPageHeight() {
    var windowHeight
    if (self.innerHeight) {    // all except Explorer
      windowHeight = self.innerHeight;
    } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
      windowHeight = document.documentElement.clientHeight;
    } else if (document.body) { // other Explorers
      windowHeight = document.body.clientHeight;
    }    
    return windowHeight
  }

  // Backwards compatibility
  function makeCompatible() {
    var $s = $.facebox.settings

    $s.loadingImage = $s.loading_image || $s.loadingImage
    $s.closeImage = $s.close_image || $s.closeImage
    $s.imageTypes = $s.image_types || $s.imageTypes
    $s.faceboxHtml = $s.facebox_html || $s.faceboxHtml
  }

  // Figures out what you want to display and displays it
  // formats are:
  //     div: #id
  //   image: blah.extension
  //    ajax: anything else
  function fillFaceboxFromHref(href, klass) {
    // div
    if (href.match(/#/)) {
      var url    = window.location.href.split('#')[0]
      var target = href.replace(url,'')
      $.facebox.reveal($(target).clone().show(), klass)

    // image
    } else if (href.match($.facebox.settings.imageTypesRegexp)) {
      fillFaceboxFromImage(href, klass)
    // ajax
    } else {
      fillFaceboxFromAjax(href, klass)
    }
  }

  function fillFaceboxFromImage(href, klass) {
    var image = new Image()
    image.onload = function() {
      $.facebox.reveal('<div class="image"><img src="' + image.src + '" /></div>', klass)
    }
    image.src = href
  }

  function fillFaceboxFromAjax(href, klass) {
    $.get(href, function(data) { $.facebox.reveal(data, klass) })
  }

  function skipOverlay() {
    return $.facebox.settings.overlay == false || $.facebox.settings.opacity === null 
  }

  function showOverlay() {
    if (skipOverlay()) return

    if ($('facebox_overlay').length == 0) 
      $("body").append('<div id="facebox_overlay" class="facebox_hide"></div>')

    $('#facebox_overlay').hide().addClass("facebox_overlayBG")
      .css('opacity', $.facebox.settings.opacity)
      .fadeIn(200)
    return false
  }

  function hideOverlay() {
    if (skipOverlay()) return

    $('#facebox_overlay').fadeOut(200, function(){
      $("#facebox_overlay").removeClass("facebox_overlayBG")
      $("#facebox_overlay").addClass("facebox_hide") 
      $("#facebox_overlay").remove()
    })
    
    return false
  }

  /*
   * Bindings
   */

  $(document).bind('close.facebox', function() {
    $(document).unbind('keydown.facebox')
    $('#facebox').fadeOut(function() {
      $('#facebox .content').removeClass().addClass('content')
      hideOverlay()
      $('#facebox .loading').remove()
    })
  })

})(jQuery);
 
Wer es noch braucht, hier die AJAX Datei
Code: 
// Beendet die asb_loading-Anzeige
function mod_loading_End()
{
document.getElementById("mod_loading").innerHTML='<img  src="images/blank.png"  style="float: left;" title="Halte neue  Ergebnisse" alt="LL" />';
}
// globale Instanz von XMLHttpRequest
var xmlHttp = false;

// XMLHttpRequest-Instanz erstellen
// ... für Internet Explorer
try {
    xmlHttp  = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
    try {
        xmlHttp  = new ActiveXObject("Microsoft.XMLHTTP");
    } catch(e) {
        xmlHttp  = false;
    }
}
// ... für Mozilla, Opera und Safari
if (!xmlHttp  && typeof XMLHttpRequest != 'undefined') {
    xmlHttp = new XMLHttpRequest();
}
// aktuelle Daten laden 
loadData2();

// alle 5 Sekunden neue Daten holen
setInterval("loadData2()",1000);

function loadData2()
{

 if (xmlHttp) {
     xmlHttp.open('GET', 'mod_werbung.php', true);
     xmlHttp.onreadystatechange = function () {
document.getElementById("mod_loading").innerHTML='<img  src="images/l_loading.gif" style="float: left; title="Lade neue  Ergebnisse" alt="LL" />';
         if (xmlHttp.readyState == 4) {
             document.getElementById("mod_werbung_content").innerHTML =  xmlHttp.responseText;
             setTimeout('mod_loading_End();',500);
         }
     };
     xmlHttp.send(null);
 }
}
& Die Leiste in der das Ganze stadtfindet

HTML: 
<div id='top_bar'>
<p align='left'><span id='mod_loading'  /></span>&nbsp;&nbsp;
<u><b>Hinweis:</b></u><div  id='mod_werbung_content'></div></p></div>
Ich hoffe das mir jmd. von euch weiterhelfen kann.

Mit allerfreundlichsten Grüßen
Kecky
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben