JS/jQuery Image Viewer Project
<p>I am working on creating an image viewer similar to how Google's book reader works. I know I am a long way off, but I have to start somewhere since I am a JS/jQuery beginner. I have below what I built so far...a page that displays images, paginates them, and zooms in on the one in focus. The only problem is that when zooming the image does not fit properly in the div.</p>

<p>Here are my short-term plans for this code:</p>

<p>Fix the first image not fitting properly</p>

<p>Get all images to zoom properly</p>

<p>Get the div to scroll that contains the image when the image is zoomed</p>

<p>Instead of the page numbers and Prev/Next buttons, I want to show thumbnails of the images vertically along the left side of the image div with Prev/Next buttons on the top and bottom of the 3 images</p>

<p>I want to incorporate scrolling navigation between the image thumbnails and the content div similar to how Google books reader does it. Any help with what I am trying to accomplish is greatly appreciated.</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;title&gt;Paginating UIV&lt;/title&gt;   
&lt;meta http-equiv="content-type" content="text/html;charset=UTF-8" /&gt;    
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"&gt;&lt;/script&gt;
&lt;script&gt;
$(document).ready(function() {

    /**
     * Pagination Functionality.
     * This will be a separate function in the plugin.
     */
    //how much items per page to show
    var show_per_page = 1;
    //getting the amount of elements inside content div
    var number_of_items = $('#content').children().size();
    //calculate the number of pages we are going to have
    var number_of_pages = Math.ceil(number_of_items/show_per_page);
    //set the value of our hidden input fields
    $('#current_page').val(0);
    $('#show_per_page').val(show_per_page);
    //now when we got all we need for the navigation let's make it '
    /** what are we going to have in the navigation?
     * link to previous page
     * links to specific pages
     * link to next page
     */
    var navigation_html = '&lt;a class="previous_link" href="javascript:previous();"&gt;Prev&lt;/a&gt;';  
    var current_link = 0;
    while (number_of_pages &gt; current_link) {
        navigation_html += '&lt;a class="page_link" href="javascript:go_to_page(' + current_link +')" longdesc="' + current_link +'"&gt;'+ (current_link + 1) +'&lt;/a&gt;';  
        current_link++;  
    }
    navigation_html += '&lt;a class="next_link" href="javascript:next();"&gt;Next&lt;/a&gt;';
    $('#page_navigation').html(navigation_html);
    //add active_page class to the first page link
    $('#page_navigation .page_link:first').addClass('active_page');
    //hide all the elements inside content div
    $('#content').children().css('display', 'none');
    //and show the first n (show_per_page) elements
    $('#content').children().slice(0, show_per_page).css('display', 'block');
});

function previous() {
    new_page = parseInt($('#current_page').val()) - 1;  
    //if there is an item before the current active link run the function  
    if ($('.active_page').prev('.page_link').length==true) {
        go_to_page(new_page);
    }
}

function next() {
    new_page = parseInt($('#current_page').val()) + 1;
    //if there is an item after the current active link run the function
    if ($('.active_page').next('.page_link').length==true) {
        go_to_page(new_page);
    }
}

function go_to_page(page_num) {
    //get the number of items shown per page  
    var show_per_page = parseInt($('#show_per_page').val());
    //get the element number where to start the slice from
    start_from = page_num * show_per_page;
    //get the element number where to end the slice
    end_on = start_from + show_per_page;
    //hide all children elements of content div, get specific items and show them
    $('#content').children().css('display', 'none').slice(start_from, end_on).css('display', 'block');
    /*get the page link that has longdesc attribute of the current page and add active_page class to it
    and remove that class from previously active page link*/
    $('.page_link[longdesc=' + page_num +']').addClass('active_page').siblings('.active_page').removeClass('active_page');
    //update the current page input field  
    $('#current_page').val(page_num);  
}

function zoom(zm) {
    img = document.getElementById("pic")
    wid = img.width
    ht = img.height
    img.style.width = (wid*zm)+"px"
    img.style.height = (ht*zm)+"px"
    img.style.marginLeft = -(img.width/2) + "px";
    img.style.marginTop = -(img.height/2) + "px";
}
zoom(1);
&lt;/script&gt;
&lt;style&gt;
#content {
    margin:0 auto;
    width:750px;
    margin-top:20px;;
    border: 1px solid #000;
}
#page_navigation a {
    padding:3px;
    border:1px solid gray;
    margin:2px;
    color:black;
    text-decoration:none
}
.active_page {
    background:darkblue;
    color:white !important;
}
&lt;/style&gt;    
&lt;/head&gt;
&lt;body&gt;

&lt;!-- the input fields that will hold the variables we will use --&gt;
&lt;input type='hidden' id='current_page' /&gt;
&lt;input type='hidden' id='show_per_page' /&gt;

&lt;div id="toolbar" align="center" style="margin-top:20px; margin-bottom:20px; padding:20px; border:1px solid #000;"&gt;
&lt;input type="button" value ="-" onclick="zoom(0.9)"/&gt;
&lt;input type="button" value ="+" onclick="zoom(1.1)"/&gt;
&lt;/div&gt;

&lt;!-- An empty div which will be populated using jQuery --&gt;
&lt;div id="page_navigation" align="center"&gt;&lt;/div&gt;

&lt;!-- Content div. The child elements will be used for paginating(they don't have to be all the same, you can use divs, paragraphs, spans, or whatever you like mixed together). --&gt;
&lt;div id="content" align="center"&gt;
&lt;img id="pic" src="http://farm8.staticflickr.com/7244/7244691666_809089b30d.jpg" width="500" height="375" /&gt;
&lt;img id="pic" src="http://farm8.staticflickr.com/7077/7195539552_bcbf7752ee.jpg" width="500" height="333" /&gt;
&lt;img id="pic" src="http://farm8.staticflickr.com/7089/7195539798_c210988bdc.jpg" width="500" height="332" /&gt;
&lt;img id="pic" src="http://farm8.staticflickr.com/7105/7195539676_526aeb2d7b.jpg" width="500" height="332" /&gt;
&lt;img id="pic" src="http://farm8.staticflickr.com/7077/7195539806_31c6e029eb.jpg" width="500" height="332" /&gt;
&lt;/div&gt;

&lt;div style="clear:both;"&gt;&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>
