Mi pregunta en si es como hacer que una imagen aparezca cada vez que se carga una pagina html, adjunto código e imagen de ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<link href="css/magnific-poup.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="js/jquery.magnific-popup.js"></script>
<script type="text/javascript" src="js/MessagePopUp.js"></script>
<script>
$(document).ready(function() {
//Popup Notificación de Informacion de Seguridad. Elvin Diaz 21/04/2017
$.magnificPopup.open({
showCloseBtn:true,
closeOnBgClick:true,
enableEscapeKey: true,
closeOnContentClick: true,
closeBtnInside: true,
type:'image',
image: {
markup: '<div class="mfp-figure">'+
'<div class="mfp-close"></div>'+
'<div class="mfp-img"></div>'+
'</div>',
tError: 'La imagen no puede cargarse.'
},
items: {
src: 'res/bootstrap.png'
}
});
</script>
</body>
</html>
!function(o){o.MessagePopUp=function(e){var r="",i=!1,t=null,n="_self",a="20px",p="inherit",d=null,s="90%",c="",l=!1,h=null,m="_self",f="20px",g="inherit",u=1e3,v=null,x=600,U="white",P="250px",b="auto",z="20px",A="black",w="arial",y={header:{nombre:r,enlace:i,url:t,ventana:n,size:a,color:p},imagen:{url:d,ancho:s},footer:{nombre:c,enlace:l,url:h,ventana:m,size:f,color:g},propiedades:{color:U,ancho:P,alto:b,margenDerecho:z,colorLetra:A,font:w},tiempoInicio:u,tiempoSalida:v,tiempoTransicion:x},T=o.extend(y,e);void 0!==T.header.nombre&&(r=T.header.nombre),void 0!==T.header.enlace&&(i=T.header.enlace),void 0!==T.header.url&&(t=T.header.url),void 0!==T.header.ventana&&(n=T.header.ventana),void 0!==T.header.size&&(a=T.header.size),void 0!==T.header.color&&(p=T.header.color),void 0!==T.imagen.url&&(d=T.imagen.url),void 0!==T.imagen.ancho&&(s=T.imagen.ancho),void 0!==T.footer.nombre&&(c=T.footer.nombre),void 0!==T.footer.enlace&&(l=T.footer.enlace),void 0!==T.footer.url&&(h=T.footer.url),void 0!==T.footer.ventana&&(m=T.footer.ventana),void 0!==T.footer.size&&(f=T.footer.size),void 0!==T.footer.color&&(g=T.footer.color),void 0!==T.tiempoInicio&&(u=T.tiempoInicio),void 0!==T.tiempoSalida&&(v=T.tiempoSalida),void 0!==T.tiempoTransicion&&(x=T.tiempoTransicion),void 0!==T.propiedades.color&&(U=T.propiedades.color),void 0!==T.propiedades.ancho&&(P=T.propiedades.ancho),void 0!==T.propiedades.alto&&(b=T.propiedades.alto),void 0!==T.propiedades.margenDerecho&&(z=T.propiedades.margenDerecho),void 0!==T.propiedades.colorLetra&&(A=T.propiedades.colorLetra),void 0!==T.propiedades.font&&(w=T.propiedades.font),o("<div />",{id:"msgPopUp",css:{"text-align":"center",display:"none",position:"fixed",width:P,height:b,"border-radius":"10px 10px 0px 0px","background-color":U,bottom:"0px","font-family":w,right:z,"box-shadow":"2px 2px 13px #888888",color:A}}).appendTo("body"),o("#msgPopUp").css({right:z}),o("<span />",{id:"cerrarmsgPopUp",text:"x",css:{"float":"right",margin:"5px 15px",color:"#A8A8A8",cursor:"pointer","font-size":"26px","font-family":"calibri","font-weight":"900"}}).appendTo("#msgPopUp"),o("<h3 />",{id:"headerMsgPopUp",html:function(){i===!1&&o(this).html(r),i===!0&&o(this).html("<a class='enlacePopUp' href='"+t+"' target='"+n+"' style='text-decoration:none; color:"+p+";' >"+r+"</a>")},css:{color:A,margin:"15px","font-size":a,"text-align":"center",color:p}}).insertAfter("#cerrarmsgPopUp"),o("<img />",{id:"imgmsgPopUp",src:d,css:{width:s},width:s}).insertAfter("#headerMsgPopUp"),o("<h3 />",{id:"footermsgPopUp",html:function(){l===!1&&o(this).html(c),l===!0&&o(this).html("<a class='enlacePopUp' href='"+h+"' target='"+m+"' style='text-decoration:none; color:"+g+";' >"+c+"</a>")},css:{color:A,"font-size":f,"text-align":"center",margin:"15px",color:g}}).insertAfter("#imgmsgPopUp"),o("#cerrarmsgPopUp").hover(function(){o(this).css("color","red")},function(){o(this).css("color","#A8A8A8")}),o(".enlacePopUp").hover(function(){o(this).css("text-decoration","underline")},function(){o(this).css("text-decoration","none")}),o("#cerrarmsgPopUp").click(function(){o("#msgPopUp").slideUp(x)}),setTimeout(function(){o("#msgPopUp").slideDown(x),null!==v&&setTimeout(function(){o("#msgPopUp").slideUp(x)},v)},u)}}(jQuery);
<script> $(document).ready(function() { $.magnificPopup.open({ showCloseBtn:true, closeOnBgClick:true, enableEscapeKey: true, closeOnContentClick: true, closeBtnInside: true, type:'image', image: { markup: '<div class="mfp-figure">'+ '<div class="mfp-close"></div>'+ '<div class="mfp-img"></div>'+ '</div>', tError: 'La imagen no puede cargarse.' }, items: { src: 'res/bootstrap.png' } }); </script>