JQuery Slimbox Rebind nach Ajax Callback

Question

Ich habe Probleme, Slimbox2 wieder zu binden, nachdem Ajax Inhalt geladen ist. Mir ist klar, dass ich die Funktion an die Ajax-Last binden muss, aber ich habe keine Ahnung, wie ich das machen soll. Ich verwende diesen Code, um den externen Inhalt zu generieren.

$(document).ready(function() { 

$('.content_box').hide(); 
$('.sf-menuUP a').click(function(){ 
$('.content_box').fadeIn('slow'); 
}); 

var hash = window.location.hash.substr(1); 
var href = $('.sf-menuUP li a').each(function(){ 
    var href = $(this).attr('href'); 
    if(hash==href.substr(0,href.length-5)){ 
     var toLoad = hash+'.html #content'; 
     $('#content').load(toLoad) 
    }           
}); 

$('.sf-menuUP li a').click(function(){ 

    var toLoad = $(this).attr('href')+' #content'; 
    $('#content').fadeOut('fast',loadContent); 
    $('#load').remove(); 
    $('#wrapper').append('<span id="load">LOADING...</span>'); 
    $('#load').fadeIn('normal'); 
    window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5); 
    function loadContent() { 
     $('#content').load(toLoad,'',showNewContent()) 
    } 
    function showNewContent() { 
     $('#content').fadeIn('normal',hideLoader()); 
    } 
    function hideLoader() { 
     $('#load').fadeOut('normal'); 
    } 
    return false; 
}); 

});

Ich versuchte

// AUTOLOAD CODE BLOCK (MAY BE CHANGED OR REMOVED) 
jQuery(function($) { 
    $("a[rel^='lightbox']").slimbox({/* Put custom options here */}, null, function(el) { 
     return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel)); 
    }); 
}); 

an die Unterseite meines Skript fügte hinzu, dass die Hoffnung, es nur nachladen würde. Aber kein Glück. Ich habe gelesen, Live-Abfrage könnte funktionieren, aber ich weiß nicht, wie/wo/was damit zu tun ist.

Ich bin verzweifelt. Bitte irgendjemanden?

Danke.

Answer 1

Ich schaute auf liveQuery für Sie. Hier ist, was würden Sie tun müssen, um:

$("a[rel^='lightbox']").livequery(function(){ 
    $(this).slimbox({/* Put custom options here */}, null, function(el) { 
      return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel)); 
    }), function() { 
     //remove slimbox? this is called when elements no longer match 
    } 
}); 

Answer 2

Rufen Sie mich pingelig, aber die nächsten/vorherigen Funktionen funktionieren nicht, wenn das jetzt erscheint. Kann die Live-Abfrage diese auch neu binden?

Hier ist der Code für slimbox

/*! 
    Slimbox v2.02 - The ultimate lightweight Lightbox clone for jQuery 
    (c) 2007-2009 Christophe Beyls <http://www.digitalia.be> 
    MIT-style license. 
*/ 

(function($) { 

    // Global variables, accessible to Slimbox only 
    var win = $(window), options, images, activeImage = -1, activeURL, prevImage, nextImage, compatibleOverlay, middle, centerWidth, centerHeight, ie6 = !window.XMLHttpRequest, 
     operaFix = window.opera && (document.compatMode == "CSS1Compat") && ($.browser.version >= 9.3), documentElement = document.documentElement, 

    // Preload images 
    preload = {}, preloadPrev = new Image(), preloadNext = new Image(), 

    // DOM elements 
    overlay, center, image, sizer, prevLink, nextLink, bottomContainer, bottom, caption, number; 

    /* 
     Initialization 
    */ 

    $(function() { 
     // Append the Slimbox HTML code at the bottom of the document 
     $("body").append(
      $([ 
       overlay = $('<div id="lbOverlay" />')[0], 
       center = $('<div id="lbCenter" />')[0], 
       bottomContainer = $('<div id="lbBottomContainer" />')[0] 
      ]).css("display", "none") 
     ); 

     image = $('<div id="lbImage" />').appendTo(center).append(
      sizer = $('<div style="position: relative;" />').append([ 
       prevLink = $('<a id="lbPrevLink" href="#" />').click(previous)[0], 
       nextLink = $('<a id="lbNextLink" href="#" />').click(next)[0] 
      ])[0] 
     )[0]; 

     bottom = $('<div id="lbBottom" />').appendTo(bottomContainer).append([ 
      $('<a id="lbCloseLink" href="#" />').add(overlay).click(close)[0], 
      caption = $('<div id="lbCaption" />')[0], 
      number = $('<div id="lbNumber" />')[0], 
      $('<div style="clear: both;" />')[0] 
     ])[0]; 
    }); 


    /* 
     API 
    */ 

    // Open Slimbox with the specified parameters 
    $.slimbox = function(_images, startImage, _options) { 
     options = $.extend({ 
      loop: false,    // Allows to navigate between first and last images 
      overlayOpacity: 0.8,   // 1 is opaque, 0 is completely transparent (change the color in the CSS file) 
      overlayFadeDuration: 400,  // Duration of the overlay fade-in and fade-out animations (in milliseconds) 
      resizeDuration: 400,   // Duration of each of the box resize animations (in milliseconds) 
      resizeEasing: "swing",   // "swing" is jQuery's default easing 
      initialWidth: 250,   // Initial width of the box (in pixels) 
      initialHeight: 250,   // Initial height of the box (in pixels) 
      imageFadeDuration: 400,   // Duration of the image fade-in animation (in milliseconds) 
      captionAnimationDuration: 400,  // Duration of the caption animation (in milliseconds) 
      counterText: "Image {x} of {y}", // Translate or change as you wish, or set it to false to disable counter text for image groups 
      closeKeys: [27, 88, 67],  // Array of keycodes to close Slimbox, default: Esc (27), 'x' (88), 'c' (67) 
      previousKeys: [37, 80],   // Array of keycodes to navigate to the previous image, default: Left arrow (37), 'p' (80) 
      nextKeys: [39, 78]   // Array of keycodes to navigate to the next image, default: Right arrow (39), 'n' (78) 
     }, _options); 

     // The function is called for a single image, with URL and Title as first two arguments 
     if (typeof _images == "string") { 
      _images = [[_images, startImage]]; 
      startImage = 0; 
     } 

     middle = win.scrollTop() + ((operaFix ? documentElement.clientHeight : win.height())/2); 
     centerWidth = options.initialWidth; 
     centerHeight = options.initialHeight; 
     $(center).css({top: Math.max(0, middle - (centerHeight/2)), width: centerWidth, height: centerHeight, marginLeft: -centerWidth/2}).show(); 
     compatibleOverlay = ie6 || (overlay.currentStyle && (overlay.currentStyle.position != "fixed")); 
     if (compatibleOverlay) overlay.style.position = "absolute"; 
     $(overlay).css("opacity", options.overlayOpacity).fadeIn(options.overlayFadeDuration); 
     position(); 
     setup(1); 

     images = _images; 
     options.loop = options.loop && (images.length > 1); 
     return changeImage(startImage); 
    }; 

    /* 
     options: Optional options object, see jQuery.slimbox() 
     linkMapper: Optional function taking a link DOM element and an index as arguments and returning an array containing 2 elements: 
       the image URL and the image caption (may contain HTML) 
     linksFilter: Optional function taking a link DOM element and an index as arguments and returning true if the element is part of 
       the image collection that will be shown on click, false if not. "this" refers to the element that was clicked. 
       This function must always return true when the DOM element argument is "this". 
    */ 
    $.fn.slimbox = function(_options, linkMapper, linksFilter) { 
     linkMapper = linkMapper || function(el) { 
      return [el.href, el.title]; 
     }; 

     linksFilter = linksFilter || function() { 
      return true; 
     }; 

     var links = this; 

     return links.unbind("click").click(function() { 
      // Build the list of images that will be displayed 
      var link = this, startIndex = 0, filteredLinks, i = 0, length; 
      filteredLinks = $.grep(links, function(el, i) { 
       return linksFilter.call(link, el, i); 
      }); 

      // We cannot use jQuery.map() because it flattens the returned array 
      for (length = filteredLinks.length; i < length; ++i) { 
       if (filteredLinks[i] == link) startIndex = i; 
       filteredLinks[i] = linkMapper(filteredLinks[i], i); 
      } 

      return $.slimbox(filteredLinks, startIndex, _options); 
     }); 
    }; 


    /* 
     Internal functions 
    */ 

    function position() { 
     var l = win.scrollLeft(), w = operaFix ? documentElement.clientWidth : win.width(); 
     $([center, bottomContainer]).css("left", l + (w/2)); 
     if (compatibleOverlay) $(overlay).css({left: l, top: win.scrollTop(), width: w, height: win.height()}); 
    } 

    function setup(open) { 
     $("object").add(ie6 ? "select" : "embed").each(function(index, el) { 
      if (open) $.data(el, "slimbox", el.style.visibility); 
      el.style.visibility = open ? "hidden" : $.data(el, "slimbox"); 
     }); 
     var fn = open ? "bind" : "unbind"; 
     win[fn]("scroll resize", position); 
     $(document)[fn]("keydown", keyDown); 
    } 

    function keyDown(event) { 
     var code = event.keyCode, fn = $.inArray; 
     // Prevent default keyboard action (like navigating inside the page) 
     return (fn(code, options.closeKeys) >= 0) ? close() 
      : (fn(code, options.nextKeys) >= 0) ? next() 
      : (fn(code, options.previousKeys) >= 0) ? previous() 
      : false; 
    } 

    function previous() { 
     return changeImage(prevImage); 
    } 

    function next() { 
     return changeImage(nextImage); 
    } 

    function changeImage(imageIndex) { 
     if (imageIndex >= 0) { 
      activeImage = imageIndex; 
      activeURL = images[activeImage][0]; 
      prevImage = (activeImage || (options.loop ? images.length : 0)) - 1; 
      nextImage = ((activeImage + 1) % images.length) || (options.loop ? 0 : -1); 

      stop(); 
      center.className = "lbLoading"; 

      preload = new Image(); 
      preload.onload = animateBox; 
      preload.src = activeURL; 
     } 

     return false; 
    } 

    function animateBox() { 
     center.className = ""; 
     $(image).css({backgroundImage: "url(" + activeURL + ")", visibility: "hidden", display: ""}); 
     $(sizer).width(preload.width); 
     $([sizer, prevLink, nextLink]).height(preload.height); 

     $(caption).html(images[activeImage][1] || ""); 
     $(number).html((((images.length > 1) && options.counterText) || "").replace(/{x}/, activeImage + 1).replace(/{y}/, images.length)); 

     if (prevImage >= 0) preloadPrev.src = images[prevImage][0]; 
     if (nextImage >= 0) preloadNext.src = images[nextImage][0]; 

     centerWidth = image.offsetWidth; 
     centerHeight = image.offsetHeight; 
     var top = Math.max(0, middle - (centerHeight/2)); 
     if (center.offsetHeight != centerHeight) { 
      $(center).animate({height: centerHeight, top: top}, options.resizeDuration, options.resizeEasing); 
     } 
     if (center.offsetWidth != centerWidth) { 
      $(center).animate({width: centerWidth, marginLeft: -centerWidth/2}, options.resizeDuration, options.resizeEasing); 
     } 
     $(center).queue(function() { 
      $(bottomContainer).css({width: centerWidth, top: top + centerHeight, marginLeft: -centerWidth/2, visibility: "hidden", display: ""}); 
      $(image).css({display: "none", visibility: "", opacity: ""}).fadeIn(options.imageFadeDuration, animateCaption); 
     }); 
    } 

    function animateCaption() { 
     if (prevImage >= 0) $(prevLink).show(); 
     if (nextImage >= 0) $(nextLink).show(); 
     $(bottom).css("marginTop", -bottom.offsetHeight).animate({marginTop: 0}, options.captionAnimationDuration); 
     bottomContainer.style.visibility = ""; 
    } 

    function stop() { 
     preload.onload = null; 
     preload.src = preloadPrev.src = preloadNext.src = activeURL; 
     $([center, image, bottom]).stop(true); 
     $([prevLink, nextLink, image, bottomContainer]).hide(); 
    } 

    function close() { 
     if (activeImage >= 0) { 
      stop(); 
      activeImage = prevImage = nextImage = -1; 
      $(center).hide(); 
      $(overlay).stop().fadeOut(options.overlayFadeDuration, setup); 
     } 

     return false; 
    } 

})(jQuery); 

Answer 3

ich hatte das gleiche Problem versucht Button neu zu laden. Und die Implementierung von Live-Abfragen für die Slimbox hat die Galerie-Funktion genauso wie redonkeechong durchbrochen.

Aber ich fand auf dem Slimbox-Forum, dass Sie es einfach zum AJAX-Ausgang hinzufügen können. So wird es aussehen ...

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("a[rel^='lightbox']").slimbox({/* Put custom options here */}, null, function(el) { 
       return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel)); 
     }); 
    }); 
</script> 

Oder man kann es in eine separate Datei speichern und das getScript Methode nach dem AJAX-Aufruf ...

$.getScript('slimbox2/js/slimbox2.autoload.js')

Answer 4

Wie wäre es, wenn Sie Ihre showNewContent() Rückruf auf diese Weise ...

function showNewContent() { 
    // Attach slimbox to new content... 
    $('#content').find("a[rel^='lightbox']").slimbox({}, null, function(el) { 
     return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel)); 
    }); 
    // ... and then bring up the new stuff. 
    $('#content').fadeIn('normal',hideLoader()); 
} 

Answer 5

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> 
<script src="../slimbox-2.05/slimbox2.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    function pageLoad() { 
     jQuery(function ($) { 
      $("a[rel^='lightbox']").slimbox({/* Put custom options here */ 
      }, null, function (el) { 
       return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel)); 
      }); 
     }); 
    } 
</script> 

Answer 6

Da livequery für al veraltet

function refreshSlimbox() { 
    $('a[rel^=\'lightbox\']').each(function(){ 
     $('a[rel^=\'lightbox\']').slimbox({/* Put custom options here */}, null, function(el) { 
      return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel)); 
     }), function() { 
      //remove slimbox? this is called when elements no longer match 
     } 
    }); 
} 

ich die refreshSlimbox() rufen zu aktualisieren, wenn Ajax-SO VIEL bereit