I looked at tons of previous threads, and didn't find anything to help with my specific need. I have a page where I want to swap a large image using navigation AND pass text related to that image to the area underneath. (http://vinegar-works.com/casestudies.html).
I used layers to show and hide the text related to the image. The problem is getting it to work with the slider that's used for the "previous" and "next" buttons.
I'm not good a writing custom javascript. Any help would be appreciated.
<div class="section" id="section1">
<img src="images/casestudies/woman.png" width="667" height="436" alt="Gears">
</div>
<div class="section" id="section2">
<img src="images/casestudies/money.png" width="667" height="436" alt="Gears">
</div>
<div class="section" id="section3">
<img src="images/casestudies/gear.png" width="667" height="436" alt="Gears">
</div>
<div class="section" id="section4">
<img src="images/casestudies/grill.png" width="667" height="436" alt="Gears">
</div>
<script type="text/javascript" charset="utf-8">
var slide = new Glider('slideshow-work', {controlsEvent: 'mouseover',duration:.5, autoGlide: false, frequency: 5});
</script>
<div id="controls">
<ul id="prevnext">
<li id="next"><a href="" onclick="slide.next();return false">Next</a></li>
<li id="dot"><a href="#section1" onclick="MM_showHideLayers('Layer1','','show','Layer2','','hide','Layer3','','hide','Layer4','','hide')"></a></li>
<li id="dot"><a href="#section2" onclick="MM_showHideLayers('Layer1','','hide','Layer2','','show','Layer3','','hide','Layer4','','hide')"></a></li>
<li id="dot"><a href="#section3" onClick="MM_showHideLayers('Layer1','','hide','Layer2','','hide','Layer3','','show','Layer4','','hide')"></a></li>
<li id="dot"><a href="#section4" onClick="MM_showHideLayers('Layer1','','hide','Layer2','','hide','Layer3','','hide','Layer4','','show')"></a></li>
<li id="prev"><a href="" onclick="slide.previous();return false;">Previous</a></li>
</ul>
</div>
</div>
<h4><span class="italic">Featured Project:</span>Some Project</h4>
<div class="doubleline"></div>
</div>
<div id="content-work-info">
<div id="Layer1" style="z-index:1; position:absolute; visibility: hidden;">This is the text associated with layer 1.</div>
<div id="Layer2" style="z-index:1; position:absolute; visibility: hidden;">This is the text associated with layer 2.</div>
<div id="Layer3" style="z-index:1; position:absolute; visibility: hidden;">This is the text associated with layer 3.</div>
<div id="Layer4" style="z-index:1; position:absolute; visibility: hidden;">This is the text associated with layer 4.</div>
</div>