Hacks: Adding autoscrolling jCarousel to the random horizontal block of extgallery module

Posted by: marianeOn 2010/8/14 14:40:00 11022 reads
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
Resized Image


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 :
<!-- customized header contents -->
<{$xoops_module_header}>
and before: </head>
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({
        
auto2,
        
wrap'last',
        
initCallbackmycarousel_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