...

View Full Version : Javascript swap layers question..



Lugarts
05-29-2012, 12:06 AM
Hi,
Im currently building a site where I have a bar containing thumbnails at the top of my page that when clicked, have the photo appear large underneath. I'm using javascript swap layers code, and it works to swap from one picture to the next, however I want the first picture to appear without its thumbnail being clicked on, as soon as the page is loaded, and then be replaced by the second when the second thumbnail is clicked, and so on and so on. Apologies, Its a tough one to explain, but hopefully you'll understand what I mean.
Here is the code:


<script type="text/javascript">
var cur_lyr; // holds id of currently visible layer
function swapLayers(id) {
if (cur_lyr) hideLayer(cur_lyr);
showLayer(id);
cur_lyr = id;
}

function showLayer(id) {
var lyr = getElemRefs(id);
if (lyr && lyr.css) lyr.css.display = "block";
}

function hideLayer(id) {
var lyr = getElemRefs(id);
if (lyr && lyr.css) lyr.css.display = "none";
}

function getElemRefs(id) {
var el = (document.getElementById)? document.getElementById(id): (document.all)? document.all[id]: (document.layers)? document.layers[id]: null;
if (el) el.css = (el.style)? el.style: el;
return el;
}

//-->
</script>

The css:


div#photo1{
position: relative;
top: 20px;
margin-left:auto;
margin-right:auto;
width:640px;
height:480px;
background-color: #FFFFFF;
border-style: solid;
border-width: 0px;
z-index: 100;
}
div#photo2{
position: relative;
top: 20px;
margin-left:auto;
margin-right:auto;
width:640px;
height:480px;
background-color: #FFFFFF;
border-style: solid;
border-width: 0px;
z-index: 100;
}
div#photo3{
position: relative;
top: 20px;
margin-left:auto;
margin-right:auto;
width:640px;
height:480px;
background-color: #FFFFFF;
border-style: solid;
border-width: 0px;
z-index: 100;}


The html:


<div id="tS2" class="jThumbnailScroller">
<div class="jTscrollerContainer">
<div class="jTscroller">
<a onclick="swapLayers('photo1'); return false" href="#"><img src="thumbs/1.jpg" /></a>
<a onclick="swapLayers('photo2'); return false" href="#"><img src="thumbs/2.jpg" /></a>
<a onclick="swapLayers('photo3'); return false" href="#"><img src="thumbs/3.jpg" /></a>
<a onclick="swapLayers('photo4'); return false" href="#">
</div>
</div>
<a href="#" class="jTscrollerPrevButton"></a>
<a href="#" class="jTscrollerNextButton"></a>
</div>
<div id="photo1" style="display:none;"><img src="http://img803.imageshack.us/img803/1672/12742986.jpg"></div>
<div id="photo2" style="display:none;"><img src="http://img31.imageshack.us/img31/9629/20601289.jpg"></div>
<div id="photo3" style="display:none;"><img src="http://img442.imageshack.us/img442/7058/85748289.jpg"></div>
</div>

Thanks very much in advance for your help.

felgall
05-29-2012, 03:00 AM
Just remove the style="display:none;" from the first photo.

Lugarts
05-29-2012, 09:26 PM
hey,
thanks for your answer, however I tried this already and although the photo does appear when the page first loads it dosn't change to the next image when the next thumbnail is clicked, its stays as the first, unless you click the first thumbnail again, and then it works normally.
Thanks,
Luke.

Old Pedant
05-30-2012, 12:08 AM
At the bottom of your page, just before your </body> tag just add


<script type="text/javascript">
swapLayers('photo1');
</script>


This code is HORRIBLY obsolete:


function getElemRefs(id) {
var el = (document.getElementById)? document.getElementById(id): (document.all)? document.all[id]: (document.layers)? document.layers[id]: null;
if (el) el.css = (el.style)? el.style: el;
return el;
}

That type of coding hasn't been needed since MSIE 4 and Netscape 4 bit the dust, back about 1999.

It's really time to update your JS code.

Old Pedant
05-30-2012, 12:31 AM
Here, try this.

Note that this automatically works with any number of thumbnails and images, with no need to number (with ids or any other way) either the thumbnails or the images. Only requirement is that the images be in the SAME ORDER as the corresponding thumbnails.


<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div#thePhotos div {
display: none;
position: relative;
top: 20px;
margin-left:auto;
margin-right:auto;
width:640px;
height:480px;
background-color: #FFFFFF;
border-style: solid;
border-width: 0px;
z-index: 100;
}
</style>
</head>
<body>
<div id="tS2" class="jThumbnailScroller">
<div class="jTscrollerContainer">
<div id="theThumbs" class="jTscroller">
<img src="thumbs/1.jpg" />
<img src="thumbs/2.jpg" />
<img src="thumbs/3.jpg" />
</div>
</div>
<a href="#" class="jTscrollerPrevButton"></a>
<a href="#" class="jTscrollerNextButton"></a>
</div>
<div id="thePhotos">
<div><img src="http://img803.imageshack.us/img803/1672/12742986.jpg"></div>
<div><img src="http://img31.imageshack.us/img31/9629/20601289.jpg"></div>
<div><img src="http://img442.imageshack.us/img442/7058/85748289.jpg"></div>
</div>

<script type="text/javascript">
function swapImage(which)
{
var photos = document.getElementById("thePhotos").getElementsByTagName("div");
for ( var p = 0; p < photos.length; ++p )
{
photos[p].style.display = ( p == which ) ? "block" : "none";
}
}

function setSwap(tnum)
{
var inum = tnum;
return function() { swapImage(inum); }
}

var thumbs = document.getElementById("theThumbs").getElementsByTagName("img");
for ( var t = 0; t < thumbs.length; ++t )
{
var thumb = thumbs[t];
thumb.onclick = setSwap(t);
}

swapImage(0); // Start it out!

</script>
</body>

Old Pedant
05-30-2012, 12:32 AM
It does not, however, handle you previous and next buttons. But adding that wouldn't be hard.

Old Pedant
05-30-2012, 12:47 AM
Here's a version that implements your previous and next links. Those links are a bit clumsy, but easy to make them neater if needed.


<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div#thePhotos div {
display: none;
position: relative;
top: 20px;
margin-left:auto;
margin-right:auto;
width:640px;
height:480px;
background-color: #FFFFFF;
border-style: solid;
border-width: 0px;
z-index: 100;
}
div#theThumbs img {
border: solid red 4px;
padding: 5px;
}
</style>
</head>
<body>
<div id="tS2" class="jThumbnailScroller">
<div class="jTscrollerContainer">
<div id="theThumbs" class="jTscroller">
<img src="thumbs/1.jpg" />
<img src="thumbs/2.jpg" />
<img src="thumbs/3.jpg" />
</div>
</div>
<a href="#" class="jTscrollerPrevButton" onclick="swapImage(currentImage-1); return false;">Prior</a>
<a href="#" class="jTscrollerNextButton" onclick="swapImage(currentImage+1); return false;">Next</a>
</div>
<div id="thePhotos">
<div><img src="http://img803.imageshack.us/img803/1672/12742986.jpg"></div>
<div><img src="http://img31.imageshack.us/img31/9629/20601289.jpg"></div>
<div><img src="http://img442.imageshack.us/img442/7058/85748289.jpg"></div>
</div>

<script type="text/javascript">
var currentImage = null;

function swapImage(which)
{
var photos = document.getElementById("thePhotos").getElementsByTagName("div");
which = ( which + photos.length ) % photos.length;
currentImage = which;

for ( var p = 0; p < photos.length; ++p )
{
photos[p].style.display = ( p == which ) ? "block" : "none";
}
}

function setSwap(tnum)
{
var inum = tnum;
return function() { swapImage(inum); }
}

var thumbs = document.getElementById("theThumbs").getElementsByTagName("img");
for ( var t = 0; t < thumbs.length; ++t )
{
var thumb = thumbs[t];
thumb.onclick = setSwap(t);
}

swapImage(0); // Start it out!

</script>
</body>
</html>

Lugarts
05-30-2012, 03:54 AM
Thanks very much old pedant (both your experience and pedantry proved very useful), for solving my problem and clearing up my code! As I'm sure you guessed I'm a bit new to all this!
Thanks again.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum