Announcement

Collapse
No announcement yet.

Simple Rotating Banner Script

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

    Official - Free Simple Rotating Banner Script

    Below is a simple rotating banner script written in Javascript which you can use in Static HTML Modules or Ad Modules.

    All the banner links and images are hardcoded in the script. If you want them to be dynamic, you can use PHP to generate the links and image sources and then you have to use PHP Module to display them on the page.

    Code:
    <div class="h-align-center">
        <!-- Insert default image and link here -->
        <a id="rotateBannerLink" href="https://teespring.com/i-love-vbmods-rocks?tsmac=store&tsmic=vbmodsrocks-accessories-store#pid=46&cid=6578&sid=front" target="_blank"><img id="rotateBannerImg" src="https://vbmods.rocks/filedata/fetch?id=6967&d=1508057154" alt="" /></a>
    </div>
    <script>
    (function() {
        // list down all possible images and links here
        var bannerImages = [
                {
                    link: 'https://teespring.com/i-love-vbmods-rocks?tsmac=store&tsmic=vbmodsrocks-accessories-store#pid=46&cid=6578&sid=front',
                    src: 'https://vbmods.rocks/filedata/fetch?id=6967&d=1508057154'
                },
                {
                    link: 'https://teespring.com/i-love-vbmods-rocks?tsmac=store&tsmic=vbmodsrocks-accessories-store#pid=46&cid=6578&sid=front',
                    src: 'https://vbmods.rocks/filedata/fetch?id=6964&d=1508045443'
                },
                {
                    link: 'https://teespring.com/i-love-vbmods-rocks?tsmac=store&tsmic=vbmodsrocks-accessories-store#pid=46&cid=6578&sid=front',
                    src: 'https://vbmods.rocks/filedata/fetch?id=6968&d=1508057279'
                },
                {
                    link: 'https://teespring.com/new-css-puns-wife#pid=369&cid=6513&sid=front',
                    src: 'https://vangogh.teespring.com/v3/image/c4I0AwoTTsBkLWC0QyUEmR62_pg/480/560.jpg'
    
                },
                {
                    link: 'https://teespring.com/vbmods-that-rock-shirts-2#pid=228&cid=5917&sid=front',
                    src: 'https://vangogh.teespring.com/v3/image/C4Evq25AXapV9rSmsd201_V3ht0/480/560.jpg'
                },
                {
                    link: 'https://teespring.com/vbmods-that-rock-shirts-2#pid=522&cid=101870&sid=front',
                    src: 'https://vangogh.teespring.com/v3/image/_Nb7aR3ULlyR0c6V7N4zZw6ET5w/480/560.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>
    Demo:
    You can find a demo at https://vbmods.rocks/rotating-banner-demo

    #2
    If you don't want the images to be randomly displayed and want them to be sequential based on the order in the list, then replace this code:

    Code:
    // 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;
    }
    with:

    Code:
    // function to get the next banner from the list of banners
    var index = 0;
    function rotateBanner() {
        index++;
        if (index === bannerImages.length) {
            index = 0;
        }
        image.src = bannerImages[index].src;
        link.href = bannerImages[index].link;
    }

    Comment


      #3
      I really like this. This simple script works better for me than the content slider.

      By making multiple images linking to the same featured page I made it meet my needs
      see
      FlipClockFans.com "Featured Flip Clocks"

      Comment


        #4
        Just think of the money I could have saved from buying the photo banner!

        Nice job, Glenn!
        If by chance some day you're not feeling well and you should remember some silly thing I've said or done and it brings back a smile to your face or a chuckle to your heart, then my purpose as your clown has been fulfilled ~ Red Skelton

        Comment


          #5
          i am logged in i still been asked to login do i need special permission ?

          You need to be logged in to view the code.
          Login
          or
          Register
          now!
          voyger.: In Almighty God I trust, everyone else has to provide evidence."

          Comment


          • Mitch
            Mitch commented
            Editing a comment
            This always happens to me also. I'm logged in but the codes are blocked from the message you got. Try logging out and back in or go to your profile page and then back again. This has been an ongoing hiccup for me as well

          • glennrocksvb
            glennrocksvb commented
            Editing a comment
            Please try again. Sorry for the inconvenience. This is a known issue here. I'll upgrade soon and hopefully the issue will go away.

          #6
          Originally posted by voyger View Post
          i am logged in i still been asked to login do i need special permission ?

          You need to be logged in to view the code.
          Login
          or
          Register
          now!
          happening with me also

          Comment


          • Mitch
            Mitch commented
            Editing a comment
            This issue is still present

          #7
          silly me done a bodge up need help pleas likely done on my test forum
          what i done did cope the code on first post and paste on html static module now can't let me edit or removed
          glen can you help pleas

          Click image for larger version

Name:	Capture.PNG
Views:	1
Size:	702.7 KB
ID:	11830
          voyger.: In Almighty God I trust, everyone else has to provide evidence."

          Comment


            #8
            You can't click the Pencil icon?

            Comment


              #9
              i can
              click to the Pencil icon but nothing append is like is lock it i haven/t the option to edit o removed
              voyger.: In Almighty God I trust, everyone else has to provide evidence."

              Comment


                #10
                It looks like you pasted the script in the module title field and not in the module HTML field.

                Comment


                  #11
                  yes i did was my mistake pasted in the wrong place is any way how can remove or edit?

                  thanks sorry for the trouble
                  voyger.: In Almighty God I trust, everyone else has to provide evidence."

                  Comment


                    #12
                    Try this. Right-click on the code in the title, then choose Inspect or Inspect element (depending on the browser you use). Then in the highlighted source code, edit the the element (right-click and choose Edit as HTML). Then delete the code in the title. Then try clicking the Pencil icon again.

                    Comment


                      #13
                      hi glen thanks done it solved you are a live saver thankyou thankyou
                      done as you said above worked thank god for that very happy man today

                      regard
                      voyger.: In Almighty God I trust, everyone else has to provide evidence."

                      Comment


                      #14
                      Glenn I shot you an email, but maybe it's better to post it here for others. I am using this rotating banner to display some custom calendars that I resell to the board. Is there anything that I can add to the HTML code to prevent it from being copied and pasted?

                      TIA

                      Comment


                        #15
                        I was meaning to respond to your email but got sidetracked with something else and forgot about it. Sorry about that.

                        To answer your question, website owners usually add a script to disable right-click to prevent users to copy the text or images on a page. This is generally frowned upon by the developers and users as it is annoying. Another problem with it is when you right-click, the available options in the context menu are not only for copying so all the context menu options are blocked. And besides, that can be easily bypassed using browser extensions that are available to re-enable right click.

                        Comment

                        Working...
                        X