Отображение нескольких всплывающих модов, с новым текстом и изображением. — Показанный пример

Я надеюсь, что смогу динамически загрузить серию модалов — чтобы система работала как решение лайтбокса.

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

https://www.litmind.com — если щелкнуть любое из изображений, откроется изображение в полном разрешении, а также справа находится раздел содержимого с описанием .e.t.c

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

Мы можем делать изображения на странице с миниатюрами и в стиле мозаики — мы просто хотим расширить его возможности.

function smarty_function_display_portfolio(){

global $CONFIG;

$pdo = Capsule::connection()->getPdo();
//Gallery Settings
$file_url = 'https://'.$_SERVER['HTTP_HOST'] .'/albums/';
$base_dir = __DIR__ . '/albums/';
$script_url = $_SERVER['SERVER_NAME'];

include 'function.settingFetchAll.php';
include 'function.categoryFetchAll.php';
include 'function.pagesFetchAll.php';
include 'function.categoryFetchSingle.php';
include 'function.pagesFetchCat.php';


$setting=smarty_function_settingFetchAll($arr_parameters);


$category = preg_replace('![^\w||\d|\.]!','_',$_GET['category']);

if (strpos($_SERVER['REQUEST_URI'], 'category') !== false){


try {
$total = $pdo->query('SELECT COUNT(*) from mod_portfolio_webport ORDER BY filename')->fetchColumn();
} catch(PDOException $e) {
echo $e->getMessage();
}

$arr_pages = smarty_function_pagesFetchCat($arr_parameters);

echo '<div style="text-align: center;"><a href="portfolio">View All Albums</a></div>';

if (is_array($arr_pages))
{
foreach ($arr_pages as $pages)
$items.=
"\t".
"<div ".
" class=\"item withImage myBtn\"".
" style=\"".
"background-color: ".sprintf("#%06X", mt_rand(0x000000, 0xFFFFFF)).";".
"background-image: url('".$file_url. $pages['categoryname'].'/thumbnails/'.$pages['thumbimage']."');".
"\"".
">".
"<div class='overlay'>".
"<div class='texts'>".
"<h2>".$pages['content']."</h2>".
"<h3></h3>".
"</div>".
"</div>".
"</div>".
"\n";

$content =
"<div id=\"mosaic\" class=\"mosaic\" data-max-row-height=\"300\">\n".
"$items".
"</div><div class=\"clear\"></div>\n".
"\n".
"<script>\n".
"   $(function() {\n".
"       $('#mosaic').Mosaic({\n".
"           innerGap: 10,\n".

"           });\n".
"   });\n".
"var modal = document.getElementById('GalleryModal');".
"var btn = document.getElementById('myBtn');".
"var span = document.getElementsByClassName('close')[0];".

"</script>\n";

echo $content;
}

else {
echo 'Category = '.$_GET['category'].'<br />No Files  in the database.';
}
}

else {
smarty_function_pagesFetchAll($arr_parameters);
}
}

У кого-нибудь есть идеи?

Спасибо,
рукав моря