Лайтбокс, который появляется при загрузке страницы с отображенным изображением, связанным с двумя разными веб-страницами
Мне нужен лайтбокс или всплывающее изображение, чтобы два разных раздела отображались на две разные внешние ссылки, всплывающее окно нужно загружать при открытии страницы. Я не уверен, если это возможно, вот что у меня есть до сих пор.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title></title>
<link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example1/colorbox.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script>
<script>
function openColorBox(){
$.colorbox({iframe:true, width:"800", height:"400", href: "http://image.png"});//popup/lightbox image would go here, with two different sections of it clickable to links.
}
setTimeout( openColorBox, 5000);
</script>
<style type="text/css">
#image-hotspot {
background:url()
height:285px;
width:570px;
position:absolute;
top:0px;
left:0px;
}
#image-hotspot a#current {
display:block;
height:140px;
width:585px;
position:absolute;
left:0px;
top:0px;
}
#image-hotspot a#prospective {
display:block;
height:140px;
width:585px;
position:absolute;
left:0px;
top:140px;
}
</style>
<div id="image-hotspot">
<a id="current" href="https://google.com"></a> //sample links, will be directed to two different pages
<a id="prospective" href="http://stackru.com"></a>
</div>