Вставьте содержимое div в iframe (или альтернативное решение, работающее с prettyPhoto jquery)

Question

Я работаю над корпоративной веб-страницей, работающей с isotope и prettyPhoto, и я ищу способ вставить содержимое div в iframe:

Изотоп служит для отображения возможностей работы (плитки), и когда пользователи нажимают на одну из них, prettyPhoto отображает лайтбокс с описанием работы. Я также использую prettyPhoto для показа картинок и видео, часть кода, которая прекрасно работает.

Моя проблема в том, что красивые фотографии отображают только встроенный контент, когда речь идет о текстовой информации, и кажется невозможным адаптировать ширину. Вот почему я сделал об использовании iframes:

<a href="#Descriptiondiv?iframe=true&width=80%" rel="prettyPhoto"></a>

Моя проблема в том, что он показывает не div, а всю страницу в iframe. Есть ли способ вставить содержимое div в iframe или любой другой способ, который работает с prettyPhoto? Я попробовал несколько других вариантов лайтбокса, но этот был лучшим, который я нашел.

Я искал div внутри iframe, но это тоже кажется невозможным..

Извините, если это не очень хорошо объяснено, я не профессионал (если вам все еще интересно), спасибо за любое информационное / альтернативное решение, о котором вы могли бы подумать.

Лучший,

Answer 1

Вам действительно нужно использовать iframe? Это работает для меня:

CSS:

#Descriptiondiv {
   width:80% !important;
   height:250px;
   display:none;
}

HTML:

<div id="Descriptiondiv">  CONTENT HERE </div>
<a href="#Descriptiondiv" rel="prettyPhoto">link</a>

Вам нужно использовать! Важное, иначе prettyPhoto будет использовать ширину по умолчанию (500).