Web Analytics Made Easy -
StatCounter New to javascript - Show/Hide Question - CodingForum

Announcement

Collapse
No announcement yet.

New to javascript - Show/Hide Question

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • New to javascript - Show/Hide Question

    Hello,
    I am pretty unfamiliar with javascript and jquery but have thus far been able to scrape by. I am currently trying to set up an image toggle using show/hide inside of an overlay window that pops up when a button inside the site is clicked.
    The trouble I am having is that when the overly initially opens up, neither image that I am trying to toggle will show up, but once the thumbnails that I am using to control them are clicked, the image toggle works perfectly.
    I am using the #rImg1 and #lImg1 id's as the toggle buttons between showing the #rightFacingImg1 and the #leftFacingImg1 id's. My goal is to pull up the overlay window with the #rightFacingImg1 as the default image, so that the main image area is never left blank.
    Here is the code that I am using:
    Java for overlay:
    Code:
    $(document).ready(function() {
    			$("img[rel]").overlay();		
    		});
    Java for show/hide:
    Code:
    $(document).ready(function() {
    			$.fx.off = !$.fx.off;
    
    			
    			$('#rightFacingImg1').click(function() {
    				$('.hideme').css({'display':'none'});
    				$('#rImg1').show('slow');	
    			});
    			$('#leftFacingImg1').click(function() {
    				$('.hideme').css({'display': 'none'});
    				$('#lImg1').toggle('slow');	
    			});
    });
    html that calls the overlay box:
    Code:
     <div class="img">
                    <img src="images/Rifles/browningm53r.jpg" alt="" width= "225"  rel="#lightboxrifle1"/>
                    <div class="desc"><p><b>Browning M53</b> <br/>Price: $600.00</p></div>
                </div>
    html inside overlay:
    Code:
    <div class="lightboxriflegen" id="lightboxrifle1">
            	<img src="images/x.jpg" alt="" id="rifleclose" class="close"/>
            	<div class="bigpic">
            		<img id="rImg1" class="hideme" src="images/Rifles/browningm53r.jpg"alt="" width="720px" />
                    <img id="lImg1" class="hideme" src="images/Rifles/browningm53l.jpg"alt="" width="720px" />
            	</div>
                <div class="geninfo">
                	<b>Browning M53</b><br/>
                	32-20 Calibur<br/>
                    Lever Action.<br/>
                    Condition: New
                </div>
                <div class="genprice">
                	<b>Price: $600.00</b>
                </div>
                <div class="littler">
                	<img id="rightFacingImg1"  src="images/Rifles/browningm53r.jpg" alt="" width="150px" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
    				onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40"/>
                </div>
                <div class="littlel">
                	<img id="leftFacingImg1" src="images/Rifles/browningm53l.jpg" alt="" width="150px" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
    				onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40"/>
                </div>
                <div class="addtocart">
                	Add to cart.
                </div>
            </div>
    Any help would be greatly appreciated.
    Nicole
Working...
X