$('.r-slider').slider({
range: true,
min: 0,
max: 500,
values: [ 75, 300 ],
slide: function( event, ui ) {
console.log($(event.srcElement).index());
// 1 - left
// 2 - right
}
});
// Resize panels to normal
base.returnToNormal = function(num, time) {
var panels = base.$panels.not(':eq(' + (num - 1) + ')').removeClass(base.options.currentPanel);
if (base.options.reducedSize === 1) {
panels.css({
width: base.regWidth
}); // excluding fontsize change to prevent video flicker
} else {
panels.animate({
width: base.regWidth,
fontSize: base.options.reducedSize + 'em',
marginTop: (100 * base.options.reducedSize + parseInt(panels.css('padding')) * 2) + 'px'
}, (time === 0) ? time : base.options.speed);
}
};
// Zoom in on selected panel
base.growBigger = function(num, time, flag) {
var panels = base.$panels.eq(num - 1);
if (base.options.reducedSize === 1) {
panels.css({
width: base.curWidth
}); // excluding fontsize change to prevent video flicker
if (base.initialized) {
base.completed(num, flag);
}
} else {
panels.animate({
width: base.curWidth,
fontSize: '1em',
marginTop: '0'
}, (time === 0) ? time : base.options.speed, function() {
// completed event trigger
// even though animation is not queued, trigger is here because it is the last animation to complete
if (base.initialized) {
base.completed(num, flag);
}
});
}
};
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Js navigation in embeded pdf</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://github.com/cowboy/jquery-hashchange/raw/v1.3/jquery.ba-hashchange.min.js"></script>
<script type="text/javascript">
$(function() {
$(window).hashchange( function() {
var pdf_object = $('#pdf-object');
pdf_object.attr('data', pdf_object.attr('data').replace(/\.pdf.*/, '.pdf'+location.hash));
pdf_object.detach();
$('#pdf-container').append(pdf_object);
});
$(window).hashchange();
});
</script>
</head>
<body>
<ul id="nav">
<li><a href="#page=1">Page 1</a></li>
<li><a href="#page=2">Page 2</a></li>
<li><a href="#page=3">Page 3</a></li>
<li><a href="#page=4">Page 4</a></li>
<li><a href="#page=5">Page 5</a></li>
</ul>
<div id="pdf-container">
<object id="pdf-object" data="http://www.adobe.com/content/dam/Adobe/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf" type="application/pdf" width="800" height="600"></object>
</div>
</body>
</html>