...

View Full Version : Trying to Paginate Images and Zoom Them



ryanminor
05-24-2012, 07:07 PM
I am trying to create a jQuery plugin that reads a data source of images, paginates them while displaying one at a time, and allows for zooming. I am running into some errors with creating the plugin. My JS/jQuery is at beginner level so I thought I would ask for some help here. What my ultimate goal is is to create something similar to Google's book reader, but I need to get a grasp on this first. Any help is appreciated.

Here is what I have so far...



<!DOCTYPE html>
<html>
<head>
<title>Paginating UIV</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<style>
#content {
margin:0 auto;
max-width:500px;
margin-top:20px;;
border: 1px solid #000;
overflow:hidden;
}
#page_navigation a {
padding:3px;
border:1px solid #666;
margin:2px;
color:#000;
text-decoration:none;
}
.active_page {
background-color:#06F;
color:#FFF;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="uiv.js">
(function($) {
$.fn.uiv = function(options) {
// Set our default variables.
var defaults = {
'show_per_page' : 1,
'number_of_items' : '',
'number_of_pages' : '',
'current_page' : 0,
'show_per_page' : 1
};

// Declare a variable that we will use to allow values to be passed into the UIV.
var opts = $.extend(defaults, options);

$.uiv = {
init : function(options) {
// Declare the opts variables.
var opts = {
idList : [],
urlDebug : '&knockknock=whosthere&who=asp&override=1&dev=1',
genDataRootPath : '',
genCitationPath : '',
genSectionsPath : '',
genTinyurlPath : '',
imgHandlerPath : ''
};
// Set the remaining default variables.
this.number_of_items = opts.idList.length;
this.number_of_pages = Math.ceil(number_of_items/show_per_page);
}
},

/**
* Main pagination function.
*/
paginate = function() {
// Create navigation html
var navigation_html = '<a class="previous_link" href="javascript:previous();">Prev</a>';
var current_link = 0;
while (number_of_pages > current_link) {
navigation_html += '<a class="page_link" href="javascript:go_to_page(' + current_link +')" longdesc="' + current_link +'">'+ (current_link + 1) +'</a>';
current_link++;
}
navigation_html += '<a class="next_link" href="javascript:next();">Next</a>';
$('#page_navigation').html(navigation_html);
// Add active_page class to the first page link
$('#page_navigation .page_link:first').addClass('active_page');

var imgsrc = opts.imgHandlerPath + '?id=' + opts.idList[0] + '&c=1&w=786' + opts.urlDebug;
$('#pic').attr('src', imgsrc);
},

/**
* Previous function for pagination.
*/
previous = function() {
new_page = parseInt(this.current_page) - 1;
// If there is an item before the current active link run the function
if ($('.active_page').prev('.page_link').length==true) {
this.go_to_page(new_page);
}
},

/**
* Next function for pagination.
*/
next = function() {
new_page = parseInt(this.current_page) + 1;
// If there is an item after the current active link run the function
if ($('.active_page').next('.page_link').length == true) {
this.go_to_page(new_page);
}
},

/**
* Go to page function for pagination.
*/
go_to_page = function(page_num) {
// Get the number of items shown per page
var show_per_page = parseInt(this.show_per_page);
// 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
this.current_page = page_num;
},

/**
* Zoom function.
* TODO: Add scrolling to the zoom functionality.
*/
zoom = function(zm) {
var curPage = this.current_page;
img = document.getElementById("pic" + curPage);
wid = img.width
ht = img.height
img.style.width = (wid*zm)+"px"
img.style.height = (ht*zm)+"px";
}

zoom(1);

$.uiv.init(opts);

};

})(jQuery);
</script>
</head>
<body>
<!-- start toolbar -->
<div id="toolbar" align="center" style="margin-top:20px; margin-bottom:20px; padding:20px; border:1px solid #000;">
TOOL BAR WILL GO HERE (Put Zoom Images Here)<br />
<input type="button" value ="-" onclick="zoom(0.9)"/>
<input type="button" value ="+" onclick="zoom(1.1)"/>
</div>
<!-- end toolbar -->
<!-- start pagination -->
<div id="page_navigation" align="center"></div>
<!-- end pagination -->
<!-- start content -->
<div id="content">
<img id="pic" src=""/>
</div>
<!-- end content -->
<script>
$(document).ready(function() {
$("#uiv").uiv({
idList : ['1003699153-I00058','1003699153-I00059','1003699153-I00060','1003699153-I00061'],
urlDebug : '&knockknock=whosthere&who=asp&override=1&dev=1',
genDataRootPath : '/',
genCitationPath : 'UIV/Citation/1519582',
genSectionsPath : 'UIV/Section/1519582',
genTinyurlPath : 'UIV/Permalink/1519582',
imgHandlerPath : 'http://asp6new.alexanderstreet.com/v4/services/get.jpg.aspx'
});
});
</script>
</body>
</html>

ryanminor
05-24-2012, 07:21 PM
In FireBug it is showing that none of my variables are being defined. How would I get around this?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum