Problem Integrating jquery show-hide with Dynamic Drive Step Carousel Viewer v1.8
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>
I just tried your code and its not a problem with hiding or showing the correct one, its your css style settings for the p tag that is making it look like that
Demo - What it does is show one on top of the other. Since you're using hide and show it does something different then what your intended css wants it to do.
It sets visibility:hidden, visibility:visible: instead of display:none which is what your css does. You need to set your css style setting in a different way. The following Demo example is probably what you want.
Your Answer
加载中,请稍侯......
精彩评论