Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    May 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Trying to Paginate Images and Zoom Them

    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...

    Code:
    <!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>

  • #2
    New to the CF scene
    Join Date
    May 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    In FireBug it is showing that none of my variables are being defined. How would I get around this?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •