Add Next/Prev controls
Permalink Browser Info Environment
Some modification to a bit of code I found online to add arrow navigation to the slider.
***ADD to blueberry.css***
.blueberry { margin: 0 auto; position: relative;}
.blueberry ul { padding: 0px; margin: 0px; list-style-type: none; }
.slidernav {
display: block;
position: absolute;
height: 41px;
width:32px;
overflow: hidden;
cursor: pointer;
top:40%;
z-index: 100000;
}
.arrow_left {
left:12px;
}
.arrow_right {
right:12px;
}
***ADD to jquery.blueberry.js just above //Add keyboard function comment***
//Add arrows
if (o.arrows) {
$('.slidernav').live('click', function () {
if ($(this).attr('id') == 'arrow_right') {
clearTimeout(obj.play);
rotate();
}
if ($(this).attr('id') == 'arrow_left') {
clearTimeout(obj.play);
if (current < 1)
next = slides.length - 1;
else
next = current - 1;
rotate();
}
});
$(this).append($('<img alt="Left" class="slidernav arrow_left" id="arrow_left" src="images/arr_next.png"><img alt="Right" class="slidernav arrow_right" id="arrow_right" src="images/arr_prev.png">'));
}
***ADD to blueberry's view.php below the similar line for the pager***
$('#<?php echo $this->controller->getUniqueDivId(); ?>').blueberry({arrows:<?php echo ($hideArrowControls == 1) ? 'false' : 'true' ?>, interval:<?php echo $sliderInterval?>});
***ADD to bform_setup_html.php below the similar line for the pager***
<tr>
<td colspan="2" style="width:100%">
<?php echo $form->checkbox('hideArrowControls', 1, $hideArrowControls == 1); ?><strong> <?php echo t('Hide the arrow navigation controls?');?></strong>
</td>
</tr>
***ADD to controller.php below the similar line for the pager's hideNavControls***
$args['hideArrowControls'] = 0;
if($data['hideArrowControls'] == 1)
{
$args['hideArrowControls'] = 1;
}
***ADD to blueberry.css***
.blueberry { margin: 0 auto; position: relative;}
.blueberry ul { padding: 0px; margin: 0px; list-style-type: none; }
.slidernav {
display: block;
position: absolute;
height: 41px;
width:32px;
overflow: hidden;
cursor: pointer;
top:40%;
z-index: 100000;
}
.arrow_left {
left:12px;
}
.arrow_right {
right:12px;
}
***ADD to jquery.blueberry.js just above //Add keyboard function comment***
//Add arrows
if (o.arrows) {
$('.slidernav').live('click', function () {
if ($(this).attr('id') == 'arrow_right') {
clearTimeout(obj.play);
rotate();
}
if ($(this).attr('id') == 'arrow_left') {
clearTimeout(obj.play);
if (current < 1)
next = slides.length - 1;
else
next = current - 1;
rotate();
}
});
$(this).append($('<img alt="Left" class="slidernav arrow_left" id="arrow_left" src="images/arr_next.png"><img alt="Right" class="slidernav arrow_right" id="arrow_right" src="images/arr_prev.png">'));
}
***ADD to blueberry's view.php below the similar line for the pager***
$('#<?php echo $this->controller->getUniqueDivId(); ?>').blueberry({arrows:<?php echo ($hideArrowControls == 1) ? 'false' : 'true' ?>, interval:<?php echo $sliderInterval?>});
***ADD to bform_setup_html.php below the similar line for the pager***
<tr>
<td colspan="2" style="width:100%">
<?php echo $form->checkbox('hideArrowControls', 1, $hideArrowControls == 1); ?><strong> <?php echo t('Hide the arrow navigation controls?');?></strong>
</td>
</tr>
***ADD to controller.php below the similar line for the pager's hideNavControls***
$args['hideArrowControls'] = 0;
if($data['hideArrowControls'] == 1)
{
$args['hideArrowControls'] = 1;
}
Type: | Discussion |
---|---|
Status: | New |