Free web development scripts for the webmasterDevelopment Scripts


 social media marketing services
 Site Navigation
Clicky Web Analytics
 o Development Scripts
 o Text Only Edition
 o PHP.net News
 o Tutorials
 o Register an account
 o New entries this week
 o Affiliates/Links
 o Contact Us
 o About us
 o Advanced Search

 Browse Path
 o 1 user online
 o Most users online: 67
 o Home
  o Javascripts
   o Image and Graphics
    o Script

 Member Login
User Name
Password

 Standards
Valid XHTML 1.0!
Valid 
CSS!

 Recommended Links
 o PHP Freaks
 o Paper Free Invoicing
 o Tutorials
 o Expired Domain Crawler
 o OxyScripts
 o PFB
 o PFB UK

Ajax like DivViewer (Rated 5)

Description:

Divviewer Image viewer lets you display images inline- when the user clicks on a link- scaled to fit the dimensions of the page if necessary. This is very handy for very large images which may produce those unsightly browser scrollbars if not scaled. The sleek interface of the viewer can be customized, such as its padding, colors, the text (ie: the "X" button text), and more. Very Ajax like without the accompanied fuss!

Code starts here


/*seems to have problems to upload the source...
http://javascript.axelschneider.info...
I will start right here to copy the sources but you could have a look at the original site as well...
*/

/***************************************************************************************/
/* filename: DV.js */
/* version: 1.3 */
/* last modified: 11.02.2007 */
/* author: Axel Schneider */
/* mail: mail@axelschneider.info */
/* www: http://javascript.axelschneider.info */
/* */
/* description: This JavaScript is showing a picture in a */
/* division-container. This procedure substitutes */
/* the ordinary way to open a new window. The Pic */
/* is shown in the middle of the current window. If the */
/* screen-resolution is smaller than the width */
/* and/or height it is resized to the largest */
/* possible size. */
/* */
/* advantages: - there occure no problems with pop-up-blockers. */
/* - picture is shown independently of the screen-resolution as one item*/
/* - customizable settings */
/* */
/* customization: you may vary some settings */
/* - closingSign: the sign which is shown in the upper right corner to*/
/* close/hide the picture. you could use text or an */
/* image. */
/* - loadingSign: the sign which is shown at the bottom in the left */
/* corner. it is visible as long as the picture is */
/* loading. you could use text or an image. */
/* - borderDV: the width of the border around the picture in pixel.*/
/* - spaceDV: the minimal space which should be between the shown */
/* image and the (inner) browser-border. */
/* - borderColorDV: color of the border which is around the picture. */
/* - bgColorDV: background-color for the closing-sign. if it is set */
/* to empty the background is transparent. */
/* */
/* usage: append the function "dv.showDV('<img ...>')" */
/* to a certain event. */
/* the image-tag needs to consist of the width */
/* and height-attribute. to avoid the problem of */
/* multi-nested single and double apostrophe use */
/* a javascript variable for the image-tag. eg.: */
/* var myPic = '<img src="myPic.jpg" width="800" height="500">'; */
/* */
/* to use the before-next-functionality you have to provide an array */
/* which consists of all img-tags to the dv-instance. eg.: */
/* var myPic = new Array(); */
/* myPic[0] = '<img src="myPic.jpg" width="800" height="500">'; */
/* dv.setAllImagesArray(myPicArray); */
/* */
/* example: <a href="#" onClick="dv.showDV(myPic);">click here</a> */
/* */
/* history: 22.09.2006 - added functionality of alt (title) */
/* 11.02.2007 - added opacity for loading, closing and before-next-signs*/
/* - added functionality to navigate to the last and next */
/* image */
/* */
/***************************************************************************************/


//attributes you may vary
var closingSign = "x"; //the sign in the upper right corner which signs to close the viewer
var loadingSign = "L.O.A.D.I.N.G"; //the sign in the loading-div
var beforeSign = "<"; //the sign to show the last image
var nextSign = ">"; //the sign to show the next image
var borderDV = 2; //border-width arround the viewer
var spaceDV = 20; //space between the viewer and the inner-window
var borderColorDV = "#ffffff"; //border color and the color of the closing-sign-text
var bgColorDV = "#A7A8C7"; //background color for the closing sign
var bgOpacity = 40; //opacity in percent


//DO NOT CHANGE ANYTHING IF YOU ARE NOT FAMILIAR WITH JAVASCRIPT NOW

/**********************************************************************/
/* DivViewer */
/**********************************************************************/

//create DV-Object
var dv = new DVObject();

function initDV() {
//write html code to the document
dv.writeHtmlCode();

//initialize the dhtml-library
DHTML_init();

//set attributes
dv.setAttributes();
}

function DVObject() {
//attributes
this.htmlCode;
this.parentDV;
this.childDVCont;
this.childDVClose;
this.childDVLoad;
this.childDVBeforeAndNext;
this.childDVTblBeforeAndNext;
this.childDVBefore;
this.childDVNext;
this.errorMessage;
this.img = new DVImg();
this.swapImg;
this.allImages;
this.currentDisplayedImage;

//general functions for the div-viewer
// # writeHtmlCode()
// # setAttributes()
// # showDV()
// # hideDV()
// # showLoadDV()
// # checkImgParameter()
// # checkLoad()
// # regSearch()
// # regSearchNumber()
// # getMiddlePosition()
// # getScreenSize()
// # decodeHtml()
// # setOpacityStyle()
// # getOpacityValue()

//functions for a before-next-functionality
// # setAllImagesArray()
// # checkBeforeAndNextImages()
// # showLastImage()
// # showNextImage()
// # getPositionOfImage()
}
function DVImg() {
this.src;
this.width;
this.height;
this.border;
this.alt;
}
// # writeHtmlCode()
DVObject.prototype.writeHtmlCode = function() {
//the DV-Object consists of two inner divs
// # content-div
// # close-div

//build the html code
dv.htmlCode = '<div id="parentDV">\n' +
'<div id="childDVCont"><img src="" width="10" height="10" border="0" alt="" title="" name="picDV"></div>\n' +
'<div id="childDVLoad">'+loadingSign+'</div>' +
'<div id="childDVClose" onClick="dv.hideDV();" title="Schliessen!">'+closingSign+'</div>' +
'<div id="childDVBeforeAndNext">' +
' <table id="childDVTblBeforeAndNext" cellspacing="0" cellpadding="0">' +
' <tr>' +
' <td><div id="childDVBefore" onClick="dv.showLastImage();" title="Vorheriges Bild"><b>'+beforeSign+'</b></div></td>' +
' <td><div id="childDVNext" onClick="dv.showNextImage();" title="Nächstes Bild"><b>'+nextSign+'</b></div></td>' +
' </tr>' +
' </table>' +
'</div>' +
'</div>';
//write the code to the document
window.document.writeln(dv.htmlCode);
};

/* there is more code but I do not went to waste my time to try what is the maximum number of signs or lines - so please have a look at the source - it is pretty easy to use it!*/

Last Edited: April 1, 2007, 8:24 pm

Last Edited: April 2, 2007, 9:45 pm


Submitted by Axel2407 on 02-04-2007 20:45


Recent Additions (from all categories)

(PHP) T Shirt Printing Software

(PHP) Youtube Video Organizer Script

(PHP) MP3z - MP3 Search Engine Script

(PHP) Recipez- PHP Recipe Script

(ASP) Stop image hotlinking and downloading. Web image protection is easy with Image Trapper.

Top Rated Scripts

(Javascripts) Javascript Delayed Redirection Rating: 5

(PHP) Random Links and images with PHP & MySQL Rating: 5

(PHP) RSS/XML news feed headline grabber! Rating: 5

(PHP) Random Signatures/Avatars Rating: 5

(Javascripts) Detecting Client Web Browser Rating: 5

© Copyright 2003 - Devscripts.net  Web Analytics