Я настраиваю страницу своего портфолио, где я мог бы загрузить некоторые журналы, которые я разработал. Я использую один из примеров в качестве основы, но я не могу отобразить страницы или добавить новые, не разрушая меню миниатюр. Заранее спасибо.
Я переместил все .js и .css (которые мне удалось найти ссылку на html) в каталог с именем "extras", страницы моего журнала находятся в другом, называемом "cuatroactos"
Html:
<!doctype html>
<!--[if lt IE 7 ]> <html lang="en" class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
<head>
<title>Cuatroactos</title>
<meta name="viewport" content="width = 1050, user-scalable = no" />
<script type="text/javascript" src="extras/jquery.min.1.7.js"></script>
<script type="text/javascript" src="extras/modernizr.2.5.3.min.js"></script>
<script type="text/javascript" src="extras/hash.js"></script>
</head>
<body>
<div id="canvas">
<div class="zoom-icon zoom-icon-in"></div>
<div class="magazine-viewport">
<div class="container">
<div class="magazine">
<!-- Next button -->
<div ignore="1" class="next-button"></div>
<!-- Previous button -->
<div ignore="1" class="previous-button"></div>
</div>
</div>
</div>
<!-- Thumbnails -->
<div class="thumbnails">
<div>
<ul>
<li class="i">
<img src="cuatroactos/1.jpg" width="76" height="100" class="page-1">
<span>1</span>
</li>
<li class="d">
<img src="cuatroactos/2.jpg" width="76" height="100" class="page-2">
<img src="cuatroactos/3.jpg" width="76" height="100" class="page-3">
<span>2-3</span>
</li>
<li class="d">
<img src="cuatroactos/4.jpg" width="76" height="100" class="page-4">
<img src="cuatroactos/5.jpg" width="76" height="100" class="page-5">
<span>4-5</span>
</li>
<li class="d">
<img src="cuatroactos/6.jpg" width="76" height="100" class="page-6">
<img src="cuatroactos/7.jpg" width="76" height="100" class="page-7">
<span>6-7</span>
</li>
<li class="d">
<img src="cuatroactos/8.jpg" width="76" height="100" class="page-8">
<img src="cuatroactos/9.jpg" width="76" height="100" class="page-9">
<span>8-9</span>
</li>
<li class="d">
<img src="cuatroactos/10.jpg" width="76" height="100" class="page-10">
<img src="cuatroactos/11.jpg" width="76" height="100" class="page-11">
<span>10-11</span>
</li>
<li class="d">
<img src="cuatroactos/12.jpg" width="76" height="100" class="page-12">
<img src="cuatroactos/13.jpg" width="76" height="100" class="page-13">
<span>12-13</span>
</li>
<li class="i">
<img src="cuatroactos/16.jpg" width="76" height="100" class="page-16">
<span>16</span>
</li>
<ul>
<div>
</div>
</div>
<script type="text/javascript">
function loadApp() {
$('#canvas').fadeIn(1000);
var flipbook = $('.magazine');
// Check if the CSS was already loaded
if (flipbook.width()==0 || flipbook.height()==0) {
setTimeout(loadApp, 10);
return;
}
// Create the flipbook
flipbook.turn({
// Magazine width
width: 744,
// Magazine height
height: 524,
// Duration in millisecond
duration: 1000,
// Hardware acceleration
acceleration: !isChrome(),
// Enables gradients
gradients: true,
// Auto center this flipbook
autoCenter: true,
// Elevation from the edge of the flipbook when turning a page
elevation: 50,
// The number of pages
pages: 12,
// Events
when: {
turning: function(event, page, view) {
var book = $(this),
currentPage = book.turn('page'),
pages = book.turn('pages');
// Update the current URI
Hash.go('page/' + page).update();
// Show and hide navigation buttons
disableControls(page);
$('.thumbnails .page-'+currentPage).
parent().
removeClass('current');
$('.thumbnails .page-'+page).
parent().
addClass('current');
},
turned: function(event, page, view) {
disableControls(page);
$(this).turn('center');
if (page==1) {
$(this).turn('peel', 'br');
}
},
missing: function (event, pages) {
// Add pages that aren't in the magazine
for (var i = 0; i < pages.length; i++)
addPage(pages[i], $(this));
}
}
});
// Zoom.js
$('.magazine-viewport').zoom({
flipbook: $('.magazine'),
max: function() {
return largeMagazineWidth()/$('.magazine').width();
},
when: {
swipeLeft: function() {
$(this).zoom('flipbook').turn('next');
},
swipeRight: function() {
$(this).zoom('flipbook').turn('previous');
},
resize: function(event, scale, page, pageElement) {
if (scale==1)
loadSmallPage(page, pageElement);
else
loadLargePage(page, pageElement);
},
zoomIn: function () {
$('.thumbnails').hide();
$('.made').hide();
$('.magazine').removeClass('animated').addClass('zoom-in');
$('.zoom-icon').removeClass('zoom-icon-in').addClass('zoom-icon-out');
if (!window.escTip && !$.isTouch) {
escTip = true;
$('<div />', {'class': 'exit-message'}).
html('<div>Press ESC to exit</div>').
appendTo($('body')).
delay(2000).
animate({opacity:0}, 500, function() {
$(this).remove();
});
}
},
zoomOut: function () {
$('.exit-message').hide();
$('.thumbnails').fadeIn();
$('.made').fadeIn();
$('.zoom-icon').removeClass('zoom-icon-out').addClass('zoom-icon-in');
setTimeout(function(){
$('.magazine').addClass('animated').removeClass('zoom-in');
resizeViewport();
}, 0);
}
}
});
// Zoom event
if ($.isTouch)
$('.magazine-viewport').bind('zoom.doubleTap', zoomTo);
else
$('.magazine-viewport').bind('zoom.tap', zoomTo);
// Using arrow keys to turn the page
$(document).keydown(function(e){
var previous = 37, next = 39, esc = 27;
switch (e.keyCode) {
case previous:
// left arrow
$('.magazine').turn('previous');
e.preventDefault();
break;
case next:
//right arrow
$('.magazine').turn('next');
e.preventDefault();
break;
case esc:
$('.magazine-viewport').zoom('zoomOut');
e.preventDefault();
break;
}
});
// URIs - Format #/page/1
Hash.on('^page\/([0-9]*)$', {
yep: function(path, parts) {
var page = parts[1];
if (page!==undefined) {
if ($('.magazine').turn('is'))
$('.magazine').turn('page', page);
}
},
nop: function(path) {
if ($('.magazine').turn('is'))
$('.magazine').turn('page', 1);
}
});
$(window).resize(function() {
resizeViewport();
}).bind('orientationchange', function() {
resizeViewport();
});
// Events for thumbnails
$('.thumbnails').click(function(event) {
var page;
if (event.target && (page=/page-([0-9]+)/.exec($(event.target).attr('class'))) ) {
$('.magazine').turn('page', page[1]);
}
});
$('.thumbnails li').
bind($.mouseEvents.over, function() {
$(this).addClass('thumb-hover');
}).bind($.mouseEvents.out, function() {
$(this).removeClass('thumb-hover');
});
if ($.isTouch) {
$('.thumbnails').
addClass('thumbanils-touch').
bind($.mouseEvents.move, function(event) {
event.preventDefault();
});
} else {
$('.thumbnails ul').mouseover(function() {
$('.thumbnails').addClass('thumbnails-hover');
}).mousedown(function() {
return false;
}).mouseout(function() {
$('.thumbnails').removeClass('thumbnails-hover');
});
}
// Regions
if ($.isTouch) {
$('.magazine').bind('touchstart', regionClick);
} else {
$('.magazine').click(regionClick);
}
// Events for the next button
$('.next-button').bind($.mouseEvents.over, function() {
$(this).addClass('next-button-hover');
}).bind($.mouseEvents.out, function() {
$(this).removeClass('next-button-hover');
}).bind($.mouseEvents.down, function() {
$(this).addClass('next-button-down');
}).bind($.mouseEvents.up, function() {
$(this).removeClass('next-button-down');
}).click(function() {
$('.magazine').turn('next');
});
// Events for the next button
$('.previous-button').bind($.mouseEvents.over, function() {
$(this).addClass('previous-button-hover');
}).bind($.mouseEvents.out, function() {
$(this).removeClass('previous-button-hover');
}).bind($.mouseEvents.down, function() {
$(this).addClass('previous-button-down');
}).bind($.mouseEvents.up, function() {
$(this).removeClass('previous-button-down');
}).click(function() {
$('.magazine').turn('previous');
});
resizeViewport();
$('.magazine').addClass('animated');
}
// Zoom icon
$('.zoom-icon').bind('mouseover', function() {
if ($(this).hasClass('zoom-icon-in'))
$(this).addClass('zoom-icon-in-hover');
if ($(this).hasClass('zoom-icon-out'))
$(this).addClass('zoom-icon-out-hover');
}).bind('mouseout', function() {
if ($(this).hasClass('zoom-icon-in'))
$(this).removeClass('zoom-icon-in-hover');
if ($(this).hasClass('zoom-icon-out'))
$(this).removeClass('zoom-icon-out-hover');
}).bind('click', function() {
if ($(this).hasClass('zoom-icon-in'))
$('.magazine-viewport').zoom('zoomIn');
else if ($(this).hasClass('zoom-icon-out'))
$('.magazine-viewport').zoom('zoomOut');
});
$('#canvas').hide();
// Load the HTML4 version if there's not CSS transform
yepnope({
test : Modernizr.csstransforms,
yep: ['extras/turn.js'],
nope: ['extras/turn.html4.min.js'],
both: ['extras/zoom.min.js', 'extras/magazine.js', 'extras/magazine.css'],
complete: loadApp
});
</script>
</body>
</html>
Css:
body{
overflow:hidden;
background-color:#fcfcfc;
margin:0;
padding:0;
}
.magazine-viewport .container{
position:absolute;
top:50%;
left:50%;
width:922px;
height:600px;
margin:auto;
}
.magazine-viewport .magazine{
width:922px;
height:600px;
left:-461px;
top:-300px;
}
.magazine-viewport .page{
width:461px;
height:600px;
background-color:white;
background-repeat:no-repeat;
background-size:100% 100%;
}
.magazine-viewport .zoomer .region{
display:none;
}
.magazine .region{
position:absolute;
overflow:hidden;
background:#0066FF;
opacity:0.2;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-ms-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
cursor:pointer;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
filter: alpha(opacity=20);
}
.magazine .region:hover{
opacity:0.5;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
}
.magazine .region.zoom{
opacity:0.01;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";
filter: alpha(opacity=1);
}
.magazine .region.zoom:hover{
opacity:0.2;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
filter: alpha(opacity=20);
}
.magazine .page{
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.2);
-moz-box-shadow:0 0 20px rgba(0,0,0,0.2);
-ms-box-shadow:0 0 20px rgba(0,0,0,0.2);
-o-box-shadow:0 0 20px rgba(0,0,0,0.2);
box-shadow:0 0 20px rgba(0,0,0,0.2);
}
.magazine-viewport .page img{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
margin:0;
}
.magazine .even .gradient{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:-webkit-gradient(linear, left top, right top, color-stop(0.95, rgba(0,0,0,0)), color-stop(1, rgba(0,0,0,0.2)));
background-image:-webkit-linear-gradient(left, rgba(0,0,0,0) 95%, rgba(0,0,0,0.2) 100%);
background-image:-moz-linear-gradient(left, rgba(0,0,0,0) 95%, rgba(0,0,0,0.2) 100%);
background-image:-ms-linear-gradient(left, rgba(0,0,0,0) 95%, rgba(0,0,0,0.2) 100%);
background-image:-o-linear-gradient(left, rgba(0,0,0,0) 95%, rgba(0,0,0,0.2) 100%);
background-image:linear-gradient(left, rgba(0,0,0,0) 95%, rgba(0,0,0,0.2) 100%);
}
.magazine .odd .gradient{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:-webkit-gradient(linear, right top, left top, color-stop(0.95, rgba(0,0,0,0)), color-stop(1, rgba(0,0,0,0.15)));
background-image:-webkit-linear-gradient(right, rgba(0,0,0,0) 95%, rgba(0,0,0,0.15) 100%);
background-image:-moz-linear-gradient(right, rgba(0,0,0,0) 95%, rgba(0,0,0,0.15) 100%);
background-image:-ms-linear-gradient(right, rgba(0,0,0,0) 95%, rgba(0,0,0,0.15) 100%);
background-image:-o-linear-gradient(right, rgba(0,0,0,0) 95%, rgba(0,0,0,0.15) 100%);
background-image:linear-gradient(right, rgba(0,0,0,0) 95%, rgba(0,0,0,0.15) 100%);
}
.magazine-viewport .zoom-in .even .gradient,
.magazine-viewport .zoom-in .odd .gradient{
display:none;
}
.magazine-viewport .loader{
background-image:url(../pics/loader.gif);
width:22px;
height:22px;
position:absolute;
top:280px;
left:219px;
}
.magazine-viewport .shadow{
-webkit-transition: -webkit-box-shadow 0.5s;
-moz-transition: -moz-box-shadow 0.5s;
-o-transition: -webkit-box-shadow 0.5s;
-ms-transition: -ms-box-shadow 0.5s;
-webkit-box-shadow:0 0 20px #ccc;
-moz-box-shadow:0 0 20px #ccc;
-o-box-shadow:0 0 20px #ccc;
-ms-box-shadow:0 0 20px #ccc;
box-shadow:0 0 20px #ccc;
}
.magazine-viewport .next-button,
.magazine-viewport .previous-button{
width:22px;
height:600px;
position:absolute;
top:0;
}
.magazine-viewport .next-button{
right:-22px;
-webkit-border-radius:0 15px 15px 0;
-moz-border-radius:0 15px 15px 0;
-ms-border-radius:0 15px 15px 0;
-o-border-radius:0 15px 15px 0;
border-radius:0 15px 15px 0;
}
.magazine-viewport .previous-button{
left:-22px;
-webkit-border-radius:15px 0 0 15px;
-moz-border-radius:15px 0 0 15px;
-ms-border-radius:15px 0 0 15px;
-o-border-radius:15px 0 0 15px;
border-radius:15px 0 0 15px;
}
.magazine-viewport .previous-button-hover,
.magazine-viewport .next-button-hover{
background-color:rgba(0,0,0, 0.2);
}
.magazine-viewport .previous-button-hover,
.magazine-viewport .previous-button-down{
background-image:url(../pics/arrows.png);
background-position:-4px 284px;
background-repeat:no-repeat;
}
.magazine-viewport .previous-button-down,
.magazine-viewport .next-button-down{
background-color:rgba(0,0,0, 0.4);
}
.magazine-viewport .next-button-hover,
.magazine-viewport .next-button-down{
background-image:url(../pics/arrows.png);
background-position:-38px 284px;
background-repeat:no-repeat;
}
.magazine-viewport .zoom-in .next-button,
.magazine-viewport .zoom-in .previous-button{
display:none;
}
.animated{
-webkit-transition:margin-left 0.5s;
-moz-transition:margin-left 0.5s;
-ms-transition:margin-left 0.5s;
-o-transition:margin-left 0.5s;
transition:margin-left 0.5s;
}
.thumbnails{
position:absolute;
bottom:0;
left:0;
width:100%;
height:140px;
z-index:1;
}
.thumbnails > div{
width:1050px;
height:100px;
margin:20px auto;
}
.thumbnails ul{
margin:0;
padding:0;
text-align:center;
-webkit-transform:scale3d(0.5, 0.5, 1);
-moz-transform:scale3d(0.5, 0.5, 1);
-o-transform:scale3d(0.5, 0.5, 1);
-ms-transform:scale3d(0.5, 0.5, 1);
transform:scale3d(0.5, 0.5, 1);
-webkit-transition:-webkit-transform ease-in-out 100ms;
-moz-transition:-moz-transform ease-in-out 100ms;
-ms-transition:-ms-transform ease-in-out 100ms;
-o-transition:-o-transform ease-in-out 100ms;
transition:transform ease-in-out 100ms;
}
.thumbanils-touch ul{
-webkit-transform:none;
-moz-transform:none;
-o-transform:none;
-ms-transform:none;
transform:none;
}
.thumbnails-hover ul{
-webkit-transform:scale3d(0.6, 0.6, 1);
-moz-transform:scale3d(0.6, 0.6, 1);
-o-transform:scale3d(0.6, 0.6, 1);
-ms-transform:scale3d(0.6, 0.6, 1);
transform:scale3d(0.6, 0.6, 1);
}
.thumbnails li{
list-style:none;
display:inline-block;
margin:0 5px;
-webkit-box-shadow:0 0 10px #ccc;
-moz-box-shadow:0 0 10px #ccc;
-ms-box-shadow:0 0 10px #ccc;
-o-box-shadow:0 0 10px #ccc;
box-shadow:0 0 10px #ccc;
-webkit-transition:-webkit-transform 60ms;
-moz-transition:-webkit-transform 60ms;
-o-transition:-webkit-transform 60ms;
-ms-transition:-webkit-transform 60ms;
transition:-webkit-transform 60ms;
}
.thumbnails li span{
display:none;
}
.thumbnails .current{
-webkit-box-shadow:0 0 10px red;
-moz-box-shadow:0 0 10px red;
-ms-box-shadow:0 0 10px red;
-o-box-shadow:0 0 10px red;
box-shadow:0 0 10px red;
}
.thumbnails .thumb-hover{
-webkit-transform:scale3d(1.3, 1.3, 1);
-moz-transform:scale3d(1.3, 1.3, 1);
-o-transform:scale3d(1.3, 1.3, 1);
-ms-transform:scale3d(1.3, 1.3, 1);
transform:scale3d(1.3, 1.3, 1);
-webkit-box-shadow:0 0 10px #666;
-moz-box-shadow:0 0 10px #666;
-ms-box-shadow:0 0 10px #666;
-o-box-shadow:0 0 10px #666;
box-shadow:0 0 10px #666;
}
.thumbanils-touch .thumb-hover{
-webkit-transform:none;
-moz-transform:none;
-o-transform:none;
-ms-transform:none;
transform:none;
}
.thumbnails .thumb-hover span{
position:absolute;
bottom:-30px;
left:0;
z-index:2;
width:100%;
height:30px;
font:bold 15px arial;
line-height:30px;
color:#666;
display:block;
cursor:default;
}
.thumbnails img{
float:left;
}
.exit-message{
position: absolute;
top:10px;
left:0;
width:100%;
height:40px;
z-index:10000;
}
.exit-message > div{
width:140px;
height:30px;
margin:auto;
background:rgba(0,0,0,0.5);
text-align:center;
font:12px arial;
line-height:30px;
color:white;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-ms-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
}
.zoom-icon{
position:absolute;
z-index:1000;
width:22px;
height:22px;
top:10px;
right:10px;
background-image:url(../pics/zoom-icons.png);
background-size:88px 22px;
}
.zoom-icon-in{
background-position:0 0;
cursor: pointer;
}
.zoom-icon-in.zoom-icon-in-hover{
background-position:-22px 0;
cursor: pointer;
}
.zoom-icon-out{
background-position:-44px 0;
}
.zoom-icon-out.zoom-icon-out-hover{
background-position:-66px 0;
cursor: pointer;
}
.bottom{
position:absolute;
left:0;
bottom:0;
width:100%;
}