I'm using Dynamic Drive Step Carousel Viewer v1.8 so show a series of item images (div class="panel") within a #scroll.belt div. Each image panel includes a hidden <p> containing alarger version of the image and some text description. So far, so good.
When a user clicks on any image, I want the hidden <p> associated with that image to appear and float above the #scroll.belt div. I've had success using jquery show/hide code to create the effect in a stand-alone panel, but I can't get it to work properly on multiple panels (it either opens ALL hidden <p> at one time, or noe at all), nor can have I been able to integrate the effect into the Step Carousel Viewer's onpanelclick:function(target) parameter.
I'm a noob (obviously) and way behind on this delivery, so any help would be appreciated.
Here's the code for the Step Carousel, with the relevant styles included:
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/stepcarousel.js"></script>
<script> $(document).ready(function(){
$("img.showr").click(function () {
$(this).next('p').show("slow");
});
$("img.hidr").click(function () {
$(this).parent('p').hide(2000);
});
});
</script>`<script type="text/javascript">
stepcarousel.setup({
galleryid: 'scroll', //id of carousel DIV
beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
panelclass: 'panel', //class of panel DIVs each holding content
autostep: {enable:true, moveby:1, pause:0},
panelbehavior: {speed:3000, wraparound:true, persist:false},
defaultbuttons: {enable: true, moveby: 1, leftnav: ['images/chrome-l.png', -25, 200], rightnav: ['images/chrome-r.png', -10, 200]},
statusvars: ['statusA', 'statusB', 'statusC'], // Register 3 "status" variables
contenttype: ['inline'] // content type <--No comma following the very last parameter, always!
//optional parameter
//onpanelclick:function(target){
//custom code here.
//}
})
</script>
<style>
p { background:#FFFFFF; margin:3px; width:300px;
display:none; position:absolute; left:45%; top: -20px; text-align:left; z-index: 3000; }
.over { z-index: 3000; }
</style>
<link href="style-tl.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="scroll" class="stepcarousel">
<div class="belt">
<div class="panel"><img id="showr" class="showr" src="images/1.jpg" width="200px" height="300px" alt="light1" />
<p><img id="hidr" class="hidr over" src="images/1.jpg" width="300px" height="450px" alt="light1" /> <br />
<br />
Display item text description<br />
$price</p></div>
<div class="panel">
<img id="showr" class="showr" src="images/2.jpg" width="200px" height="300px" alt="light1" />
<p><img id="hidr" class="hidr over" src="images/2.jpg" width="300px" height="450px" alt="light1" /> <br />
<br />
Display item text description<br />
$price</p></div>
</div>
</div>