Я использую Dynamic Drive Step Carousel Viewer v1.8, поэтому покажите серию изображений элементов (div class="panel") в пределах #scroll.belt div.). Каждая панель изображений содержит скрытую <p>, содержащую версию изображения и текстовое описание Пока все хорошо.
Когда пользователь нажимает на любое изображение, я хочу, чтобы скрытые <p>, связанные с этим изображением, появлялись и плавали над div # scroll.belt. Я успешно использовал код jquery show / hide для создания эффекта на отдельной панели, но я не могу заставить его работать должным образом на нескольких панелях (он либо открывает ВСЕ скрытые <p> за один раз, либо noe я не смог интегрировать эффект в параметр onpanelclick:function(target) программы Step Carousel Viewer.
Я новичок (очевидно) и далеко позади в этой доставке, поэтому любая помощь будет оценена.
Вот код для карусели Step с соответствующими стилями:
<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>