Javascript-форум - Помогите адаптировать скрипт к аякс-обновлению страницы

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Помогите адаптировать скрипт к аякс-обновлению страницы (https://javascript.ru/forum/jquery/57215-pomogite-adaptirovat-skript-k-ayaks-obnovleniyu-stranicy.html)

Помогите адаптировать скрипт к аякс-обновлению страницы

Есть скрипт коллажа, которые работает при обычной загрузке страницы

$(window).load(function () {
      collage();
   });


   function collage() {
      $('.Collage').collagePlus(
      {
         'fadeSpeed' : 2000,
         'targetHeight'    : 300,
         'allowPartialLastRow' : true,
      });
   }

   var resizeTimer = null;
   $(window).bind('resize', function() {
      $('.Collage img').css("opacity", 0);
      if (resizeTimer) clearTimeout(resizeTimer);
      resizeTimer = setTimeout(collage, 200);
   });

но, этот скрипт перестает работать при аякс-перезагрузке данных на странице.
автор расширения PHPBB3 сделал FAQ и описание, "Как подружить это расширение с другим?" http://www.phpbbguru.net/community/topic44157.html

Т.е. надо встроить имеющийся скрипт в следующую обертку...

Цитата:

Шаблон фикса, согласно FAQ по ссылке:
Если какое-то расширение добавляет JavaScript-функционал для сообщений, то этот функционал нужно обернуть в функцию:

function FUNCTION_NAME(e, elements) {
// Код функции.
}

После этого добавить:

$(document).ready(function (e) {
   FUNCTION_NAME(e, $(document));
});
$('#qr_posts').on('qr_loaded', FUNCTION_NAME);

Если JavaScript-функционал добавляется для содержимого сообщений (например, текста или картинок), то после этого нужно также добавить (возможно, в доработанном виде):

$('#qr_postform').on('ajax_submit_preview', function (e) {
   FUNCTION_NAME(e, $('#preview'));
});

С более простым скриптом я разобрался самостоятельно, с этим, простой оберткой

$('#qr_posts').on('qr_loaded', function (e, elements) {
      collage();
   });

дело не обошлось, надо как-то заворачивать тот код, что $(window).bind...
самостоятельно справиться не могу, прошу помощи.

alecto, загрузили данные запустили collage() и всё

$(window).load(function () {
      collage();
   });


   function collage() {
      $('.Collage').collagePlus(
      {
         'fadeSpeed' : 2000,
         'targetHeight'    : 300,
         'allowPartialLastRow' : true,
      });
   }

   var resizeTimer = null;
   $(window).bind('resize', function() {
      $('.Collage img').css("opacity", 0);
      if (resizeTimer) clearTimeout(resizeTimer);
      resizeTimer = setTimeout(collage, 200);
   });
   $('#qr_posts').on('qr_loaded', function (e, elements) {
      collage();
   });

так не работает.
или я не понимаю, что надо делать.

alecto,
$.ajax({
url: '......',
success: function(){
.... сюда collage(); }
});

alecto,
после ajax пробовали изменить экран? работает collagePlus или нет?

по привиденному мной коду: после аякса изображения не отображаются, реакции на изменение размера нет.
вот пример: заходите через вторую страницу, затем аяксом переходите на первую.
http://motobratva.com/viewtopic.php?...=5142&start=10
коллаж в первом сообщении под картинкой.
если нажать F5 на первой странице - коллаж будет виден.

если же не добавлять код

$('#qr_posts').on('qr_loaded', function (e, elements) {
	      collage();
	   });

то при всех тех же действиях (с 2 страницы на 1) и изменении размера окна - картинки появляются.
вмешаться в работу расширения не получится, т.е. адаптировать под аякс придется ту часть, которая доступна мне, т.е. скрипт включения колллажа.

по вашему коду постом выше - простите великодушно, вообще ничего не понял.

приведу для примеру:
был работающий код, который переставал работать при смене страниц аяксом

$(document).ready(function() {
      var scr_w = $(this).width();
      var scr_h = $(this).height();
      if (scr_w > 800 && scr_h > 600) {
         $("dl.thumbnail a").addClass("highslide").attr("onclick", "return hs.expand(this)");
      }
      });

после доработки согласно инструкции автора до такого вида - все работает.

function HighSlideAttachments(e, elements) {
         var scr_w = $(this).width();
         var scr_h = $(this).height();
         if (scr_w > 800 && scr_h > 600) {
            $("dl.thumbnail a").addClass("highslide").attr("onclick", "return hs.expand(this)");
         }
      }

      $(document).ready(function (e) {
         HighSlideAttachments(e, $(document));
      });

      $('#qr_posts').on('qr_loaded', HighSlideAttachments);

приведенный выше код коллажа, поидее, можно исправить аналогичным образом, но он более сложен для меня и, вроде бы должен работать, но никак не хочет.

на всякий случай попробовал вот такой вариант - тоже безрезультатно

function collage() {
      $('.Collage').collagePlus(
      {
         'fadeSpeed' : 2000,
         'targetHeight'    : 300,
         'allowPartialLastRow' : true,
      });
   }

   var resizeTimer = null;
   $(window).bind('resize', function() {
      $('.Collage img').css("opacity", 0);
      if (resizeTimer) clearTimeout(resizeTimer);
      resizeTimer = setTimeout(collage, 200);
   });

      function CollageOnAjaxPage(e, elements) {
	      collage();
      }

      $(document).ready(function (e) {
         CollageOnAjaxPage(e, $(document));
      });

      $('#qr_posts').on('qr_loaded', CollageOnAjaxPage);

Цитата:

Сообщение от alecto

этот скрипт перестает работать при аякс-перезагрузке данных на странице.

что такое скрипт перестаёт работать и что такое аякс-перезагрузка данных -- неосилил - помочь не могу извини.
вариант на последок пальцем в небо
$('#qr_posts').on('qr_loaded', $(window).resize);

для меня слишком сложно что вы творите

Цитата:

Сообщение от alecto

attr("onclick", "return hs.expand(this)");

спасибо за попытку помочь.