seriousam Posted July 1, 2010 Share Posted July 1, 2010 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: A main image window (img) A main image caption (p) 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.