Bigpicture.js is a library that allows infinite panning and infinite zooming in HTML pages.
1. INCLUDE CSS AND JS FILES
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"><link href="bigpicture.css" rel="stylesheet"><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script><script type="text/javascript" src="bigpicture.js"></script> |
<div id="bigpicture-container"> <div id="bigpicture" data-zoom="1" data-x="721" data-y="480"> <div contenteditable="true" class="text" data-size="57" data-x="941" data-y="735">What is BigPicture ?</div> <div contenteditable="true" class="text" data-size="11.7647" data-x="977.918" data-y="812.327">BigPicture is like an infinite notepad, in which you can pan (north/south/east/west),<br />but also in which you can ZOOM ! (Nearly) infinitely many times.<br /></div> <div contenteditable="true" class="text" data-size="20" data-x="1589.92" data-y="593.974">USAGE<br />######<br
/><br /><span class="fa fa-search"></span>
Search : F3 or CTRL+F<br /><br /><span class="fa
fa-arrows"></span> Pan : click and drag<br /><br
/><span class="fa fa-fw">? </span> Move text :
CTRL+click and drag<br /><br /><span class="fa
fa-search-plus"></span> Zoom In : PageDown or CTRL+ or<br
/> mousewheel or double-click<br
/><span class="fa fa-search-minus"></span> Zoom Out :
PageUp or CTRL- or<br /> mousewheel or
CTRL+double-click<br /><br /><span class="fa
fa-cloud"></span> Biggest picture : F2 (try it twice!)<br
/></div> <div contenteditable="true" class="text" data-size="20" data-x="853.918" data-y="946.974">Easy write in one click : click anywhere and write!</div> <div contenteditable="true" class="text" data-size="6.92042" data-x="921.984" data-y="979.527">No need to go into a Toolbox and choose to create a new Textbox... Just click anywhere and write !</div> <div contenteditable="true" class="text" data-size="20" data-x="1569.31" data-y="1022.37">More features to come soon...</div> <div contenteditable="true" class="text" data-size="20" data-x="1200.31" data-y="558.372">Don't forget to zoom out...<br />... to see the BigPicture<br /></div> <div contenteditable="true" class="text" data-size="34" data-x="2178.21" data-y="686.772">TODO</div> <div
contenteditable="true" class="text" data-size="11.7647"
data-x="2171.79" data-y="731.566">eat more vegetables!</div> <div contenteditable="true" class="text" data-size="2.39461" data-x="2184.11" data-y="745.768"><br /></div> <div
contenteditable="true" class="text" data-size="11.7647"
data-x="2307.46" data-y="682.461">buy some chocolate</div> <div contenteditable="true" class="text" data-size="11.7647" data-x="2217.45" data-y="650.697">Gaelle's website</div> <div contenteditable="true" class="text" data-size="6.92042" data-x="2301.16" data-y="716.672">playlist for next party</div> <div contenteditable="true" class="text" data-size="1.40859" data-x="2309.22" data-y="725.513">Tove
Lo - Stay High<br />Ariana Grande - Love Me Harder ft. The Weeknd
(Official Audio)<br />Cut Copy - Lights Shine On<br
/>Porter Robinson - Sea of Voices<br /><br /></div> <div contenteditable="true" class="text" data-size="98.26" data-x="-2070.87" data-y="1698.75">This is not the biggest text yet... <br /></div> <div contenteditable="true" class="text" data-size="482.751" data-x="3394.25" data-y="3171.58">Think outside the box.</div> <div contenteditable="true" class="text" data-size="20" data-x="867.486" data-y="699.86">mind mapping tool</div> <div contenteditable="true" class="text" data-size="4.07083" data-x="2185.72" data-y="745.497">carrots<br />salad<br />artichokes<br />tomatoes<br />spinach<br /></div> <div contenteditable="true" class="text" data-size="11.7647" data-x="1593.01" data-y="1051.39">(follow me on twitter @JosephErnest)</div> </div></div>
No comments:
Post a Comment