Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    May 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Javascript swap layers question..

    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:
    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:
    Code:
    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:
    Code:
    <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.

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Just remove the style="display:none;" from the first photo.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    New to the CF scene
    Join Date
    May 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,653
    Thanks
    80
    Thanked 4,640 Times in 4,602 Posts
    At the bottom of your page, just before your </body> tag just add
    Code:
    <script type="text/javascript">
    swapLayers('photo1');
    </script>
    This code is HORRIBLY obsolete:
    Code:
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,653
    Thanks
    80
    Thanked 4,640 Times in 4,602 Posts
    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.
    Code:
    <!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>
    Last edited by Old Pedant; 05-30-2012 at 01:47 AM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    Lugarts (05-30-2012)

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,653
    Thanks
    80
    Thanked 4,640 Times in 4,602 Posts
    It does not, however, handle you previous and next buttons. But adding that wouldn't be hard.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,653
    Thanks
    80
    Thanked 4,640 Times in 4,602 Posts
    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.
    Code:
    <!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>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    New to the CF scene
    Join Date
    May 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

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