Использование HTML внутри кода jQuery для извлечения части URL-адреса и его повторного использования в другом месте?

Основание: у меня есть простой лайтбокс на моей домашней странице (код ниже). Он работает точно так, как я хочу: когда щелкнули изображение триггера, он вычеркивает остальную часть страницы и добавляет HTML для создания iframe для текстовой страницы, которую я хочу отобразить.

Проблема: мне нужно создать лайтбокс, где контент динамически выбирается в зависимости от кликаемого изображения. URL-адреса будут соответствовать друг другу - например, если пользователь нажимает "/media/X.png", ему будет представлен лайтбокс, содержащий iframe на странице "/X.html".

Как я могу это сделать? Мой первый удар в нем ниже (после исходного, статического кода лайтбокса). Он объединился с различными вещами, которые я читал в Интернете, и другими ответами на подобные вопросы в StackOverflow, но я супер новичок в jQuery/в основном не знаю Javascript, и я подозреваю, что неправильно использую назначение переменных и функцию "split".

Большое спасибо.

EDIT: Кто-то помог мне вставить переменную в HTML (см. Ниже). Однако, я думаю, что я неправильно назначаю переменные (см. начало второго блока кода). Вот что я пытаюсь сделать с каждой переменной: 1. pre_lightbox_trigger: захватить строку "X.png" из изображения, которое пользователь нажал. 2. lightbox_trigger: захватить только "X" (удалить ".png"). 3. lightbox_trigger_href: сделайте X в "X.html" и сделайте ссылку.

Код:

Оригинальный, статический лайтбокс:

$(document).ready(function($) {
$('.lightbox_trigger').click(function(e) {
    e.preventDefault();
    if ($('#lightbox').length > 0) {
        $('#lightbox').show();
    }
    else {
        var lightbox =
        '<div id="lightbox">' +
            '<div id="content">' +
                '<iframe src="why.html" id="lightframe" frameborder="0" seamless>' +
                '</iframe>' +
            '</div>' +
            '<p>Click outside to close</p>' +
        '</div>';
        $('body').append(lightbox);
    }
    $(document).on('click', '#lightbox', function() {
        $('#lightbox').hide();
    });
});
});

Моя попытка создать динамическую ссылку:

$(document).ready(function($) {
$('.lightbox_trigger').click(function(e) {
    e.preventDefault();
    var pre_lightbox_trigger = location.'.lightbox_trigger'.split('/').pop();
    var lightbox_trigger = pre_lightbox_trigger.split('.').pop(1);
    var lightbox_trigger_href = lightbox_trigger + ".html";
    if ($('#lightbox').length > 0) {
        $('#lightbox').show();
    }
    else {
        var lightbox =
        '<div id="lightbox">' +
            '<div id="content">' +
                '<iframe src=$lightbox_trigger_href id="lightframe" frameborder="0" seamless>' +
                '</iframe>' +
            '</div>' +
            '<p>Click outside to close</p>' +
        '</div>';
        $('body').append(lightbox);
    }
    $(document).on('click', '#lightbox', function() {
        $('#lightbox').hide();
    });
});
});

EDIT # 2: В настоящее время моя "статическая" версия лайтбокса предназначена только для "trigger_small.png". Тем не менее, я хочу, чтобы лайтбокс появлялся при нажатии других изображений (например, "vio_mass.png"). См. Ниже пример HTML:

        <div id="trigger">
            <a class="lightbox_trigger" href="media/trigger_small.png">
                <img src="media/trigger_small.png">
            </a>
        </div>
        <div class="cat" id="violence_cat">
            <div class="cat_grid" id="vio_1">
            </div>
            <div class="cat_grid" id="vio_2">
                <img src="media/vio_mass.png">
            </div>
...etc.