|
|
| Line 1: |
Line 1: |
| - | <html> | + | <html> |
| - | <head>
| + | <script type="text/javascript" src="js/jquery/jquery-1.3.2.min.js"></script> |
| - | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
| + | <script type="text/javascript" src="js/jquery/imBookFlip/jquery.imBookFlip-0.5.js"></script> |
| - | <title>Portfólio de Luciana Sciammarella, Bibliotecária e Analista de Sistemas
| + | |
| - | </title>
| + | |
| - | <link href="http://fonts.googleapis.com/css?family=Lobster|Philosopher|Tangerine:bold&subset=latin" rel="stylesheet" type="text/css">
| + | |
| - | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
| + | |
| | | | |
| - | <script type="text/javascript">
| |
| - | /*
| |
| - | * imBookFlip - a JQuery Plugin
| |
| - | * @author Les Green
| |
| - | * Copyright (C) 2009 Intriguing Minds, Inc.
| |
| - | * Version 0.6
| |
| - | *
| |
| - | * This program is free software: you can redistribute it and/or modify
| |
| - | * it under the terms of the GNU General Public License as published by
| |
| - | * the Free Software Foundation, either version 3 of the License, or
| |
| - | * (at your option) any later version.
| |
| - | *
| |
| - | * This program is distributed in the hope that it will be useful,
| |
| - | * but WITHOUT ANY WARRANTY; without even the implied warranty of
| |
| - | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
| |
| - | * GNU General Public License for more details.
| |
| - | *
| |
| - | * You should have received a copy of the GNU General Public License
| |
| - | * along with this program. If not, see <http://www.gnu.org/licenses/>.
| |
| - | *
| |
| - | * original Javascript BookFlip concept - http://www.coastworx.com/bookflip.php
| |
| - | * soundManager - Scott Schiller http://www.schillmania.com/projects/soundmanager2/
| |
| - | *
| |
| - | * Demo and Documentation can be found at:
| |
| - | * http://www.grasshopperpebbles.com
| |
| - | *
| |
| - | */
| |
| | | | |
| - | ;(function($) {
| |
| - | $.fn.extend({
| |
| - | imBookFlip: function(options) {
| |
| - | opts = $.extend({}, $.bookFlip.defaults, options);
| |
| - | return this.each(function() {
| |
| - | new $.bookFlip(this, opts);
| |
| - | });
| |
| - | }
| |
| - | });
| |
| | | | |
| - | $.bookFlip = function(obj, opts) {
| + | <style type="text/css"> |
| - | var $this = $(obj); | + | #myBook { |
| - | var numPages = 0; | + | display:none; |
| - | var leftStart=0,rightStart=1; | + | position:absolute; |
| - | var autoPage = 0; | + | left: 400px; |
| - | var page, book, bW, pageW, pageH, bookOpenW = ''; | + | top:270px; |
| - | | + | width: 604px; |
| - | if (opts.sound_manager) {
| + | height:362px; |
| - | loadAudio();
| + | } |
| - | } | + | .imBookPage { |
| | + | position:absolute; |
| | + | left:0px; |
| | + | top:0px; |
| | + | width: 300px; |
| | + | height:360px; |
| | + | color:#fff; |
| | + | overflow:hidden; |
| | + | border: solid 1px #000; |
| | + | } |
| | + | <style> |
| | | | |
| - | if (opts.iframe.src) {
| + | <div id="myBook" style="display:none;"> |
| - | loadIFrame();
| + | <div class="imBookPage" style="background: url(../js/jquery/imbookflip/stargate.jpg")></div> |
| - | } else {
| + | <div class="imBookPage" style="background: url(../js/jquery/imbookflip/team_page1.jpg")></div> |
| - | page = $('.'+opts.page_class)[0];
| + | <div class="imBookPage" style="background: url(../js/jquery/imbookflip/team_page2.jpg")></div> |
| - | init();
| + | <div class="imBookPage" style="background: url(../js/jquery/imbookflip/team_page3.jpg")></div> |
| - | }
| + | <div class="imBookPage" style="background: url(../js/jquery/imbookflip/team_page4.jpg")></div> |
| - |
| + | <div class="imBookPage" style="background: url(../js/jquery/imbookflip/team_page5.jpg")></div> |
| - | function loadIFrame() {
| + | <div class ="imBookPage" style="background: url(../ js/jquery/imbookflip/team_page6. jpg") >< /div> |
| - | var iframe = $this.append($('<iframe src="'+opts.iframe.src+'" id="bookFlipIframe" name="bookFlipIframe"></iframe>').css({"width":$this.width(), "height": $this.height(), "border": "0px", "overflow":"hidden"}));
| + | <div class="imBookPage" style="background: url( ../ js/jquery/imbookflip/team_page7. jpg") ></div > |
| - | $('#bookFlipIframe').load(function() {
| + | <div class="imBookPage" style="background: url(../js/jquery/imbookflip/team_page8.jpg")></div> |
| - | book = $('#bookFlipIframe').contents().find('#'+opts.iframe.book);
| + | <div class="imBookPage" style="background: url(../js/jquery/imbookflip/joneil.jpg")></div> |
| - | page = $('#bookFlipIframe').contents().find('.'+opts.page_class)[0];
| + | <div class="imBookPage" style="background: url(../js/jquery/imbookflip/scarter.jpg")></div> |
| - | init();
| + | <div class="imBookPage" style="background: url(../js/jquery/imbookflip/djackson.jpg")></div> |
| - | });
| + | <div class="imBookPage" style="background: url(../js/jquery/imbookflip/tealc.jpg")></div> |
| - | };
| + | <div class="imBookPage" style="background: url(../js/jquery/imbookflip/cmitchell.jpg")></div> |
| - |
| + | <div class="imBookPage" style="background: url(../js/jquery/imbookflip/vala.jpg")></div> |
| - | function init() {
| + | <div class="imBookPage" style="background: url(../js/jquery/imbookflip/stargate.jpg")></div> |
| - | bW = parseInt($(page).css('borderLeftWidth')) + parseInt($(page).css('borderRightWidth'));
| + | </div> |
| - | pageW = parseInt($(page).css('width')) + bW;
| + | |
| - | pageH = parseInt($(page).css('height')) + bW;
| + | |
| - | bookOpenW = pageW*2;
| + | |
| - |
| + | |
| - | //var showBinder=false; //change to false for no binder
| + | |
| - | //var binderImage = "parchmentring2.gif"; //location of center binder
| + | |
| - | //var binderWidth = 20; //width of center binder image
| + | |
| - |
| + | |
| - | if(opts.numPixels>100){opts.numPixels=100;};
| + | |
| - | createPages();
| + | |
| - | }; | + | |
| - |
| + | |
| - | function loadAudio() {
| + | |
| - | var ld = (opts.autoFlip != 'click');
| + | |
| - | var dbg = false;
| + | |
| - | if (opts.sound_manager.debug) {
| + | |
| - | dbg = opts.sound_manager.debug;
| + | |
| - | }
| + | |
| - | soundManager.url = opts.sound_manager.swf_loc;
| + | |
| - | soundManager.debugMode = dbg;
| + | |
| - | soundManager.onload = function() {
| + | |
| - | // soundManager is initialised, ready to use. Create a sound for this demo page.
| + | |
| - | soundManager.createSound({
| + | |
| - | id: 'bookAudio',
| + | |
| - | url: opts.sound_manager.audio_loc,
| + | |
| - | autoLoad: true,
| + | |
| - | autoPlay: ld
| + | |
| - | });
| + | |
| - | }
| + | |
| - | }; | + | |
| - |
| + | |
| - | function createPages() {
| + | |
| - | var pages;
| + | |
| - | if (opts.iframe.src) {
| + | |
| - | $this = $(book);
| + | |
| - | pages = $this.find(' > div');
| + | |
| - | } else {
| + | |
| - | var bk = $this.attr('id');
| + | |
| - | pages = $('#'+bk + ' > div');
| + | |
| - | }
| + | |
| - | $this.css({'width': (bookOpenW + 'px'), 'height': pageH+'px', 'zIndex':0});
| + | |
| - | $(pages).each(function(i) {
| + | |
| - | numPages++;
| + | |
| - | var orig = $(this).clone();
| + | |
| - | var div = $('<div>< /div >').attr({'id': 'pageNum'+i, 'class ': opts.page_class}).css( {'zIndex':20-i, 'border': 'none', 'left': pageW+'px', 'width': pageW+'px', 'height': pageH+'px'}); | + | |
| - | $(this).replaceWith(div);
| + | |
| - | $(orig).attr('id', 'pageFlip'+i);
| + | |
| - | /*if(!number_check(i)){
| + | |
| - | if(document.all){
| + | |
| - | $(orig).css('filter', 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100, FinishOpacity=30, Style=1, StartX=80, FinishX=100, StartY=0, FinishY=0)');
| + | |
| - | }else{
| + | |
| - | var pngDiv = $('<div>< /div >').css({'position': 'absolute', 'left':pWidth-80+'px', 'top':'0px', 'width':80+'px', 'height': pHeight+'px', 'background ': 'transparent url( bookflip/ black_gradient. png) top right repeat-y'}).appendTo($(orig)); | + | |
| - | }
| + | |
| - | }*/
| + | |
| - | $(div).append($(orig));
| + | |
| - | if(opts.allowPageClick){
| + | |
| - | $(orig).click(function() {
| + | |
| - | if(number_check(i)){
| + | |
| - | soundCheck();
| + | |
| - | nextPage();
| + | |
| - | } else {
| + | |
| - | prevPage();
| + | |
| - | }
| + | |
| - | });
| + | |
| - | }
| + | |
| - | });
| + | |
| - | $this.css('display', 'block');
| + | |
| - | if (opts.autoFlip == 'auto') {
| + | |
| - | doAutoFlip();
| + | |
| - | }
| + | |
| - | }; | + | |
| - |
| + | |
| - | function doAutoFlip() {
| + | |
| - | if (rightStart < numPages) {
| + | |
| - | autoPage = setTimeout(nextPage, opts.autoFlipSpeed);
| + | |
| - | } else {
| + | |
| - | clearTimeout(autoPage);
| + | |
| - | }
| + | |
| - | };
| + | |
| - |
| + | |
| - | function soundCheck() {
| + | |
| - | if ((opts.sound_manager) && (rightStart == 1)) {
| + | |
| - | if (opts.autoFlip == 'click') {
| + | |
| - | soundManager.play('bookAudio');
| + | |
| - | }
| + | |
| - | }
| + | |
| - | };
| + | |
| - |
| + | |
| - | function number_check(value) {
| + | |
| - | // returns true if value is even, false if value is odd
| + | |
| - | return ( 1 - (value%2) );
| + | |
| - | }; | + | |
| - |
| + | |
| - | function nextPage(){
| + | |
| - | var page = (opts.iframe.src) ? $this.find("#pageNum"+rightStart) : $("#pageNum"+rightStart);
| + | |
| - | var lpage = (opts.iframe.src) ? $this.find("#pageNum"+leftStart) : $("#pageNum"+leftStart);
| + | |
| - | $(page).css({'width': '0px', 'left': bookOpenW +'px', 'zIndex': 99});
| + | |
| - | $(lpage).animate({'width': 0+'px'}, 'slow');
| + | |
| - | $(page).animate({'left': 2+'px', 'width': pageW+'px'}, 'slow', function() {
| + | |
| - | $(lpage).css({'width': '0px'});
| + | |
| - | var z = $(this).css('zIndex');
| + | |
| - | $(this).css({'left': '0px', 'width': pageW+'px', 'zIndex': z-99});
| + | |
| - | $(lpage).css({'left': '', 'right': '0px'});
| + | |
| - | $(this).css({'left': '', 'right': '0px'});
| + | |
| - | leftStart=leftStart+2;
| + | |
| - | rightStart=rightStart+2;
| + | |
| - | if (opts.autoFlip != 'off') {
| + | |
| - | doAutoFlip();
| + | |
| - | }
| + | |
| - | });
| + | |
| - | }; | + | |
| - |
| + | |
| - | function prevPage(){
| + | |
| - | leftStart=leftStart-2;
| + | |
| - | rightStart=rightStart-2;
| + | |
| - | var page = (opts.iframe.src) ? $this.find("#pageNum"+leftStart) : $("#pageNum"+leftStart);
| + | |
| - | var rpage = (opts.iframe.src) ? $this.find("#pageNum"+rightStart) : $("#pageNum"+rightStart);
| + | |
| - | var pFlipL = (opts.iframe.src) ? $this.find("#pageFlip"+leftStart) : $("#pageFlip"+leftStart);
| + | |
| - | var pFlipR = (opts.iframe.src) ? $this.find("#pageFlip"+rightStart) : $("#pageFlip"+rightStart);
| + | |
| - | $(page).css({'width': '0px', 'left': '0px'});
| + | |
| - | $(pFlipR).css({'left': '', 'right': '0px'});
| + | |
| - | $(rpage).animate({'left': pageW+'px', 'width': 0+'px'}, 'slow');
| + | |
| - | $(page).animate({'left': pageW+'px', 'width': pageW+'px'}, 'slow', function() {
| + | |
| - | $(rpage).css({'width': '0px'});
| + | |
| - | $(pFlipR).css({'left': '0px'});
| + | |
| - | $(pFlipL).css({'left': '0px'});
| + | |
| - | });
| + | |
| - | };
| + | |
| - |
| + | |
| - | };
| + | |
| | | | |
| - | $.bookFlip.defaults = {
| |
| - | allowPageClick: true,
| |
| - | autoFlip: 'off', //auto, click
| |
| - | autoFlipSpeed: 7000,
| |
| - | numPixels: 20, //number of pixels to move per frame, more is faster but less smooth
| |
| - | pSpeed: '20', //page speed, 20 is best for Opera browser. Less is faster
| |
| - | page_class: '',
| |
| - | sound_manager: '', // {swf_loc: 'soundmanager/soundmanager2.swf', audio_loc: '', debug: false}
| |
| - | iframe: '' //{src: 'test_bookflip3_iframe.html', book: 'myBook'}
| |
| - | };
| |
| - | })(jQuery);
| |
| - |
| |
| - |
| |
| - |
| |
| - |
| |
| - |
| |
| - | </script>
| |
| - |
| |
| - |
| |
| - |
| |
| - | <style type="text/css" >
| |
| - | body {
| |
| - | }
| |
| - | .logos {
| |
| - | margin-top:60px;
| |
| - | text-align:center;
| |
| - | }
| |
| - | #ficha {
| |
| - | margin-left:45px;
| |
| - | margin-right:22px;
| |
| - | margin-top:200px;
| |
| - | padding:15px 10px;
| |
| - | font-family:"Courier New";
| |
| - | font-size:11px;
| |
| - | border:1px solid DarkSlateGray;
| |
| - | }
| |
| - | #ficha p {
| |
| - | margin:0;
| |
| - | }
| |
| - | #ficha p.classificacao {
| |
| - | margin-left:40px;
| |
| - | }
| |
| - | .cdd {
| |
| - | text-align:right;
| |
| - | }
| |
| - | #capa {
| |
| - | position:absolute;
| |
| - | right:50%;
| |
| - | top:49px;
| |
| - | background: 0px 0px url(newleft.png);
| |
| - | width: 409px;
| |
| - | height:651px;
| |
| - | }
| |
| - | #myBook {
| |
| - | position:absolute;
| |
| - | margin-left:auto;
| |
| - | margin-right:auto;
| |
| - | margin-top:40px;
| |
| - | left:0;
| |
| - | right:0;
| |
| - | display:none;
| |
| - | width: 818px;
| |
| - | height:651px;
| |
| - | }
| |
| - | .imBookPage {
| |
| - | position:absolute;
| |
| - | left:0px;
| |
| - | top:0px;
| |
| - | width: 407px;
| |
| - | height:651px;
| |
| - | overflow:hidden;
| |
| - | border:solid 1px transparent;
| |
| - | }
| |
| - | .imBookPage.left {
| |
| - | background: -1px 0px url(newleft.png);
| |
| - | }
| |
| - | .imBookPage.right {
| |
| - | background: -1px 0px url(newright.png);
| |
| - | }
| |
| - | .rosto h1, .rosto h2, .rosto h3 {
| |
| - | text-align:center;
| |
| - | font-family:"Lobster";
| |
| - | margin-left:40px;
| |
| - | margin-right:60px;
| |
| - | color:goldenrod;
| |
| - | text-shadow: 0em 0.1em 0.1em black;
| |
| - | /* opacity: .65; /* Standard: FF gt 1.5, Opera, Safari
| |
| - | /* filter: alpha(opacity=65); /* IE lt 8 */
| |
| - | /* -ms-filter: "alpha(opacity=65)"; /* IE 8 */
| |
| - | /* -khtml-opacity: .65; /* Safari 1.x */
| |
| - | /* -moz-opacity: .65; /* FF lt 1.5, Netscape */
| |
| - | }
| |
| - | .rosto h1 {
| |
| - | margin-top:60px;
| |
| - | font-size:54px;
| |
| - | padding-bottom:10px;
| |
| - | }
| |
| - | .rosto h2 {
| |
| - | font-size:32px;
| |
| - | margin-top:40px;
| |
| - | font-family:Philosopher;
| |
| - | color:darkgoldenrod;
| |
| - | text-shadow:none;
| |
| - | border-bottom: 2px solid goldenrod;
| |
| - | border-top: 2px solid goldenrod;
| |
| - | }
| |
| - | .rosto h3 {
| |
| - | margin-top:160px;
| |
| - | }
| |
| - | .rosto p {
| |
| - | margin-top:0;
| |
| - | }
| |
| - | .logos img {
| |
| - | margin:0px 15px;
| |
| - | }
| |
| - | .content {
| |
| - | margin-top:50px;
| |
| - | margin-left:68px;
| |
| - | margin-right:30px;
| |
| - | color:black;
| |
| - | font-size:30px;
| |
| - | font-family: Tangerine, arial, serif;
| |
| - | text-shadow: 0em 0em 0.5em goldenrod;
| |
| - | }
| |
| - | .content.right {
| |
| - | margin-left:30px;
| |
| - | margin-right:68px;
| |
| - | }
| |
| - | .content em {
| |
| - | text-decoration:underline;
| |
| - | font-style:normal;
| |
| - | font-weight:normal;
| |
| - | font-size:36px;
| |
| - | /*background:url(http://lucianasciammarella.com.br/highlight.png);*/
| |
| - | }
| |
| - | .content > p:first-child {
| |
| - | background:url(http://lucianasciammarella.com.br/us.png) top right no-repeat;
| |
| - | min-height:48px;
| |
| - | }
| |
| - | .content.right > p:first-child {
| |
| - | background:url(http://lucianasciammarella.com.br/br.png) top right no-repeat;
| |
| - | }
| |
| - |
| |
| - | </style>
| |
| - | <script type="text/javascript">
| |
| - | $(document).ready( function() {
| |
| - | $("#myBook").imBookFlip({
| |
| - | page_class: 'imBookPage'
| |
| - | });
| |
| - | });
| |
| - | </script>
| |
| - | </head>
| |
| - | <body>
| |
| - | <div id="capa">
| |
| - | <p class="logos">
| |
| - | <img src="http://lucianasciammarella.com.br/biblio1.png">
| |
| - | <img src="http://lucianasciammarella.com.br/cyber.png">
| |
| - | </p>
| |
| - | <div id="ficha">
| |
| - | <p class="cutter">
| |
| - | V632b Vicente, Luciana Silva Sciammarella
| |
| - | </p>
| |
| - | <p class="classificacao">
| |
| - | Bibliotecária & Analista de Sistemas /
| |
| - | Luciana Silva Sciammarella Vicente. – Rio de Janeiro : Lucasoft, 2010.
| |
| - | </p>
| |
| - | <p class="classificacao">
| |
| - | 10p. : il. col. ; 21cm
| |
| - | </p>
| |
| - | <p class="cdd">
| |
| - | CDD 923.020
| |
| - | </p>
| |
| - | </div>
| |
| - | </div>
| |
| - | <div id="myBook" style="display:none;">
| |
| - | <div class="imBookPage right rosto">
| |
| - | <h1>Luciana Sciammarella</h1>
| |
| - | <h2>Bibliotecária <br />&<br /> Analista de Sistemas</h2>
| |
| - | <h3><big>©</big> Lucasoft 2010</h3>
| |
| - | </div>
| |
| - |
| |
| - | <div class="imBookPage left">
| |
| - | <div class="content">
| |
| - | <p>Hello,</p>
| |
| - | <p></p>
| |
| - | <p>I am <em>Luciana Sciammarella</em>, the Head Librarian of the
| |
| - | prestigious high school Santo Agostinho in Rio de Janeiro.
| |
| - | </p>
| |
| - | <p>
| |
| - | I have a passion for books and everything related to
| |
| - | Library Science.
| |
| - | </p>
| |
| - | <p>
| |
| - | As you can see by this portfolio, I have also a passion
| |
| - | for technology and the internet.
| |
| - | </p>
| |
| - | </div>
| |
| - | </div>
| |
| - | <div class="imBookPage right">
| |
| - | <div class="content right">
| |
| - | <p>Olá,</p>
| |
| - | <p></p>
| |
| - | <p>Eu sou <em>Luciana Sciammarella</em>, a Bibliotecária Chefe
| |
| - | do prestigiado colégio Santo Agostinho no Rio de Janeiro.
| |
| - | </p>
| |
| - | <p>
| |
| - | Sou apaixonada por livros e tudo relacionado à
| |
| - | Biblioteconomia.
| |
| - | </p>
| |
| - | <p>
| |
| - | Como podem ver por este portfólio, também tenho
| |
| - | paixão por tecnologia e pela internet.
| |
| - | </p>
| |
| - | </div>
| |
| - | </div>
| |
| - | <div class="imBookPage left">
| |
| - | <div class="content">
| |
| - | <p>Título página 3</p>
| |
| - | </div>
| |
| - | </div>
| |
| - | <div class="imBookPage right">
| |
| - | <div class="content right">
| |
| - | <p>Título página 4</p>
| |
| - | </div>
| |
| - | </div>
| |
| - | </div>
| |
| - | </body>
| |
| | </html> | | </html> |
"