Announcement

Collapse
No announcement yet.

Simple Rotating Banner Script

Collapse
X
Collapse
First Prev Next Last
  • Filter
  • Time
  • Show
Clear All
new posts

    #16
    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

    Comment


      #17
      Originally posted by Mitch View Post
      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...

      Code:
      window.addEventListener('load', function() {
          document.addEventListener('contextmenu', function(e) {
              if ($(e.target).closest('#widget_XXXXX').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.

      Comment


        #18
        So I put this in CSS and nothing happened.

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

        Comment


        • glennrocksvb
          glennrocksvb commented
          Editing a comment
          It's not CSS. It's Javascript. So put it inside <script> </script> tags.

        #19
        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?

        Code:
        <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>
        Last edited by glennrocksvb; 11-12-2018, 06:14 PM. Reason: Fixed code formatting using [code] tags

        Comment


        #20
        Okay that worked.. Thanks Glenn

        More coffee coming sir

        Comment


        #21
        Hi Glenn

        Thanks for the code, its working great!

        Comment


          #22
          question about this mod...

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

          Comment


            #23
            Originally posted by yamijhon View Post
            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

            Comment


              #24
              Originally posted by Barkyj View Post

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

              Comment


                #25
                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.

                Comment


                  #26
                  Originally posted by glennrocksvb View Post
                  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?

                  Comment


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

                    Comment


                      #28
                      It should automatically scale down to whatever available space.

                      Comment


                        #29
                        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?

                        Code:
                        <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??
                        Last edited by yamijhon; 06-13-2019, 08:00 PM. Reason: is working, but not at all

                        Comment


                          #30
                          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.

                          Comment

                          Working...
                          X