Галерея на Jquery не понимает динамически добавленные элементы
 

Есть галерея - надстройка над Jquery. Не принципиально какая, сути это не меняет.
Хочу динамически "подбрасывать" в div id='info' картинки. Делаю это так.

$("#Info").append("<a href='gallery/picture1.jpg' class='with-caption image-link' title='апрапрапрап'><img src='gallery/picture1.jpg' width='172' height='105' />");

Они появляются и отображаются, но скрипт их не берет в свою "карусель", т.е. они открываются в новом окне, как обычные изображения.

Копаться во внутренностях галереи в попытке переписать её под динамические элементы, думаю у меня не получится. Есть решение попроще? Например перезапустить скрипт, чтобы он "понял" динамические картинки.

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

ice99,
хорошая галерея содержит обычно и метод добавления... может документацию почитать?

Т.е. мне надо после добавления картинок в тело html, вызвать функцию их инициализации галереей? Т.е. переписывать скрипт галереи не нужно.
А может посоветуете хорошую галерею, м описанным методом добавления?

ice99,
http://kenwheeler.github.io/slick/

секция Add & Remove

Спасибо большое за наводку.

Увидел. Посмотрел. Но мне нужен эффект лайтбокса (раскрывать изображение на весь экран), а это просто каруселька. Да, в ней можно синхронизировать большое изображение с его тумбнэйлом, но это немножко не то.

ice99, смотрите документацию к вашей текущей галерее.
Ищите методы "add/append/prepend" или "refresh".
Если ни одного из выше названных методов нет, ищите метод "destroy".

Ps. если для её инициализирования нужно применить к элементам страницы какой-то метод (как-то так: $('img').fancybox()), то можно получить добавленные элементы и вызвать этот метод для них.

Спасибо за совет.
Нашел галерею http://lokeshdhakar.com/projects/lightbox2/
Я так понимаю это "старичок", но отлично подхватывает динамически добавленные изображения.

И всё-таки засада.
Я сделал ТЕСТОВУЮ конструкцию "кнопка" + "инпут".
Пишу в инпуте имя слайда, нажимаю на кнопку - слайд добавляется.
Слайды добавляются, если я использую следующую конструкцию.
(я сократил содержимое добавляемого тега, это не ошибка, просто упрощение)

$(document).ready(function() {

    $("#AddByButton").click(function() { //Добавление по кнопке
      var SlideName = $('#SlideName').val(); //Получаем имя из инпута
        AddSlide(SlideName); // Вызываем функцию добавления
    });

 function AddSlide(SlideName){ //Функция добавления слайда
      $("#Info").append("<p>" + SlideName +"</p>"); //В определенный div добавляем данные
    }

});

Я и обрадовался.

Однако, мне то нужно вызывать добавление из моей работающей прораммы. т.е. У меня в теле должно быть например AddSlide(picture1.jpg).

Так вот при попытке вызвать AddSlide(picture1.jpg) у меня выдается ошибка AddSlide не определена. Как быть?

перенести AddSlide в строку 0