Simple Rotating Banner Script

[Mitch]

Is there anything that I can add to just that banner module to prevent right click. I realize there are work arounds but I would still want to add it
thanks

[glennrocksvb]

Is there anything that I can add to just that banner module to prevent right click. I realize there are work arounds but I would still want to add it
thsnkd

I don't personally recommend this but since you asked...

window.addEventListener('load', function() {
    document.addEventListener('contextmenu', function(e) {
        if ($(e.target).closest('#widget_[COLOR=#FF0000]XXXXX[/COLOR]').length > 0) {
            alert('Sorry, right click is disabled in this module.');
            e.preventDefault();
            return false;
        }
        return true;
    });
});

Change XXXXX to the corresponding widget id of the target module.

[Mitch]

So I put this in CSS and nothing happened.

I got this ID from inspect
id= widget_336.
I put 336 into your code

[Mitch]

Sorry but i'm not sure. So the code goes between the script tags like I did here? Then it gets pasted to the module?

<script>
window.addEventListener('load', function() {
   document.addEventListener('contextmenu', function(e) {
      if ($(e.target).closest('#widget_336').length > 0) {
         alert('Sorry, right click is disabled in this module.');
         e.preventDefault();
         return false;
      }
      return true;
   });
});
</script>

[Mitch]

Okay that worked.. Thanks Glenn

More coffee coming sir

[Barkyj]

Hi Glenn

Thanks for the code, its working great!

[yamijhon]

question about this mod...

only works with several images but just one link?
or u can put, may be, 10 images with 10 links?

[Barkyj]

question about this mod...

only works with several images but just one link?
or u can put, may be, 10 images with 10 links?

Yep 10 images, 10 links, you get a link per image

[yamijhon]

Yep 10 images, 10 links, you get a link per image

thanks Barkyj

[glennrocksvb]

You can put as many images as you want. As Barkyj said, you get a link per image. Just update the bannerImages Javascript variable found in post #1 with the appropriate set of image src and link. Follow the format of the sample provided and take note of the code comments in // or /* */ characters.

[yamijhon]

You can put as many images as you want. As Barkyj said, you get a link per image. Just update the bannerImages Javascript variable found in post #1 with the appropriate set of image src and link. Follow the format of the sample provided and take note of the code comments in // or /* */ characters.

tnx 2 u also dude...
but, another question, the size of each image is auto or i need to put some extra code?

[Barkyj]

I sized my images before I uploaded them, 1160x200 is what I used, unsure what happens if the images are too big though.

[glennrocksvb]

It should automatically scale down to whatever available space.

[yamijhon]

ok, i'm stuck with this...
i tried to put the code in header and footer, none of those works, am i doing something wrong?

<div class="h-align-center">
    <!-- Insert default image and link here -->
    <a id="rotateBannerLink" href="http://www.directemar.cl" target="_blank"><img id="rotateBannerImg" src="http://www.denunciasbuceo.cl/foro/banners/direct.jpg" alt="" /></a>
</div>
<script>
(function() {
    // list down all possible images and links here
    var bannerImages = [
            {
                link: 'http://www.dt.gob.cl',
                src: 'http://www.denunciasbuceo.cl/foro/banners/dt.jpg'
            },
            {
                link: 'http://mma.gob.cl',
                src: 'http://www.denunciasbuceo.cl/foro/banners/mma.jpg'
            },
            {
                link: 'http://www.sernapesca.cl',
                src: 'http://www.denunciasbuceo.cl/foro/banners/sern.jpg'
            },
            {
                link: 'http://www.ssffaa.cl',
                src: 'http://www.denunciasbuceo.cl/foro/banners/subs ffaa.jpg'

            },
            /* no trailing comma here at the last item */            
        ],
        link = document.getElementById('rotateBannerLink'),
        image = document.getElementById('rotateBannerImg');

    // function to get a random banner from the list of banners
    function rotateBanner() {
        var index = Math.floor(Math.random() * bannerImages.length);
        image.src = bannerImages[index].src;
        link.href = bannerImages[index].link;
    }

    if (link && image) {
        // rotate the banner every 3 seconds
        window.setInterval(rotateBanner, 3000); //1000 (msec) = 1 sec (adjust as needed)
    } else {
        console.log('Error: Link and/or image does not exists. Make sure the <a> and <img> IDs are correct.');
    }

})();
</script>

edit: now is working... but i can't put in center, it appears to left side of forum, some help please??

[glennrocksvb]

Can you post or PM a link to your site? The image should be centered because of the h-align-center class in the div container. There might be other CSS that's overriding the slideshow CSS.