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
/* --------------------------------------------------------------------------

Copyright (c) 2007 Declan alg

This software is provided 'as-is', without any express or implied warranty. 
In no event will the authors be held liable for any damages arising from 
the use of this software.

Permission is granted to anyone to use this software for any purpose,
including commercial applications, and to alter it and redistribute it freely, 
subject to the following restrictions:

1. The origin of this software must not be misrepresented; you must not 
claim that you wrote the original software. If you use this software in
a product, an acknowledgment in the product documentation would be 
appreciated but is not required.

2. Altered source versions must be plainly marked as such, and must not 
be misrepresented as being the original software.

3. This notice may not be removed or altered from any source distribution.
 
--------------------------------------------------------------------------- */

//<!--  8-29-2011 remove this line by algem
window.onload = setupPage;
window.onresize = setupPage;
window.onscroll = setupPage;
var tintDiv;
var ww = 0, wh = 0;         // window dimensions
var dw = 0, dh = 0          // document dimensions
var sx = 0, sy = 0;         // scroll x & y
var hh = 19;                // header height
var pi = "Progress.gif";    // progress image path

// Setup
// ---------------------------------------------------   

function setupPage() {
    tintDiv = document.getElementById("modaltintdiv");
    getDimensions();
    sizeTintDiv();
    setModalPosition();
}

function getDimensions() {
    // Window dimensions
    if (window.innerWidth) {
        ww = window.innerWidth;
        wh = window.innerHeight;
    }
    else if (document.documentElement && document.documentElement.clientWidth && document.documentElement.clientHeight) {
        ww = document.documentElement.clientWidth;
        wh = document.documentElement.clientHeight;
    }
    else if (document.body && document.body.clientWidth && document.body.clientHeight) {
        ww = document.body.clientWidth;
        wh = document.body.clientHeight;
    }
    // Document dimensions
    if (document.documentElement && document.documentElement.scrollWidth && document.documentElement.scrollHeight) {
        dw = document.documentElement.scrollWidth;
        dh = document.documentElement.scrollHeight;
    }
    else if (document.body && document.body.scrollWidth && document.body.scrollHeight) {
        dw = document.body.scrollWidth;
        dh = document.body.scrollHeight;
    }
    else if (document.body && document.body.clientWidth && document.body.clientHeight) {
        dw = document.body.clientWidth;
        dh = document.body.clientHeight;
    }
}

function getScrollXY() {
    sx = 0, sy = 0;
    if (typeof (window.pageYOffset) == 'number') {
        sy = window.pageYOffset;
        sx = window.pageXOffset;
    } else if (document.body && (document.body.scrollLeft || document.body.scrollTop)) {
        sy = document.body.scrollTop;
        sx = document.body.scrollLeft;
    } else if (document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop)) {
        sy = document.documentElement.scrollTop;
        sx = document.documentElement.scrollLeft;
    }
}


// Modal functions  
// ---------------------------------------------------

function openModal(imageUrl, imageTitle, padding, ratio) {
    var width = 0;
    var height = 0;

    // Calculate size of modal
    if (wh > ww || ((wh - padding) / ratio > ww)) {
        width = ww - padding;
        height = width * ratio;
    }
    else {
        height = wh - padding;
        width = height / ratio;
    }

    if (width > 0 && height > 0) {
        openModalDim(imageUrl, imageTitle, width, height);
    }
}

function openModalDim(imageUrl, imageTitle, width, height) {
    opacity("modaltintdiv", 0, 70, 400);

    setModalSize(width, height);
    setModalPosition();

    setTimeout("opacity('modalouter', 0, 100, 200)", 200);
    getImage('modalimage', imageUrl, imageTitle, width, height);
}

function setModalSize(width, height) {
    var ms = document.getElementById("modalouter").style;
    ms.width = width + "px";
    ms.height = (height + hh) + "px";
}

function setModalPosition() {
    var ms = document.getElementById("modalouter").style;
    var h = ms.height.substring(0, ms.height.length - 2);
    var w = ms.width.substring(0, ms.width.length - 2);

    getScrollXY();
    ms.top = ((sy + wh / 2) - ((h - hh) / 2) - 10) + "px";
    ms.left = ((sx + ww / 2) - (w / 2) - 10) + "px";
}

function closeModal() {
    opacity("modalouter", 100, 0, 200);
    opacity("modaltintdiv", 70, 0, 200);
    setTimeout("document.getElementById('modalimage').src = ''", 200);
}

function sizeTintDiv() {
    tintDiv.style.height = ((wh > dh) ? wh : dh) + "px";
    tintDiv.style.width = ((ww > dw) ? ww : dw) + "px";
}

function getImage(placeHolder, imageUrl, imageTitle, width, height) {
    var pHolder = document.getElementById(placeHolder);
    pHolder.width = 100;
    pHolder.height = 16;
    pHolder.src = pi;
    pHolder.style.margin = ((height / 2) - 8) + "px 0 0 0";

    var img = document.createElement('img');
    img.onload = function(evt) {
        pHolder.style.margin = "0 0 0 0";
        pHolder.src = '';
        pHolder.width = width;
        pHolder.height = height;
        pHolder.src = this.src;
    }
    img.src = imageUrl;

    document.getElementById('imageTitle').innerHTML = imageTitle;
}

function showIt(id) {
    var object = document.getElementById(id);
    object.style.display = "block";
}

function hideIt(id) {
    var object = document.getElementById(id);
    object.style.display = "none";
}


// Fade functions
// http://www.brainerror.net/scripts_js_blendtrans.php
// ---------------------------------------------------

function opacity(id, opacStart, opacEnd, millisec) {
    var object = document.getElementById(id);
    if (opacStart == 0) {
        changeOpac(0, id);
        showIt(id);
    }
    else if (opacEnd == 0) {
        setTimeout("hideIt('" + id + "')", millisec);
    }

    // Speed for each frame
    var speed = Math.round(millisec / 100);
    var timer = 0;

    // Determine the direction for the blending, if start and end are the same nothing happens
    if (opacStart > opacEnd) {
        for (i = opacStart; i >= opacEnd; i--) {
            setTimeout("changeOpac(" + i + ",'" + id + "')", (timer * speed));
            timer++;
        }
    }
    else if (opacStart < opacEnd) {
        for (i = opacStart; i <= opacEnd; i++) {
            setTimeout("changeOpac(" + i + ",'" + id + "')", (timer * speed));
            timer++;
        }
    }
}

// Change the opacity for different browsers
function changeOpac(opacity, id) {
    var object = document.getElementById(id).style;
    object.opacity = (opacity / 100);
    object.MozOpacity = (opacity / 100);
    object.KhtmlOpacity = (opacity / 100);
    object.filter = "alpha(opacity=" + opacity + ")";
}
// -->   8-29-2011 remove this line by algem 

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