Функция предварительного просмотра изображений, таких как Google и Lightbox + Iframe - PullRequest
Новая
       57

Функция предварительного просмотра изображений, таких как Google и Lightbox + Iframe

0 голосов
/ 03 апреля 2012

Как реализовать функцию предварительного просмотра изображений, такую ​​как результат поиска изображений Google, при нажатии на миниатюру Google показывает предварительный просмотр веб-сайта на заднем плане и предварительный просмотр изображения на переднем плане.

Возможно ли использовать Lightbox / Fancybox (или их клон) и опции iframe? Есть ли у вас какие-либо предложения или решения?

1 Ответ

0 голосов
/ 03 апреля 2012

сделать этот тип лайтбокса легко.Вам не обязательно использовать Lightbox / Fancybox.на самом деле есть много примеров этого онлайн, которые вы могли бы использовать для модели ... например, я только что нашел этот http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-needed/

, что я обычно делаю для этого типа всплывающих окон: makediv со следующими свойствами: 

position:fixed;
top:left;
height:100%;
z-index:(something high);
background-color:rgba(255,255,255,0.8);
display:none;

это покроет страницу полупрозрачным слоем, или занавес. Для отображения шторки я обычно добавляю функцию, которая устанавливает "display: none" в«display: block» (или, в качестве альтернативы, использует jquery .toggle ()) для события щелчка где-то на странице.

убедитесь, что содержимое всплывающего окна также инициализировано как display: none;в css

я бы поместил изображение в div и расположил его с позицией: absolute;

Я использовал этот тип шторки / всплывающего окна здесь, на этой странице ...http://asdf.us/imgrid/greatgrids нажмите «выбрать, затем нажмите здесь для получения подробной информации»

РЕДАКТИРОВАТЬ : после прочтения вашего комментария я понимаю, что это больше об использовании iframes WITH lightboxes.Я был бы осторожен при использовании iframe, потому что некоторые сайты (например, stackoverflow.com) запрещают ссылки iframe.Попробуйте этот пример ниже: 

<html><head><style>
iframe, #curtain{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
}
#curtain{
background-color:rgba(255,255,255,0.8);
z-index:10;
text-align:center;
}
#theimg{
padding:20px;
border:1px solid black;
}
</style>
</head>
<body>
<iframe src="http://en.wikipedia.org/wiki/Stack_overflow"></iframe>
<div id="curtain">
  <img id="theimg" src="http://upload.wikimedia.org/wikipedia/en/thumb/8/80/Wikipedia-logo-v2.svg/220px-Wikipedia-logo-v2.svg.png"></img>
</div>
</body></html>
...