Schulpastoral und Internet
Themen Specials
Suche auf www.schulpastoral.de


Erweiterte Suche
Bibliothek auf www.rpi-virtuell.de
rpi-virtuell - Suche

Login
Mitgliedsname:

Passwort:


Password vergessen?
Neu anmelden!
  Home >> RSS Center >> Adding autoscrolling jCarousel to the random horizontal block of extgallery module

RSS Center

  Haupt  |  Einfache Schlagzeilen  

link XOOPS.org XOOPS.org (07.12.2025 19:04)

feed Adding autoscrolling jCarousel to the random horizontal block of extgallery module (14.08.2010 16:40)
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 :
<!-- customized header contents -->
<{$xoops_module_header}>
and before: </head>
add these lines :
< script src = "<{xoImgUrl js/jquery-1.4.2.min.js}>"  type = "text/java_script" > </script>
    <script src="<{xoImgUrl js/jquery.jcarousel.min.js}>" type="text/java_script"></script>
<script type="text/java_script">

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

execution time : 0.025 sec