D
DoomedLung
I have been developing an image gallery which needed to be dynamic as
possible.
so I have placed the gallery in a div plus a div containing the large
image to be displayed. It works by changing the display property of the
gallery div to 'none' and the largeImage div to 'block' which has an
affect of switching pages but obviously saving time developing a single
page for each large Image, but (cliche') when I refresh the page with
the large Image div displaying 'block' it reverts the gallery and
largeImage display's back to their default states.
how can i prevent these states from reverting back to their default
states?
Here is the code example:
script language="javascript" type="text/javascript">
<!--
function displayImage(imgSrc){
document.getElementById('theGallery').style.display = 'none';
document.getElementById('imageContainer').style.display = 'block';
var image = document.getElementById('largeImage');
image.src = imgSrc;
}
function displayGallery(){
document.getElementById('theGallery').style.display = 'block';
document.getElementById('imageContainer').style.display = 'none';
}
//-->
</script>
</head>
<body topmargin="0" leftmargin="0" marginheight="0" marginwidth="0">
<div id="imageContainer" style="display:none; position:relative;
top:10px; text-align:center;">
<img id="largeImage"><br>
<a href="enable.html" onClick="displayGallery(); return false;">Go
back</a>
</div>
<div id="theGallery" style="display:block;">
<a href="enable.html" onClick="displayImage('imgs/large/large1.jpg');
return false;">
<img src="imgs/thumbs/thumb1.jpg" width="90" height="120" border="0">
</a></div>
possible.
so I have placed the gallery in a div plus a div containing the large
image to be displayed. It works by changing the display property of the
gallery div to 'none' and the largeImage div to 'block' which has an
affect of switching pages but obviously saving time developing a single
page for each large Image, but (cliche') when I refresh the page with
the large Image div displaying 'block' it reverts the gallery and
largeImage display's back to their default states.
how can i prevent these states from reverting back to their default
states?
Here is the code example:
script language="javascript" type="text/javascript">
<!--
function displayImage(imgSrc){
document.getElementById('theGallery').style.display = 'none';
document.getElementById('imageContainer').style.display = 'block';
var image = document.getElementById('largeImage');
image.src = imgSrc;
}
function displayGallery(){
document.getElementById('theGallery').style.display = 'block';
document.getElementById('imageContainer').style.display = 'none';
}
//-->
</script>
</head>
<body topmargin="0" leftmargin="0" marginheight="0" marginwidth="0">
<div id="imageContainer" style="display:none; position:relative;
top:10px; text-align:center;">
<img id="largeImage"><br>
<a href="enable.html" onClick="displayGallery(); return false;">Go
back</a>
</div>
<div id="theGallery" style="display:block;">
<a href="enable.html" onClick="displayImage('imgs/large/large1.jpg');
return false;">
<img src="imgs/thumbs/thumb1.jpg" width="90" height="120" border="0">
</a></div>
