A Pen by Moncho Varela.
img{
display:block;
width:100%;
}
.box, .thumbnail {
display: block;
padding: 1em;
margin-top:15%;
}
.box div{
margin-bottom:3em;
}
a.button.icon.download,
a.button.icon.mail,
a.button.icon.phone{
line-height: 1.8;
}
@media (max-width:768px){
.box, .thumbnail {
display: block;
padding: 1em;
margin-top:0%;
}
}
$.ui.ready(
function(){
// overflow in descktop
$("#home").css("overflow", "auto");
// Use themes
$.ui.useOSThemes=true;
// url
var link = 'http://codepen.io/nakome/pen/waDyI.js',
menus = '',
container = '';
// get Json
$.getJSON(link,function(data){
$.each(data.gallery,function(i,e){
// Template for menu
menus += '<li><a href="#id_'+e.id+'" class="icon picture big">'+
e.author+'</a></li>';
// Template for pages
container +='<div class="panel" id="id_'+e.id+'"'+
'data-footer="none">'+
'<header>'+
'<a id="backButton" class="button backButton">Back</a>'+
'<h1>'+e.author+'</h1></header>'+
'<div class="grid">'+
'<div class="col2">'+
'<span class="thumbnail">'+
'<img src="'+e.photo+'" alt="'+e.author+'"/>'+
'</span>'+
'</div>'+
'<div class="col2">'+
'<span class="box">'+
'<h2>'+e.title+'</h2>'+
'<div>'+e.content+'</div>'+
'<div class="button-grouped flex">'+
'<a class="button icon download black">Download</a>'+
'<a class="button icon phone black">Phone</a>'+
'<a class="button icon mail black">Mail</a>'+
'</div>'+
'</span>'+
'</div>'+
'</div>'+
'</div>';
});
// render menu
$.ui.updatePanel("menu",menus);
// render pages
$.ui.updateContentDiv("#pages",container);
});
}
);
<!-- PAGE -->
<div id="afui" class="ios7">
<!-- LOADING -->
<div id="splashscreen" class="ui-loader">
<h1>Best Photos</h1><br />
<span class="ui-icon ui-icon-loading spin margin"></span><br />
<h1>Of the Web</h1>
</div>
<!-- CONTENT -->
<div id="content">
<!-- HOME -->
<div class="panel" id="home" selected="true">
<!-- HEADER -->
<header>
<h1>Best Photos of the Web</h1>
</header>
<!-- CONTAINER -->
<ul class="list" id="menu"></ul>
<!-- FOOTER -->
<footer>
<a class="icon settings" href="#settings">Settings</a>
<a class="icon bug" href="#bugs">Bugs</a>
<a class="icon info" href="#info">Info</a>
</footer>
</div><!-- / HOME -->
<!-- REST OF PAGES -->
<div id="pages"></div>
<!-- SETTINGS -->
<div class="panel" id="settings" modal="true"> COMING SOON </div>
<!-- BUGS -->
<div class="panel" id="bugs" modal="true"> COMING SOON </div>
<!-- INFO -->
<div class="panel" id="info" modal="true"> COMING SOON </div>
</div>
<!-- LEFT ASIDE -->
<div id="navbar"></div>
</div>
Json data http://codepen.io/nakome/pen/waDyI.js Theme ios7.
A Pen by Moncho Varela on CodePen.