hello Xoopsers,
to add an attractive look to your Xoops website, it's necessary sometimes to make many hacks to some blocks, especially pictures one.
In this participation , I will let you know how to add autoscrolling jCarousel to the random horizontal block of extgallery module.
I took the effect from this website :
http://sorgalla.com/jcarousel/
and I choose the Carousel with autoscrolling.
this is an example of the effect merged with the block
http://www.mrchcenter.com/
look the scrolling picutres just above the footer
1- you can download the hack , ready to use with your theme Xoops (without making any changes to the module) from this link
2- Unzip the package and copy the content to your current theme (images, js, modules, skin.css)
3- Edit your theme.html, and in the css area , add this line :
<link rel="stylesheet" type="text/css" media="all" title="Style sheet" href="<{xoImgUrl skin.css}>" />
4- also in your theme,under :
<{$xoops_module_header}>
and before:
add these lines :
<script src="<{xoImgUrl js/jquery-1.4.2.min.js}>" type="text/javascript">script>
<script src="<{xoImgUrl js/jquery.jcarousel.min.js}>" type="text/javascript">script>
<script type="text/javascript">
function mycarousel_initCallback(carousel)
{
// Disable autoscrolling if the user clicks the prev or next button.
carousel.buttonNext.bind('click', function() {
carousel.startAuto(0);
});
carousel.buttonPrev.bind('click', function() {
carousel.startAuto(0);
});
// Pause autoscrolling if the user moves with the cursor over the clip.
carousel.clip.hover(function() {
carousel.stopAuto();
}, function() {
carousel.startAuto();
});
};
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
auto: 2,
wrap: 'last',
initCallback: mycarousel_initCallback
});
});
script>
that's all !
now you can activate the block random pictures from your admin panel (extgallery_block_random.html)
and change the size from the skin.css, if you want.
n.b you can also choose block any where, founded by trabis to use the block wherever you want.
Regards
|
