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