API tools faq
paste
Advertisement
developerjustin

Untitled

developerjustin
Jun 17th, 2014
324
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 12.39 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <title></title>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.     <script src="lib/jquery.min.js"></script>
  7.     <script src="lib/swipe.js"></script>   
  8.     <script src="lib/jquery.bxslider.min.js"></script>
  9.     <link href="lib/jquery.bxslider.css" rel="stylesheet" />
  10. </head>
  11. <body>
  12.  
  13.  
  14. <script type="text/javascript">
  15.     $(document).ready(function(){
  16.    
  17.         window.slider = $('.bxslider').bxSlider({
  18.             pagerCustom: '#thumbs'
  19.         });
  20.        
  21.         window.thumbs = $('#thumbs').bxSlider({
  22.             pager: false,
  23.             nextSelector:"#next",
  24.             nextText: " > ",       
  25.             prevSelector:"#prev",
  26.             prevText: " < "        
  27.        
  28.         });    
  29.        
  30.         $("#shownav").click(function(){
  31.             $("#nav").slideToggle("fast");
  32.         });
  33.        
  34.         $("#book").click(function(){
  35.             if($("#nav").is(":visible")){
  36.                 $("#nav").slideToggle("fast");             
  37.             }          
  38.         });    
  39.        
  40.         window.gotoPage = function(pageNumber){
  41.             window.slider.goToSlide(pageNumber);
  42.         }      
  43.        
  44.        
  45.     });
  46. </script>
  47.  
  48. <div id="nav">
  49.     <ul id='thumbs'>
  50.         <li><a data-slide-index="0" href=""><img src="aab_00001_full_0002.jpg" /></a></li>
  51.         <li><a data-slide-index="1" href=""><img src="aab_00001_full_0001.jpg" /></a></li>
  52.         <li><a data-slide-index="2" href=""><img src="aab_00001_full_0003.jpg" /></a></li> 
  53.         <li><a data-slide-index="0" href=""><img src="aab_00001_full_0002.jpg" /></a></li>
  54.         <li><a data-slide-index="1" href=""><img src="aab_00001_full_0001.jpg" /></a></li>
  55.         <li><a data-slide-index="0" href=""><img src="aab_00001_full_0002.jpg" /></a></li>
  56.         <li><a data-slide-index="1" href=""><img src="aab_00001_full_0001.jpg" /></a></li>
  57.         <li><a data-slide-index="2" href=""><img src="aab_00001_full_0003.jpg" /></a></li> 
  58.         <li><a data-slide-index="0" href=""><img src="aab_00001_full_0002.jpg" /></a></li>
  59.         <li><a data-slide-index="1" href=""><img src="aab_00001_full_0001.jpg" /></a></li>
  60.         <li><a data-slide-index="0" href=""><img src="aab_00001_full_0002.jpg" /></a></li>
  61.         <li><a data-slide-index="1" href=""><img src="aab_00001_full_0001.jpg" /></a></li>
  62.         <li><a data-slide-index="2" href=""><img src="aab_00001_full_0003.jpg" /></a></li> 
  63.         <li><a data-slide-index="0" href=""><img src="aab_00001_full_0002.jpg" /></a></li>
  64.         <li><a data-slide-index="1" href=""><img src="aab_00001_full_0001.jpg" /></a></li>
  65.         <li><a data-slide-index="0" href=""><img src="aab_00001_full_0002.jpg" /></a></li>
  66.         <li><a data-slide-index="1" href=""><img src="aab_00001_full_0001.jpg" /></a></li>
  67.         <li><a data-slide-index="2" href=""><img src="aab_00001_full_0003.jpg" /></a></li> 
  68.         <li><a data-slide-index="0" href=""><img src="aab_00001_full_0002.jpg" /></a></li>
  69.         <li><a data-slide-index="1" href=""><img src="aab_00001_full_0001.jpg" /></a></li>
  70.         <li><a data-slide-index="0" href=""><img src="aab_00001_full_0002.jpg" /></a></li>
  71.         <li><a data-slide-index="1" href=""><img src="aab_00001_full_0001.jpg" /></a></li>
  72.         <li><a data-slide-index="2" href=""><img src="aab_00001_full_0003.jpg" /></a></li> 
  73.         <li><a data-slide-index="0" href=""><img src="aab_00001_full_0002.jpg" /></a></li>
  74.         <li><a data-slide-index="1" href=""><img src="aab_00001_full_0001.jpg" /></a></li>
  75.         <li><a data-slide-index="0" href=""><img src="aab_00001_full_0002.jpg" /></a></li>
  76.         <li><a data-slide-index="1" href=""><img src="aab_00001_full_0001.jpg" /></a></li>
  77.         <li><a data-slide-index="2" href=""><img src="aab_00001_full_0003.jpg" /></a></li> 
  78.         <li><a data-slide-index="0" href=""><img src="aab_00001_full_0002.jpg" /></a></li>
  79.         <li><a data-slide-index="1" href=""><img src="aab_00001_full_0001.jpg" /></a></li>
  80.         <li><a data-slide-index="0" href=""><img src="aab_00001_full_0002.jpg" /></a></li>
  81.         <li><a data-slide-index="1" href=""><img src="aab_00001_full_0001.jpg" /></a></li>
  82.         <li><a data-slide-index="2" href=""><img src="aab_00001_full_0003.jpg" /></a></li> 
  83.         <li><a data-slide-index="0" href=""><img src="aab_00001_full_0002.jpg" /></a></li>
  84.         <li><a data-slide-index="1" href=""><img src="aab_00001_full_0001.jpg" /></a></li>
  85.         <li><a data-slide-index="0" href=""><img src="aab_00001_full_0002.jpg" /></a></li>
  86.         <li><a data-slide-index="1" href=""><img src="aab_00001_full_0001.jpg" /></a></li>
  87.         <li><a data-slide-index="2" href=""><img src="aab_00001_full_0003.jpg" /></a></li> 
  88.         <li><a data-slide-index="0" href=""><img src="aab_00001_full_0002.jpg" /></a></li>
  89.         <li><a data-slide-index="1" href=""><img src="aab_00001_full_0001.jpg" /></a></li> 
  90.     </ul>
  91.     <div id="prev" class="pagi"></div>
  92.    
  93.     <div id="next" class="pagi"></div>
  94. </div>
  95. <div id="shownav">Show Nav</div>
  96. <div id="book">
  97.     <ul class="bxslider">
  98.       <li><img src="aab_00001_full_0001.jpg" /></li>
  99.       <li><img src="aab_00001_full_0002.jpg" /></li>
  100.       <li><img src="aab_00001_full_0001.jpg" /></li>
  101.       <li><img src="aab_00001_full_0002.jpg" /></li>  
  102.       <li><img src="aab_00001_full_0001.jpg" /></li>
  103.       <li><img src="aab_00001_full_0002.jpg" /></li>
  104.       <li><img src="aab_00001_full_0001.jpg" /></li>
  105.       <li><img src="aab_00001_full_0002.jpg" /></li>
  106.       <li><img src="aab_00001_full_0001.jpg" /></li>
  107.       <li><img src="aab_00001_full_0002.jpg" /></li>
  108.       <li><img src="aab_00001_full_0001.jpg" /></li>
  109.       <li><img src="aab_00001_full_0002.jpg" /></li>
  110.       <li><img src="aab_00001_full_0001.jpg" /></li>
  111.       <li><img src="aab_00001_full_0002.jpg" /></li>
  112.       <li><img src="aab_00001_full_0001.jpg" /></li>
  113.       <li><img src="aab_00001_full_0002.jpg" /></li>
  114.       <li><img src="aab_00001_full_0001.jpg" /></li>
  115.       <li><img src="aab_00001_full_0002.jpg" /></li>
  116.       <li><img src="aab_00001_full_0001.jpg" /></li>
  117.       <li><img src="aab_00001_full_0002.jpg" /></li>
  118.       <li><img src="aab_00001_full_0001.jpg" /></li>
  119.       <li><img src="aab_00001_full_0002.jpg" /></li>
  120.       <li><img src="aab_00001_full_0001.jpg" /></li>
  121.       <li><img src="aab_00001_full_0002.jpg" /></li>  
  122.       <li><img src="aab_00001_full_0001.jpg" /></li>
  123.       <li><img src="aab_00001_full_0002.jpg" /></li>
  124.       <li><img src="aab_00001_full_0001.jpg" /></li>
  125.       <li><img src="aab_00001_full_0002.jpg" /></li>  
  126.       <li><img src="aab_00001_full_0001.jpg" /></li>
  127.       <li><img src="aab_00001_full_0002.jpg" /></li>
  128.       <li><img src="aab_00001_full_0001.jpg" /></li>
  129.       <li><img src="aab_00001_full_0002.jpg" /></li>
  130.       <li><img src="aab_00001_full_0001.jpg" /></li>
  131.       <li><img src="aab_00001_full_0002.jpg" /></li>
  132.       <li><img src="aab_00001_full_0001.jpg" /></li>
  133.       <li><img src="aab_00001_full_0002.jpg" /></li>
  134.       <li><img src="aab_00001_full_0001.jpg" /></li>
  135.       <li><img src="aab_00001_full_0002.jpg" /></li>
  136.       <li><img src="aab_00001_full_0001.jpg" /></li>
  137.       <li><img src="aab_00001_full_0002.jpg" /></li>
  138.       <li><img src="aab_00001_full_0001.jpg" /></li>
  139.       <li><img src="aab_00001_full_0002.jpg" /></li>
  140.       <li><img src="aab_00001_full_0001.jpg" /></li>
  141.       <li><img src="aab_00001_full_0002.jpg" /></li>
  142.       <li><img src="aab_00001_full_0001.jpg" /></li>
  143.       <li><img src="aab_00001_full_0002.jpg" /></li>
  144.       <li><img src="aab_00001_full_0001.jpg" /></li>
  145.       <li><img src="aab_00001_full_0002.jpg" /></li>  
  146.       <li><img src="aab_00001_full_0001.jpg" /></li>
  147.       <li><img src="aab_00001_full_0002.jpg" /></li>
  148.       <li><img src="aab_00001_full_0001.jpg" /></li>
  149.       <li><img src="aab_00001_full_0002.jpg" /></li>
  150.       <li><img src="aab_00001_full_0001.jpg" /></li>
  151.       <li><img src="aab_00001_full_0002.jpg" /></li>
  152.       <li><img src="aab_00001_full_0001.jpg" /></li>
  153.       <li><img src="aab_00001_full_0002.jpg" /></li>
  154.       <li><img src="aab_00001_full_0001.jpg" /></li>
  155.       <li><img src="aab_00001_full_0002.jpg" /></li>
  156.       <li><img src="aab_00001_full_0001.jpg" /></li>
  157.       <li><img src="aab_00001_full_0002.jpg" /></li>
  158.       <li><img src="aab_00001_full_0001.jpg" /></li>
  159.       <li><img src="aab_00001_full_0002.jpg" /></li>  
  160.       <li><img src="aab_00001_full_0001.jpg" /></li>
  161.       <li><img src="aab_00001_full_0002.jpg" /></li>
  162.       <li><img src="aab_00001_full_0001.jpg" /></li>
  163.       <li><img src="aab_00001_full_0002.jpg" /></li>
  164.       <li><img src="aab_00001_full_0001.jpg" /></li>
  165.       <li><img src="aab_00001_full_0002.jpg" /></li>
  166.       <li><img src="aab_00001_full_0001.jpg" /></li>
  167.       <li><img src="aab_00001_full_0002.jpg" /></li>
  168.       <li><img src="aab_00001_full_0001.jpg" /></li>
  169.       <li><img src="aab_00001_full_0002.jpg" /></li>
  170.       <li><img src="aab_00001_full_0001.jpg" /></li>
  171.       <li><img src="aab_00001_full_0002.jpg" /></li>
  172.       <li><img src="aab_00001_full_0001.jpg" /></li>
  173.       <li><img src="aab_00001_full_0002.jpg" /></li>
  174.       <li><img src="aab_00001_full_0001.jpg" /></li>
  175.       <li><img src="aab_00001_full_0002.jpg" /></li>
  176.       <li><img src="aab_00001_full_0001.jpg" /></li>
  177.       <li><img src="aab_00001_full_0002.jpg" /></li>
  178.       <li><img src="aab_00001_full_0001.jpg" /></li>
  179.       <li><img src="aab_00001_full_0002.jpg" /></li>  
  180.       <li><img src="aab_00001_full_0001.jpg" /></li>
  181.       <li><img src="aab_00001_full_0002.jpg" /></li>
  182.       <li><img src="aab_00001_full_0001.jpg" /></li>
  183.       <li><img src="aab_00001_full_0002.jpg" /></li>  
  184.       <li><img src="aab_00001_full_0001.jpg" /></li>
  185.       <li><img src="aab_00001_full_0002.jpg" /></li>
  186.       <li><img src="aab_00001_full_0001.jpg" /></li>
  187.       <li><img src="aab_00001_full_0002.jpg" /></li>
  188.       <li><img src="aab_00001_full_0001.jpg" /></li>
  189.       <li><img src="aab_00001_full_0002.jpg" /></li>
  190.       <li><img src="aab_00001_full_0001.jpg" /></li>
  191.       <li><img src="aab_00001_full_0002.jpg" /></li>
  192.       <li><img src="aab_00001_full_0001.jpg" /></li>
  193.       <li><img src="aab_00001_full_0002.jpg" /></li>
  194.       <li><img src="aab_00001_full_0001.jpg" /></li>
  195.       <li><img src="aab_00001_full_0002.jpg" /></li>
  196.       <li><img src="aab_00001_full_0001.jpg" /></li>
  197.       <li><img src="aab_00001_full_0002.jpg" /></li>
  198.       <li><img src="aab_00001_full_0001.jpg" /></li>
  199.       <li><img src="aab_00001_full_0002.jpg" /></li>
  200.       <li><img src="aab_00001_full_0001.jpg" /></li>
  201.       <li><img src="aab_00001_full_0002.jpg" /></li>
  202.       <li><img src="aab_00001_full_0001.jpg" /></li>
  203.       <li><img src="aab_00001_full_0002.jpg" /></li>  
  204.       <li><img src="aab_00001_full_0001.jpg" /></li>
  205.       <li><img src="aab_00001_full_0002.jpg" /></li>
  206.       <li><img src="aab_00001_full_0001.jpg" /></li>
  207.       <li><img src="aab_00001_full_0002.jpg" /></li>
  208.       <li><img src="aab_00001_full_0001.jpg" /></li>
  209.       <li><img src="aab_00001_full_0002.jpg" /></li>
  210.       <li><img src="aab_00001_full_0001.jpg" /></li>
  211.       <li><img src="aab_00001_full_0002.jpg" /></li>
  212.       <li><img src="aab_00001_full_0001.jpg" /></li>
  213.       <li><img src="aab_00001_full_0002.jpg" /></li>            
  214.       <li>
  215.             <img name="aab_00001_full_0003" src="aab_00001_full_0003.jpg" width="1500" height="2008" id="aab_00001_full_0003" usemap="#m_aab_00001_full_0003" alt="" />
  216.             <map name="m_aab_00001_full_0003" id="m_aab_00001_full_0003">
  217.                 <area shape="rect" coords="663,1518,1386,1914" href="javascript:window.gotoPage(10);" alt="" />
  218.                 <area shape="rect" coords="663,1004,1385,1502" href="javascript:window.gotoPage(13);" alt="" />
  219.                 <area shape="rect" coords="33,1004,638,1915" href="javascript:window.gotoPage(15);" alt="" />
  220.                 <area shape="rect" coords="779,281,1386,972" href="javascript:window.gotoPage(20);" alt="" />
  221.                 <area shape="rect" coords="132,255,750,972" href="javascript:window.gotoPage(9);" alt="" />
  222.             </map>
  223.       </li>
  224.     </ul>
  225. </div>
  226. <style>
  227.  
  228.     #nav{
  229.         display: none;
  230.         position: absolute;
  231.         top: 0px;
  232.         left: 0px;
  233.         background: #fff;
  234.         z-index: 9999999;
  235.         height: 227px;
  236.     }
  237.    
  238.     #shownav{
  239.         position: absolute;
  240.         left: 0px;
  241.         right: 0px;
  242.         height: 30px;
  243.         width: 100%;
  244.         display: block;
  245.         text-align: center;
  246.         z-index: 99999;
  247.         top: 0px;
  248.         background: #333;
  249.         color: #fff;
  250.         line-height: 30px;
  251.     }
  252.    
  253.     #nav .bx-viewport{
  254.         height: 200px !important;
  255.     }
  256.    
  257.     .pagi{
  258.         margin: 20px;
  259.         width: 30px;
  260.         height: 30px;      
  261.         position: absolute;    
  262.     }
  263.  
  264.     #next{
  265.         right: 0px;
  266.         top: 50px;
  267.     }
  268.  
  269.     #prev{
  270.         left: 0px;
  271.         top: 50px;
  272.     }
  273.  
  274.     .pagi a{
  275.         background: #8c1e03;
  276.         color: #fff !important;
  277.         text-decoration: none;
  278.         display: block;
  279.         text-align: center;
  280.         width: 30px;
  281.         height: 30px;
  282.     }
  283.  
  284.     .bx-wrapper{
  285.         margin: 10px !important;
  286.     }
  287.        
  288.     .bx-wrapper img{
  289.         display: block;
  290.         margin: 0 auto;
  291.     }
  292.        
  293.     #bx-pager > a, #bx-pager img{
  294.         display: inline-block;
  295.         vertical-align: middle;
  296.     }
  297.     #thumbs{
  298.         height: 150px !important;
  299.     }
  300.     #thumbs li{
  301.         width: 150px !important;
  302.     }
  303.     #thumbs img{
  304.         width: 150px;
  305.     }
  306.    
  307.     *{
  308.         -moz-box-shadow: none !important;
  309.         -webkit-box-shadow: none !important;
  310.         box-shadow: none !important;
  311.         border: none !important;       
  312.     }
  313.    
  314.     #book .bx-viewport{
  315.         height: 1000px !important;
  316.     }
  317.    
  318.    
  319.    
  320.     @media only screen and (min-width:960px) {
  321.         #book .bx-viewport{
  322.             height: 1260px !important;
  323.         }  
  324.     }
  325.    
  326.     @media only screen and (min-width:1024px) {
  327.         #book .bx-viewport{
  328.             height: 1340px !important;
  329.         }  
  330.     }      
  331.  
  332. </style>
  333.  
  334. </body>
  335. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!