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

Posted by: marianeOn 2010/8/14 14:40:00 11143 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 :

<{$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