Jump to content

Dynamic image resizing: Help needed


seriousam

Recommended Posts

Hi. I have a page where I made a photo gallery using css and javascript. The basic structure is a gallery div with the following things:

  1. A main image window (img)
  2. A main image caption (p)
  3. Lots of image thumbnails (img) X n

I made the script so that on clicking each thumb, the main image's source would change to the thumb's picture, as would also the caption.Now here's the catch: In CSS, I wanted the main image window to have a fixed height (say, 15em), and the width was set to auto (for preserving the aspect ratio). As is understandable, the thumbs may be portrait or landscape, and I want the fixed height to take care that page content does not jump up and down when different thumbs are clicked. However, this is not working as I expected. On loading the first image, the image window is resizing ok, but on clicking subsequent thumbs, its not changing its width. I tried changing the src attribute first and then changing the width to auto, but it did not work.HTML:

.imgGal {	text-align:center;	border:1px dashed white;	background-color:#333333;	padding:1em;}.imgWin {	height:15em;	width:auto;	border:1px solid gray;}.thumb {	height:4em;	width:auto;	display:inline-block;	margin:.4em .2em 0 .2em;	border:1px solid gray;	padding:0;}

JAVASCRIPT

function changeImage( thisObj, thisCap ){	// Get container element..	var iGalDiv = thisObj.parentNode;	// Get all image tags and paragraphs under gallery..	var iGalImages = iGalDiv.getElementsByTagName("img");	var iGalCaps = iGalDiv.getElementsByTagName("p");	// Get window image..	var imgWin;	for (i in iGalImages)	{		if (iGalImages[ i ].className == "imgWin")		{			imgWin = iGalImages[ i ];		}	}	// Get caption paragraph..	var imgCap;	for (i in iGalCaps)	{		if (iGalCaps[ i ].className == "imgCap")		{			imgCap = iGalCaps[ i ];		}	}		// Get actual pic name from thumb name..	var newSrc = thisObj.src.replace("t_", "");	// Change image..	imgWin.src = newSrc;	// Change width acc to new image..	imgWin.width = "auto";	// Change caption..	imgCap.innerHTML = thisCap;}

I am new to JS, and what I learnt is solely from W3schools tutes. I may have missed something in there, so please be considerate if the answer's already there in the tutorial. :)

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...