SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    May 2010
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    new Image width won't update

    I've been building this simple image viewer for an image gallery from scratch. Basically it loads the large image on the same page. The div is hidden when the page first loads, then when the user clicks on a thumbnail, the div is then set to "visible" with javascript and the larger images are shown. But for some reason the image width isn't updating correctly. Here is the code I'm working with:

    The HTML for the hidden div (the large view):
    Code:
    <div id="bigcontainer">
    	<div id="bigcontainer2">
    		<div id="closediv">
    			<a href="#" onClick="exitBigPicture(); return false;"><img src="images/exit.jpg" /></a>
    		</div>
    		<div id="bigpic">
    			<img id="bigpicslot" src="" />
    			<div id="bigdesc">Description</div>
    		</div>
    	</div>
    </div>
    The HTML for the thumbnail that will be clicked:
    Code:
    <div class="pictures"><a href="images/artwork/img1-large.jpg" onClick="showBigPic('images/artwork/img1-large.jpg'); return false;"><img src="images/artwork/img1.jpg" style="border: 0;" /><span class="pictext">Description</span></a></div>
    The JavaScript:
    Code:
    	function showBigPic(thesource) {
    		document.getElementById("bigpicslot").src = thesource;
    		imageWidth = document.getElementById("bigpicslot").width;
    		document.getElementById("bigcontainer2").style.width = imageWidth + "px";
    		document.getElementById("closediv").style.width = imageWidth + "px";
    		document.getElementById("bigpic").style.width = imageWidth + "px";
    		document.getElementById("bigpicopacity").style.visibility = "visible";
    		document.getElementById("bigcontainer").style.visibility = "visible";
    		document.getElementById("bigcontainer2").style.visibility = "visible";
    		document.getElementById("closediv").style.visibility = "visible";
    		document.getElementById("bigpic").style.visibility = "visible";
    		document.getElementById("bigdesc").style.visibility = "visible";
    	}
    	function exitBigPicture() {
    		document.getElementById("bigpicopacity").style.visibility = "hidden";
    		document.getElementById("bigcontainer").style.visibility = "hidden";
    		document.getElementById("bigcontainer2").style.visibility = "hidden";
    		document.getElementById("closediv").style.visibility = "hidden";
    		document.getElementById("bigpic").style.visibility = "hidden";
    		document.getElementById("bigdesc").style.visibility = "hidden";
    	}

  2. #2
    SitePoint Member
    Join Date
    May 2010
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    May I suggest you learn JQuery?
    Your code will work much better, will be just a couple of lines longs, works on any browser and so on...
    I would also suggest not using the visibility style, since even when you set it to hidden, it will still take space on the page. Use the display CSS property instead.
    I would also use firebug to debug the code, and see the width and the DOM inside showBigPic function...


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •