| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
| <html xmlns="http://www.w3.org/1999/xhtml">
|
| <head>
|
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
| <title>Pirobox Extended</title>
|
| <link href="css_pirobox/style_3/style.css" rel="stylesheet" type="text/css" />
|
|
|
| |
| |
|
|
|
|
|
|
|
|
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
|
| <script type="text/javascript" src="js/jquery_ui.min.js"></script>
|
| <script type="text/javascript" src="js/pirobox_extended_def_08_2011.js">
|
| </script><script type="text/javascript">
|
| $(document).ready(function() {
|
| $.pirobox_ext({
|
| piro_speed : 700,
|
| zoom_mode : true,
|
| move_mode : 'mousemove',
|
| bg_alpha : 0.5,
|
| piro_scroll : false,
|
| share: true
|
| });
|
| //$('#try_it').click()
|
| });
|
| </script>
|
| <style type="text/css">
|
| body{
|
| margin:0;
|
| padding:0;
|
| font-family:verdana;
|
| font-size:14px;
|
| }
|
| ul{
|
| margin:0;
|
| padding:0;
|
| list-style-type:none;
|
| }
|
| li{float:left; margin-left:10px;}
|
| .box_main{margin:0 auto; width:800px;}
|
| .lista_media{
|
| float:left;
|
| margin:0;
|
| padding:0;
|
| }
|
| .lista_media li{
|
| float:left;
|
| width:100%;
|
| margin:0;
|
| padding:0;
|
|
|
| }
|
| .lista_media li a{
|
| float:left;
|
| display:block;
|
| width:100%;
|
| color:#444;
|
| padding:5px 0 5px 20px;
|
| margin:3px 0;
|
| background:#e9e9e9 url(css_pirobox/style_7/list_type.png) center left no-repeat;
|
| text-decoration:none;
|
|
|
| }
|
| .lista_media li a:hover{
|
| float:left;
|
| color:#111;
|
| background:#f1f1f1 url(css_pirobox/style_7/list_type.png) center left no-repeat;
|
| }
|
| .demo{
|
| float:left;
|
| width:800px;
|
| display:block;
|
| }
|
| #inline{
|
| width:800px;
|
| margin:0;
|
| padding:0;
|
| }
|
| #inline p,#inline h1,#inline h2,#inline h3,#inline h4,#inline h5{ margin:0; padding:0;}
|
| #main,#cont,.result1,.result2,.result3{
|
| margin:0;
|
| padding:5px;
|
| background:white;
|
| }
|
| </style>
|
| </head>
|
| <body>
|
| <div class="box_main">
|
|
|
| <h2 class="my_title">PIROBOX EXTENDED <span class="span_f_c">V.1.1</span> with mousemove image option</h2>
|
| <h3 class="sub_title">Ability to zoom in and drag or scroll the image within the same window<br />
|
| This plugin has been tested in ie7+ , safari 4+, chrome 9+, firefox 3.6+, opera 10+</h3>
|
| <h2 class="my_title">Images gallery</h2>
|
| <div class="demo">
|
| <ul>
|
| <li>
|
| <a href="img/33.jpg" media="gallery" id="tre" class="pirobox_gall" title="Lorem ipsum dolor sit amet.">
|
| <img src="img/33s.jpg" />
|
| </a>
|
| </li>
|
| <li>
|
| <a href="img/34.jpg" media="gallery" class="pirobox_gall" >
|
| <img src="img/34s.jpg" />
|
| </a>
|
| </li>
|
| <li>
|
| <a href="img/37.jpg" media="gallery" class="pirobox_gall" title="big image">
|
| <img src="img/37s.jpg" />
|
| </a>
|
| </li>
|
| <li>
|
| <a href="img/38.jpg" media="gallery" class="pirobox_gall" title="big image">
|
| <img src="img/38s.jpg" />
|
| </a>
|
| </li>
|
| </ul>
|
| </div>
|
| <h2 class="my_title">Single image</h2>
|
| <div class="demo">
|
| <a href="img/32.jpg" media="single" class="pirobox" title="Prova descrizione immagine." style="margin:0 10px 0 0;"><img src="img/32s.jpg" /></a></div>
|
| <h2 class="my_title">URL image error</h2>
|
| <div class="demo">
|
| <a href="img/mmsmsmsmsm.jpg" media="single" class="pirobox" title="Io e Niko" style="margin:0 10px 0 0;"><img src="img/13s.jpg" /></a>
|
| </div>
|
| <h2 class="my_title">Mix gallery</h2>
|
| <ul class="lista_media">
|
| <li>
|
| <a href="#inline" media="inline" class="pirobox_gall1" title="Inline content"><span class="span_f_c">Inline content </span><b style="font-size:12px;">Open </b><span style="font-size:10px;">Auto width and height</span></a>
|
|
|
| </li>
|
| <li> <a href="test.html .result1,.result3" media="content-610-260" class="pirobox_gall1"><span class="span_f_c">HTML Content, (load portion of code) </span><b style="font-size:12px;">Open </b><span style="font-size:10px;">(310x260px)</span></a></li>
|
|
|
| <li> <a href="test.html" title="HTML Content (load whole page)" media="content-610-500" name="click" id="try_it" class="pirobox_gall1"><span class="span_f_c">HTML Content (load whole page) </span><b style="font-size:12px;">Open </b><span style="font-size:10px;">(310x260px)</span></a></li>
|
|
|
| <li> <a href="img/13.jpg" title="Lisbona" media="gallery" class="pirobox_gall1"><span class="span_f_c">Image </span><b style="font-size:12px;">Open </b><span style="font-size:10px;">(Image size)</span></a></li>
|
|
|
|
|
| <li><a href="http://www.youtube-nocookie.com/v/Oh7sgf73Xm4?version=3&hl=it_IT" media="flash-640-505" class="pirobox_gall1" title="You tube "><span class="span_f_c">You Tube</span> <b style="font-size:12px;"> Open </b><span style="font-size:10px;"> (640x505px)</span></a></li>
|
|
|
| <li><a href="http://www.jquery.com/" media="iframe-full-full" class="pirobox_gall1" title="Google map full screen, the world :)"><span class="span_f_c">Google map </span><b style="font-size:12px;"> </b> <span style="font-size:10px;">(full screen)</span></a></li>
|
|
|
| <li><a href="http://vimeo.com/moogaloop.swf?clip_id=18361415&server=vimeo.com&show_title=1&show_byline=1&show_portrait=1&color=00ADEF&fullscreen=1&autoplay=0&loop=0" class="pirobox_gall1" media="flash-900-350" title="Vimeo video"><span class="span_f_c">Vimeo </span><b style="font-size:12px;"> Open </b><span style="font-size:10px;">(900x350px)</span></a></li>
|
| </ul>
|
| <div style="clear:both;"></div>
|
| <div class="footer">info : diegovalobra@gmail.com - credits to <a href="http://www.pirolab.it">pirolab.it</a></div>
|
| </div>
|
| <div id="inline" style="display:none; background:white;">
|
| <h2 class="h2">Inline content</h2>
|
| <p style="padding:20px;"><img src="img/27s.jpg" style="float:left; margin:0 5px 0 0;" />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
|
| </div>
|
| </body>
|
| </html>
|
| |