Adding autoscrolling jCarousel to the random horizontal block of extgallery module

Date 2010/8/14 14:40:00 | Topic: Hacks

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
Original 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


This article comes from XOOPS Web Application System
https://xoops.org

The URL for this story is:
https://xoops.org/modules/news/article.php?storyid=5562