Click here to Skip to main content
Click here to Skip to main content
Articles » Database » Database » General » Downloads
 
Add your own
alternative version

Tagged as

Go to top

Display/Store and Retrieve Image Data from Database to Gridview, and also on Mouse Over

, 15 Oct 2011
How to Display/Store and Retrieve Image Data from Database to Gridview, and also on mouse over
UserSample.zip
UserSample
~$gemArticle.docx
AlgemArticle.docx
Sample
App_Code
App_Data
Bin
AjaxControlToolkit.dll
AjaxControlToolkit.dll.refresh
Utils.dll
Utils.dll.refresh
Utils.pdb
css
Images
accordionHeaderIcon.png
BlackLoadingBar.gif
btn_delete.gif
btn_edit.gif
Calendar.png
close.gif
Copy of gridheader.gif
del.png
downarrow.gif
excel_icon.gif
gridfooter.gif
gridfooter.JPG
gridheader.gif
headermenu.jpg
headerpanel.jpg
lock.png
loginbg.jpg
LoginPanelBG.png
minniloader.gif
pdf.jpg
print-button.gif
scan.gif
spicture.gif
spicture.jpg
Thumbs.db
txt.png
view.gif
js
arrowdown.gif
arrowup.gif
Members.JPG
Sample (3).suo
Show
Algem_G_Mojedo.jpg
Asds_A_Asdasd.jpg
Firstname_M_Lastname.jpg
Sdfdfsdf_S_Sdfsdf.jpg
Test_T_Test.jpg
Test1_T_Resr1.jpg
Thumbs.db
Zxdzx_Z_Zxzx.jpg
upload
UsersControl
Utils
Utils
bin
Debug
Utils.dll
Utils.pdb
obj
Debug
Refactor
TempPE
Utils.dll
Utils.pdb
Properties
/*Image Power Zoomer v1.1 (June 18th, 2010)
* This notice must stay intact for usage 
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
*/

//June 18th, 10: Adds ability to specify a different, higher resolution version of the original image as the image shown inside the magnifying glass.

jQuery.noConflict()

var ddpowerzoomer={
	dsetting: {defaultpower:2, powerrange:[2,7], magnifiersize:[75, 75]},
	mousewheelevt: (/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel", //FF doesn't recognize mousewheel as of FF3.x
	$magnifier: {outer:null, inner:null, image:null},
	activeimage: null,

	movemagnifier:function(e, moveBol, zoomdir){
		var activeimage=ddpowerzoomer.activeimage //get image mouse is currently over
		var activeimginfo=activeimage.info
		var coords=activeimginfo.coords //get offset coordinates of image relative to upper left corner of page
		var $magnifier=ddpowerzoomer.$magnifier
		var magdimensions=activeimginfo.magdimensions //get dimensions of magnifier
		var power=activeimginfo.power.current
		var powerrange=activeimginfo.power.range
		var x=e.pageX-coords.left //get x coords of mouse within image (where top corner of image is 0)
		var y=e.pageY-coords.top
		if (moveBol==true){
			if (e.pageX>=coords.left && e.pageX<=coords.right && e.pageY>=coords.top && e.pageY<=coords.bottom)  //if mouse is within currently within boundaries of active base image
				$magnifier.outer.css({left:e.pageX-magdimensions[0]/2, top:e.pageY-magdimensions[1]/2})	//move magnifier so it follows the cursor
			else{ //if mouse is outside base image
				ddpowerzoomer.activeimage=null
				$magnifier.outer.hide() //hide magnifier
			}
		}
		else if (zoomdir){ //if zoom in
			var od=activeimginfo.dimensions //get dimensions of image
			var newpower=(zoomdir=="in")? Math.min(power+1, powerrange[1]) : Math.max(power-1, powerrange[0]) //get new power from zooming in or out
			var nd=[od[0]*newpower, od[1]*newpower] //calculate dimensions of new enlarged image within magnifier
			$magnifier.image.css({width:nd[0], height:nd[1]})
			activeimginfo.power.current=newpower //set current power to new power after magnification
		}
		power=activeimginfo.power.current //get current power
		var newx=-x*power+magdimensions[0]/2 //calculate x coord to move enlarged image
		var newy=-y*power+magdimensions[1]/2
		$magnifier.inner.css({left:newx, top:newy}) //move image wrapper within magnifier so the correct image area is shown
	},

	setupimage:function($, imgref, options){
		var s=jQuery.extend({}, ddpowerzoomer.dsetting, options)
		var $imgref=$(imgref)
		imgref.info={ //create object to remember various info regarding image 
			power: {current:s.defaultpower, range:s.powerrange},
			magdimensions: s.magnifiersize,
			dimensions: [$imgref.width(), $imgref.height()],
			coords: null
		}
		$imgref.unbind('mouseenter').mouseenter(function(e){ //mouseenter event over base image
			var $magnifier=ddpowerzoomer.$magnifier
			$magnifier.outer.css({width:s.magnifiersize[0], height:s.magnifiersize[1]}) //set magnifier's size
			var offset=$imgref.offset() //get image offset from document
			var power=imgref.info.power.current
			$magnifier.inner.html('<img src="'+options.largeimagesrc+'"/>') //get base image's src and create new image inside magnifier based on it
			$magnifier.image=$magnifier.outer.find('img:first')
				.css({width:imgref.info.dimensions[0]*power, height:imgref.info.dimensions[1]*power}) //set size of enlarged image
			var coords={left:offset.left, top:offset.top, right:offset.left+imgref.info.dimensions[0], bottom:offset.top+imgref.info.dimensions[1]}
			imgref.info.coords=coords //remember left, right, and bottom right coordinates of image relative to doc
			$magnifier.outer.show()
			ddpowerzoomer.activeimage=imgref
		})
	},

	
	init:function($){
		var $magnifier=$('<div style="position:absolute;width:100px;height:100px;display:none;overflow:hidden;border:1px solid black;" />')
			.append('<div style="position:relative;left:0;top:0;" />')
			.appendTo(document.body) //create magnifier container and add to doc
		ddpowerzoomer.$magnifier={outer:$magnifier, inner:$magnifier.find('div:eq(0)'), image:null} //reference and remember various parts of magnifier
		$magnifier=ddpowerzoomer.$magnifier
		$(document).unbind('mousemove.trackmagnifier').bind('mousemove.trackmagnifier', function(e){ //bind mousemove event to doc
			if (ddpowerzoomer.activeimage){ //if mouse is currently over a magnifying image
				ddpowerzoomer.movemagnifier(e, true) //move magnifier
			}
		}) //end document.mousemove

		$magnifier.outer.bind(ddpowerzoomer.mousewheelevt, function(e){ //bind mousewheel event to magnifier
			if (ddpowerzoomer.activeimage){
				var delta=e.detail? e.detail*(-120) : e.wheelDelta //delta returns +120 when wheel is scrolled up, -120 when scrolled down
				if (delta<=-120){ //zoom out
					ddpowerzoomer.movemagnifier(e, false, "out")
				}
				else{ //zoom in
					ddpowerzoomer.movemagnifier(e, false, "in")
				}
				e.preventDefault()
			}
		})
	}
} //ddpowerzoomer

jQuery.fn.addpowerzoom=function(options){
	var $=jQuery
	return this.each(function(){ //return jQuery obj
		if (this.tagName!="IMG")
			return true //skip to next matched element
		if (typeof options=="undefined")
			options={}
		if (options.largeimage && options.largeimage.length>0){ //preload large image?
			options.preloadimg=new Image()
			options.preloadimg.src=options.largeimage
		}
		var $imgref=$(this)
		options.largeimagesrc=(options.preloadimg)? options.preloadimg.src : $imgref.attr('src')
		if (parseInt(this.style.width)>0 && parseInt(this.style.height)>0) //if image has explicit CSS width/height defined
			ddpowerzoomer.setupimage($, this, options)
		else if (this.complete){ //account for IE not firing image.onload
			ddpowerzoomer.setupimage($, this, options)
		}
		else{
			$imgref.bind('load', function(){
				ddpowerzoomer.setupimage($, this, options)
			})
		}
	})
}

jQuery(document).ready(function($){ //initialize power zoomer on DOM load
	ddpowerzoomer.init($)
})

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Al Moje
Software Developer (Senior) ***
Philippines Philippines
MCTS - Microsoft Certified Technology Specialist.
An Accountant.
Had been developed Payroll Accounting System Application
Live in: Quezon City, Metro Manila Philippines
Could reached at email address: ag_mojedo@live.com

| Advertise | Privacy | Mobile
Web03 | 2.8.140916.1 | Last Updated 15 Oct 2011
Article Copyright 2011 by Al Moje
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid