Fotorama Img Gallery - with customization

dynamic content - FIT content

by pj_js15

HTML

<link rel="stylesheet" href="http://fotorama.s3.amazonaws.com/4.4.9/fotorama.css">
<script src="http://fotorama.s3.amazonaws.com/4.4.9/fotorama.js"></script>
<script src="http://knockoutjs.com/downloads/knockout-3.0.0.js"></script>
<!-- 
data-fit="cover" 
-->
<div class="fotorama" data-width="100%" data-ratio="4/3" data-hash="true" data-maxheight="800" data-minheight="200" data-nav="thumbs" data-keyboard="true" data-allowfullscreen="native" data-shadows="false" data-thumbheight="48" data-keyboard="true">         
</div>

<div class="myNav">
    <!--
    <a id="lnkPrev" href="javascript: void(0)">Previous</a>
    <span class="spacer">&nbsp;</span>
    <a id="lnkNext" href="javascript: void(0)">Next</a>
    <span class="spacer">&nbsp;</span>
-->       
</div>

<div id="statusBar">
    <span id="currentSlide">1</span>
    of
    <span id="totalNum"></span>
</div>

<!--
<div id="animateIcon">
    <a id="lnkDisplayLinks" href="javascript: void(0)">Links</a>
</div>
-->

<div id="dialog-modal" title="URLs" style="display:hidden;">    
    <!--<input type="text" class="dialogInput" value="https://sample-url.com" />
    <br />
    <input type="text" class="dialogInput" value="https://another-sample-url.com" />
      -->
    <table>
        <thead>
            <tr><th>URL List</th></tr>
        </thead>
        <tbody data-bind="foreach: items">
            <tr>
                <td>
                    <a data-bind="attr: {href: url}">
                        <span type="text" data-bind="text: url"></span>
                    </a>
                </td>            
            </tr>
        </tbody>
    </table>
</div>

CSS

body
{
    background-color: #000;
     font-family: arial;
    color: white;
}

.spacer{
    clear:none;
    margin-left: 5px;
    margin-right: 5px;   
}

.myNav{
    margin-top: 10px;    
}

.dialogText{
    font-size: 11px;   
}

.dialogInput {
    padding: 2px;
    width: 350px;
    margin-top: 10px;
}

#statusBar{
    background-color: white;
    width: 70px;
    height: 20px;
    float: left;
    font-weight: bold;
    top: 0;
    position: absolute;
    padding: 5px;
    color: black;
    opacity: 0.5;
    margin-top: 5px;
    border: 3px solid white;
}

#animateIcon{
    background-color: white;
    width: 70px;
    height: 20px;
    float: left;
    font-weight: bold;
    bottom: 0;
    right:0;
    position: absolute;
    padding: 5px;
    color: black;
    opacity: 0.5;
    margin-top: 55px;
    border: 3px solid white;
}










.liveExample { padding: 1em; background-color: #EEEEDD; border: 1px solid #CCC; max-width: 655px; color: black;}
.liveExample input { font-family: Arial; }
.liveExample b { font-weight: bold; }
.liveExample p { margin-top: 0.9em; margin-bottom: 0.9em; }
.liveExample select[multiple] { width: 100%; height: 8em; }
.liveExample h2 { margin-top: 0.4em; }

.ko-grid { margin-bottom: 1em; width: 25em; border: 1px solid silver; background-color:White; }
.ko-grid th { text-align:left; background-color: Black; color:White; }
.ko-grid td, th { padding: 0.4em; }
.ko-grid tr:nth-child(odd) { background-color: #DDD; }
.ko-grid-pageLinks { margin-bottom: 1em; }
.ko-grid-pageLinks a { padding: 0.5em; }
.ko-grid-pageLinks a.selected { background-color: Black; color: White; }
.liveExample { height:20em; overflow:auto } /* Mobile Safari reflows pages slowly, so fix the height to avoid the need for reflows */

li { list-style-type: disc; margin-left: 20px; }

JavaScript

$().ready(function(){

    $('.fotorama').fotorama({
            data: [
              { img: 'http://fotorama.s3.amazonaws.com/i/okonechnikov/4.jpg', thumb: 'http://fotorama.s3.amazonaws.com/i/okonechnikov/4-thumb.jpg' },
              { img: 'http://fotorama.s3.amazonaws.com/i/okonechnikov/5.jpg', thumb: 'http://fotorama.s3.amazonaws.com/i/okonechnikov/5-thumb.jpg' },
              { img: 'http://fotorama.s3.amazonaws.com/i/okonechnikov/6.jpg', thumb: 'http://fotorama.s3.amazonaws.com/i/okonechnikov/6-thumb.jpg' },
              { img: 'http://fotorama.s3.amazonaws.com/i/okonechnikov/7.jpg', thumb: 'http://fotorama.s3.amazonaws.com/i/okonechnikov/7-thumb.jpg' },
              { img: 'http://fotorama.s3.amazonaws.com/i/okonechnikov/8.jpg', thumb: 'http://fotorama.s3.amazonaws.com/i/okonechnikov/8-thumb.jpg' },
              { img: 'http://fotorama.s3.amazonaws.com/i/okonechnikov/9.jpg', thumb: 'http://fotorama.s3.amazonaws.com/i/okonechnikov/9-thumb.jpg' },
              { img: 'http://fotorama.s3.amazonaws.com/i/okonechnikov/10.jpg', thumb: 'http://fotorama.s3.amazonaws.com/i/okonechnikov/10-thumb.jpg' },
              { img: 'http://fotorama.s3.amazonaws.com/i/okonechnikov/11.jpg', thumb: 'http://fotorama.s3.amazonaws.com/i/okonechnikov/11-thumb.jpg' },
              { img: 'http://fotorama.s3.amazonaws.com/i/okonechnikov/12.jpg', thumb: 'http://fotorama.s3.amazonaws.com/i/okonechnikov/12-thumb.jpg' },
              { img: 'http://fotorama.s3.amazonaws.com/i/okonechnikov/13.jpg', thumb: 'http://fotorama.s3.amazonaws.com/i/okonechnikov/13-thumb.jpg' },
              { img: 'http://fotorama.s3.amazonaws.com/i/okonechnikov/14.jpg', thumb: 'http://fotorama.s3.amazonaws.com/i/okonechnikov/14-thumb.jpg' },
              { img: 'http://fotorama.s3.amazonaws.com/i/okonechnikov/15.jpg', thumb: 'http://fotorama.s3.amazonaws.com/i/okonechnikov/15-thumb.jpg' },
              { img: 'http://fotorama.s3.amazonaws.com/i/okonechnikov/16.jpg', thumb:...