Click here to Skip to main content
15,913,944 members
Home / Discussions / Web Development
   

Web Development

 
GeneralPictures on web services Pin
Anonymous1-Oct-04 0:59
Anonymous1-Oct-04 0:59 
GeneralError MySQL Error: 1064 - subqueries Pin
Ovidiu Caba1-Oct-04 0:21
Ovidiu Caba1-Oct-04 0:21 
Questionhow to saves images Pin
Anonymous30-Sep-04 22:07
Anonymous30-Sep-04 22:07 
AnswerRe: how to saves images Pin
Pradeep Shamarao28-Oct-04 19:22
Pradeep Shamarao28-Oct-04 19:22 
GeneralXHTML 1.1 Pin
Jacob Hammack30-Sep-04 21:26
Jacob Hammack30-Sep-04 21:26 
GeneralRe: XHTML 1.1 Pin
Tomas Petricek7-Oct-04 13:03
Tomas Petricek7-Oct-04 13:03 
GeneralRe: XHTML 1.1 Pin
Jacob Hammack7-Oct-04 16:25
Jacob Hammack7-Oct-04 16:25 
GeneralJavaScript Picture Viewer Pin
sefaen30-Sep-04 16:54
sefaen30-Sep-04 16:54 
I am trying to make a script using JavaScript to display images like Windows Picture Viewer.

This is what I have so far:

Gallery Beta 1[^]

I am having problems with my script online however. It seems to work fine locally, from what I can tell. The problem is I have the image loaded when a picture is clicked, however nothing happens the first time you click it, so you have to click it a second time for the image to be displayed properly. I've been looking through my code to see what I can do to fix it, but for the time being I am stumped. Here is my Java script:

window.onload = init;<br />
window.onresize = getSize;<br />
<br />
var preview;<br />
var path;<br />
var extension;<br />
var previewImage = new Object;<br />
var actualWidth;<br />
var actualHeight;<br />
var thumbnails;<br />
var imageContainer;<br />
var windowX;<br />
var windowY;<br />
var tempWidth;<br />
var tempHeight;<br />
<br />
function init()<br />
{<br />
	if (document.getElementById)<br />
	{<br />
		thumbnails = document.getElementById('thumbnails').getElementsByTagName('IMG');<br />
		preview = document.getElementById('previewimage');<br />
		imageContainer = document.getElementById('imagecontainer');<br />
	}<br />
	else if (document.all)<br />
	{	<br />
		thumbnails = document.all['thumbnails'].all.tags('IMG');<br />
		preview = document.all['previewimage'];<br />
		imageContainer = document.all['imagecontainer'];<br />
	}<br />
	else window.alert('Please update to a more current browser');<br />
<br />
	previewImage = new Image;<br />
	previewImage.src = preview.src;	<br />
	actualWidth = previewImage.width;<br />
	actualHeight = previewImage.height;<br />
<br />
	getSize();	<br />
	<br />
	click();<br />
}<br />
<br />
function getSize()<br />
{<br />
	<br />
	tempWidth = actualWidth;<br />
	tempHeight = actualHeight;	<br />
	<br />
	preview.style.width = tempWidth;<br />
	preview.style.height = tempHeight;<br />
<br />
	resizeContainer();<br />
<br />
	windowSize();<br />
	<br />
	checkSize();<br />
}<br />
<br />
function resizeContainer()<br />
{<br />
	imageContainer.style.width = actualWidth;<br />
	imageContainer.style.height = actualHeight;<br />
	tempWidth = (actualWidth / 2) * -1;<br />
	tempHeight = (actualHeight / 2 + 75) * -1;<br />
	imageContainer.style.marginLeft = tempWidth//.substring(tempWidth.lastIndexOf('.');<br />
	imageContainer.style.marginTop = tempHeight//.substring(tempHeight.lastIndexOf('.');<br />
}<br />
<br />
function windowSize()<br />
{<br />
	//window.alert( 'entering windowSize()' );<br />
<br />
	//windowSize is used to return the actual size of the browser window's content area. Because this function is primarily used to center and size the preview image, the height of the film strip area is deducted from the total height of the content area.<br />
	<br />
	if( typeof( window.innerWidth ) == 'number' ) <br />
	{<br />
		//Non-IE<br />
		windowX = window.innerWidth;<br />
		windowY = window.innerHeight;<br />
	}<br />
	else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) )<br />
	{<br />
    		//IE 6+ in 'standards compliant mode'<br />
    		windowX = document.documentElement.clientWidth;<br />
		windowY = document.documentElement.clientHeight;<br />
  	} <br />
	else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) <br />
	{<br />
    		//IE 4 compatible<br />
    		windowX = document.body.clientWidth;<br />
    		windowY = document.body.clientHeight;<br />
  	}<br />
	windowY -= 150;<br />
}<br />
<br />
function checkSize()<br />
{<br />
	//window.alert( 'entering checkSize()' );	<br />
	//window.alert( 'windowx:' + windowX );<br />
	//window.alert( 'width:' + preview.width );<br />
	<br />
	//Finally checkSize uses the data of the window size and image size to determine whether the image is being clipped by the browser window. It then returns a modified version of the actual dimensions so that the image will fit in the preview area.	<br />
<br />
	if ((previewImage.width <= windowX) && (previewImage.height <= windowY))<br />
	{<br />
		actualWidth = previewImage.width;<br />
		actualHeight = previewImage.height;<br />
		<br />
		tempWidth = actualWidth;<br />
		tempHeight = actualHeight;	<br />
	<br />
		preview.style.width = tempWidth;<br />
		preview.style.height = tempHeight;<br />
	}<br />
	else if ((preview.width < windowX) && (preview.height < windowY)) //if it makes it this far we must conclude that the image is within bounds, now to determine if we can resize it any further<br />
	{<br />
		if (preview.width > preview.height)<br />
		{<br />
		actualWidth = windowX;<br />
		actualHeight = (actualWidth * previewImage.height) / previewImage.width;<br />
		getSize();<br />
		}<br />
		else<br />
		{<br />
		actualHeight = windowY;<br />
		actualWidth = (actualHeight * previewImage.width) / previewImage.height;<br />
		getSize();<br />
		}<br />
	}<br />
	else if ((preview.width <= 125) || (preview.height <= 125))<br />
	{<br />
		return 0;<br />
	}<br />
	else if ((preview.width > windowX) && (preview.height > windowY)) //if the width and height are greater than the window size, then we must determine which dimension is larger and apply modifications in ratio<br />
	{<br />
		if (preview.width > preview.height)<br />
		{<br />
			//window.alert( 'horizontal difference');<br />
			actualWidth = windowX;<br />
			actualHeight = (actualWidth * previewImage.height) / previewImage.width;<br />
		}<br />
		else<br />
		{			<br />
			//window.alert( 'vertical difference');<br />
			actualHeight = windowY;<br />
			actualWidth = (actualHeight * previewImage.width) / previewImage.height;		<br />
		}<br />
		getSize();<br />
	}<br />
	else if (preview.width > windowX) //if only the width is greater we resize the width keeping the proportions<br />
	{<br />
			//window.alert( 'horizontal difference 2');<br />
			actualWidth = windowX;<br />
			actualHeight = (actualWidth * previewImage.height) / previewImage.width;<br />
			getSize();<br />
	}<br />
	else if (preview.height > windowY) //if only the height is greater we resize the height keeping the proportions<br />
	{<br />
			//window.alert( 'vertical difference 2');<br />
			actualHeight = windowY;<br />
			actualWidth = (actualHeight * previewImage.width) / previewImage.height;<br />
			getSize();<br />
	}<br />
<br />
}<br />
<br />
function click()<br />
{<br />
	//window.alert('entering click()');<br />
		<br />
	for (var i=0;i<thumbnails.length;i++)<br />
	{<br />
		thumbnails[i].path = thumbnails[i].src.substring(0,thumbnails[i].src.lastIndexOf('/') + 1);<br />
		thumbnails[i].extension = thumbnails[i].src.substring(thumbnails[i].src.lastIndexOf('.'));<br />
		thumbnails[i].onclick = clicked;<br />
	}<br />
}<br />
<br />
function clicked()<br />
{<br />
	//window.alert(this.path);<br />
	//window.alert(this.id);<br />
	//window.alert(this.extension);<br />
	//window.alert(this.path+this.id+this.extension);<br />
	<br />
	var fullpath = this.path+this.id+this.extension;<br />
	previewImage = new Image;<br />
	previewImage.src = fullpath;<br />
	<br />
	actualWidth = previewImage.width;<br />
	actualHeight = previewImage.height;<br />
	<br />
	preview.src = fullpath;<br />
	<br />
	getSize();<br />
	<br />
<br />
<br />
<br />
}


I have a few TODO's. One being I need to clean up my code, second I need to add more comments.

This is my Style Sheet (note that some styles are used on other pages):

/* CSS Document */<br />
body.splash<br />
{<br />
	margin: 0;<br />
	background-color: #555555;<br />
	color: #EEEEEE<br />
}<br />
<br />
body.gallery<br />
{<br />
	margin:0;<br />
	background-color: #DDDDDD;<br />
	height: 100%;<br />
	width:100%;<br />
}<br />
<br />
div.container<br />
{<br />
	height="100%"<br />
}<br />
<br />
html.gallery<br />
{<br />
	overflow: hidden;<br />
}<br />
<br />
div.preview<br />
{<br />
	background-color: #DDDDDD;<br />
	width: 100%;<br />
	height: 100%;<br />
}<br />
<br />
div.filmstrip<br />
{<br />
	position: absolute;<br />
	background-color: #DDDDDD;<br />
	height: 150px;<br />
	width: 100%;<br />
	bottom: 0;<br />
	overflow: hidden;<br />
	overflow-y: hide;<br />
	overflow-x: scroll;<br />
	white-space: nowrap;<br />
}<br />
<br />
span.thumbnails<br />
{<br />
	position:absolute;<br />
	height: 125px;<br />
	width: 100%;<br />
	text-align:center;<br />
}<br />
<br />
.thumbnail<br />
{<br />
	padding-left: 5px;<br />
	padding-right: 5px;<br />
	vertical-align: middle;<br />
}<br />
<br />
.imagecontainer<br />
{<br />
	position:absolute;<br />
	top:50%;<br />
	left:50%;<br />
	height:796px;<br />
	width:800px;<br />
	margin-top:-473px; /*set to a negative number 1/2 of your height plus 1/2 filmstrip height*/<br />
	margin-left:-400px;<br />
	background-color:#DDDDDD;<br />
}<br />
<br />
.previewimage<br />
{<br />
	height: 796px;<br />
	width: 800px;<br />
	overflow:hidden;<br />
}<br />
<br />
.center<br />
{<br />
}<br />
<br />
.middle<br />
{<br />
	position:absolute;<br />
	top:50%;<br />
	left:0;<br />
	height:230;<br />
	width:100%;<br />
	margin-top:-115px; /*set to a negative number 1/2 of your height*/<br />
	background-color:#EEEEEE;<br />
	text-align:center;<br />
}<br />
<br />
.below<br />
{<br />
	font-family:arial;<br />
	font-size:12px;<br />
	margin:0;<br />
	padding:0;<br />
	height:auto;<br />
	background-color:#555555;<br />
}


The HTML source you can view here:

Gallery Beta 1[^]

Please do not comment on my ugly code, I already know Cry | :(( , but if you would like to help me clean it up, feel free Big Grin | :-D !

Thanks in advance!
-Sef
GeneralRe: JavaScript Picture Viewer Pin
Tomas Petricek7-Oct-04 13:13
Tomas Petricek7-Oct-04 13:13 
QuestionASPX/Perl stepping on each other? Pin
webjunkie30-Sep-04 16:23
webjunkie30-Sep-04 16:23 
Generalpadding style problem... Pin
theJazzyBrain30-Sep-04 9:06
theJazzyBrain30-Sep-04 9:06 
GeneralRe: padding style problem... Pin
benjymous1-Oct-04 0:10
benjymous1-Oct-04 0:10 
GeneralRe: padding style problem... Pin
theJazzyBrain1-Oct-04 1:03
theJazzyBrain1-Oct-04 1:03 
GeneralRe: padding style problem... Pin
benjymous1-Oct-04 1:16
benjymous1-Oct-04 1:16 
GeneralRe: padding style problem... Pin
sefaen3-Oct-04 9:58
sefaen3-Oct-04 9:58 
GeneralRe: padding style problem... Pin
benjymous3-Oct-04 21:37
benjymous3-Oct-04 21:37 
GeneralRe: padding style problem... Pin
sefaen5-Oct-04 11:20
sefaen5-Oct-04 11:20 
General!!PERL!! &quot;Can't locate object method 'connect' via package DBI ....(perhaps you forgot to load &quot;DBI&quot; ?)&quot; Pin
bilas30-Sep-04 7:52
bilas30-Sep-04 7:52 
QuestionHow do I create a single or double ALL black splitter??? Pin
alex.barylski29-Sep-04 8:25
alex.barylski29-Sep-04 8:25 
GeneralRun an exe in ASP Pin
Janaka Vithanage29-Sep-04 0:54
Janaka Vithanage29-Sep-04 0:54 
GeneralRe: Run an exe in ASP Pin
Richard Deeming1-Oct-04 3:01
mveRichard Deeming1-Oct-04 3:01 
GeneralgetAdjacentText emulation Pin
alex.barylski28-Sep-04 11:26
alex.barylski28-Sep-04 11:26 
GeneralNew Web Project - Security Questions Pin
Roger Wright27-Sep-04 20:15
professionalRoger Wright27-Sep-04 20:15 
GeneralRe: New Web Project - Security Questions Pin
sreejith ss nair28-Sep-04 2:36
sreejith ss nair28-Sep-04 2:36 
GeneralRe: New Web Project - Security Questions Pin
Colin Angus Mackay28-Sep-04 2:51
Colin Angus Mackay28-Sep-04 2:51 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.