Pop-up окно может содержать эту самую картинку... или любую другую... или вообще любой контент. Нужное ведь дело, правда? Ок, сказано - сделано.

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

1. Подключаем модальное окно:

onClick: jQuery_modal

2. Там же прописываем:

<div id="1" style="display: none"><img src="/путь к каталогу картинок/1.jpg" /></div>
<div id="2" style="display: none"><img src="/путь к каталогу картинок/2.gif" /></div>
<div id="3" style="display: none"><img src="/путь к каталогу картинок/3.png" /></div>
<div id="4" style="display: none"><img src="/путь к каталогу картинок/4.png" /></div>
<div id="5" style="display: none"><img src="/путь к каталогу картинок/5.png" /></div>
<div id="6" style="display: none"><img src="/путь к каталогу картинок/6.png" /></div>
<div id="7" style="display: none"><img src="/путь к каталогу картинок/7.png" /></div>

а в longdesc теперь кратко указываем каждую из этих наших pop-up картинок следующим образом:
longdesc="#1", longdesc="#2" и т.д.

Примечание: обратите внимание, что в данном случае совершенно неважно, будет во всплывающем окне отображаться картинка или более сложный контент. Ничто вам не мешает прописать указанным образом целую страничку сайта.

В результате получаем следующее (попросту сравните со скриптом предыдущей нашей карусели по ссылке выше, все сразу встанет на свои места):

<link rel="stylesheet" href="/imageflow/imageflow.css" type="text/css" /> 
<style>
#xStep{
background-image: url(/путь к каталогу фоновой картинки/background.jpg);
background-repeat: no-repeat;
background-position: 50% top;
}
#xStep{
height: 670px !important;
}
#xStep_images {
height: 585px !important;
top: 96px;
position: relative;
}
#xStep_navigation {
}
</style>
<script src="/путь к каталогу скрипта/imageflow.js" type="text/javascript"></script>
<div id="xStep" class="imageflow">
<img src="/путь к каталогу картинок/1.jpg" longdesc="#1" width="326" height="400" alt="Изображение 1" />
<img src="/путь к каталогу картинок/2.gif" longdesc="#2" width="300" height="300" alt="Изображение 2" />
<img src="/путь к каталогу картинок/3.png" longdesc="#3" width="350" height="433" alt="Изображение 3" />
<img src="/путь к каталогу картинок/4.png" longdesc="#4" width="360" height="480" alt="Изображение 4" />
<img src="/путь к каталогу картинок/5.jpg" longdesc="#5" width="365" height="480" alt="Изображение 5" />
<img src="/путь к каталогу картинок/6.jpg" longdesc="#6" width="400" height="448" alt="Изображение 6" />
<img src="/путь к каталогу картинок/7.jpg" longdesc="#7" width="426" height="473" alt="Изображение 7" />
</div>
<script language="javascript" type="text/javascript">
domReady(function()
{
var iflow = new ImageFlow();
iflow.init({ ImageFlowID: 'xStep', xStep: 300, reflections: false, slideshow: true, slideshowAutoplay: false, opacity: true, circular: true, glideToStartID: false, opacityArray: [9,4,3,1,1], onClick: jQuery_modal });
});
</script>

<div id="1" style="display: none"><img src="/imageflow/pictures/1.jpg" /></div>
<div id="2" style="display: none"><img src="/imageflow/pictures/2.gif" /></div>
<div id="3" style="display: none"><img src="/imageflow/pictures/3.png" /></div>
<div id="4" style="display: none"><img src="/imageflow/pictures/4.png" /></div>
<div id="5" style="display: none"><img src="/images/bags/11.png" /></div>
<div id="6" style="display: none"><img src="/imageflow/pictures/4.png" /></div>
<div id="7" style="display: none"><img src="/imageflow/pictures/4.png" /></div>

3. Кроме того, размещаем на страничке карусели вот этот код:

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/js/jQuery_modal.js"></script>
<div id="dialog-modal" style="display: none"></div>

4. У нас, как видим, помимо свободных скриптов, подгружаемых из недр Глобальной Сети, работает еще и файл jQuery_modal.js ; забираем его и размещаем где-нибудь в одной из директорий сайта (на ваше усмотрение). В указанном примере, скажем, этот файл размещен /public_html/js/jQuery_modal.js

Пожалуй, это все. Размеры модального окна легко и непринужденно меняются в файле jQuery_modal.js . Шкурки (скины), позволяющие разнообразить эффекты popup, без проблем загружаются вот отсюда. Получить в итоге мы должны что-то вроде следующего (кликните по центральной картинке):